I'm using webpack-dev-server to server my client side application (with angularjs).
The dev-server is working perfect but as far as I understand it should not be used at production.
Is there a production-ready equivalent server that I can use to serve my bundle.js? (I'm aware of the ability to implement my own server).
You could create a simple server in Node or use a framework such as express.
The reason webpack-dev-server isn't recommended for production use is because it's designed to update the browser when files change which isn't desirable in production.
Related
When using a ReactJS application you run it locally with npm start.
This ends up calling react-scripts start, which uses the WebpackDevServer.
The documentation says that you shouldn't use the dev server for production.
The reasons for not running it in production are mostly security, obfuscation, minification, size etc.
However, is there any technology reason that means you can't use it on a server?
i.e. if you ignore all the issues with running the dev server, will it still actually serve the pages and be accessible from a web page?
Sure, you can run it there - you just have to set it up.
You should not, but you can.
i have got a problem, which i am trying to find a solution for weeks now.
I think it´s an understanding error on my side, but i couldn't figure it out.
What i am trying to do:
Develop, not deploy, a react app on an Apache2 server.
I know that react is an frontend library, so it should be possible to do.
I also know that nodeJs is kinda required to "npm" all the packages and to create the "Simple" react app..
What i want also to do:
Use the MATERIAL-UI
Build a PHP Backend
Collaborate with my Team Members (they should also work on the react app)
Thanks in advance.
Hosting a ReactJS App is no different than hosting any other javascript code on any type of server - by having it as a static file on your web server and including it in the html returned from the server.
Depending on the way your React project is set up, you would:
use node to build a javascript bundle of your react app (possibly by running "npm run build" in any CLI),
include the resulting script file or files in the head element of your root or master template
Make the Apache web server return the needed page with the master template where the script tag is
Additional setup could include starting the PHP server and react development build at the same time, but that is highly specific on your setup and would require you to add some more information on used frameworks and setup.
It is not possible to deploy apps with Apache and React. The nodejs based- Webpack server is incompatible with Apache web server. You'll have to pick one server or another, you can not route index.html -> index.tsx and vice versa. Besides if you ever got both servers working in tandem with SSL, it's a technically security nightmare and has no production value. It's best to avoid java(script) all together as it's merit in real software development has greatly diminished. Mostly for gold diggers.
i have created and build (react-script build) a simple react application. I want to deploy it to my ubuntu server via a Docker image and i am looking for advise. Is it better to use expressjs and pm2 to serve the react app or would it be more useful to serve it via nginx? What are the advantages and disadvantages?
Thanks a lot for your advises
When you're going to deploy a React application, you've typically used a tool like Webpack to compile it down to a set of static files. Once you've done that, deploying it via nginx will be smaller and faster than an Express server, and since you don't have the entire Node interpreter involved, there are fewer parts involved to potentially have security issues.
In fact, even if the rest of your application is in containers, it can be beneficial to host the front-end somewhere external (if you're otherwise deploying to AWS, for example, put the built front-end into an S3 bucket). This can simplify the deployment mechanics a little bit, and with Webpack's file hashing, you can keep older versions of the code for browsers that haven't reloaded the page recently. You still probably need the nginx proxy (to serve a /index.html page, to proxy the back-end services) but you don't necessarily need to redeploy it when the front-end code changes.
The only real advantage to an Express-based deployment setup is being able to live-reload your code in production. That would come with a high risk of human error, though: make an accidental typo and save the file, and end users see an error page. I'd avoid this path.
I created a React application using Create-React-App and npm.
I intended to simply build it with npm run build, and somehow host the produced build in a windows server.
This windows server doesn't have any internet connection (but I have admin right so I can install offline packages), then I tried :
Hosting the built folder wihth IIS which didn't work (I couldn't find
any good documentation on that)
Packing the "serve" npm package to install it in the server (serve having
a huge amount of dependencies, it's really difficult to get an
offline package)
None of this seems to work... Any suggestion ?
One way of doing it:
1.Install NodeJS on Win Server that has Internet connection.
2. Install Express on that server and get your React app to work with Express.
You might want to look for Express-React boilerplate to save time. I wrote such a boilerplate though it's written in TypeScript. There are others.
3. Copy NodeJS installer and Express installation to the server without Internet connection. Install Node. Then you can optionally use IIS as a proxy for better security.
Another (and more involved) way:
Instead of copying the Express installation, create a Docker container out of it. Then enable Hyper-V on the server without Internet connection and run the container there.
Yet another way (I don't recommend it):
Let IIS create NodeJS run-time environment while serving incoming request using iisnode as described here.
P.S.
Using Express won’t add SSR to your React app. An SPA needs some server-side logic from the server. That's what I meant when suggested get your React app to work with Express. The logic includes mapping and redirects.
IIS has very powerful and flexible configuration and both mapping and redirects could likely be done declaratively by typing the configuration settings including regex(es). I never tried but have feeling this is possible. However it might be a challenge to find instructions about that online. The other way to do the mapping and redirects is programmatically rather than declaratively. Instead of writing it in C# for example, you can do it in JS or TypeScript, utilize Express and add IIS as a proxy.
What mapping and redirects are needed?
Mapping: Map the path /static/js/*.js to the physical folder where the script bundles are. CRA puts the bundles into my-cra-app/build/static/js directory. Note 1: You might want to double check that in the index.html file generated by CRA the path to script bundles (found at the bottom of the file) is indeed /static/js/<bundle>.js. Note 2: Better security would be achieved if the mapping is not wildcarded, rather more restricted e.g. it checks for a pattern match that includes the bundle name(s).
Redirects: Needed to implement the fallback required by all SPAs. The fallback is automatically added by CRA to webpack-dev-server. When people do deployment then in cases when they move from webpack-dev-server to Express or other server, they frequently skip the fallback which is mentioned here as the 3rd pitfall of React-Express integration.
I have created my application using create-react-app. It is working fine with SSR. Everything is in place but I don't know how to deploy it?
What I ideally want is :
Generate a build folder and will upload in cdn. Want to serve my static assets from there. I want to create a distribution from my code and take that to another machine to deploy. I am not able to figure out how to do highlighted part. How can I create bundle for server? npm run build creates my bundle for client.
PS: I am using React libraries like React Router 4, Redux.. in my application. Hope this does not affect my answer.
For SSR , I have used express.
Server side rendering means you need a server (which is express) that will serve all the requests: server-rendered pages, including the static assets. So CDN is not enough.
You might want to try following free cloud services that support Node server:
https://zeit.co/now
https://www.heroku.com/
https://firebase.google.com/docs/functions/
You can create server bundle using Webpack, with target: "node" and use https://www.npmjs.com/package/webpack-node-extenals.
The details can be complicated, so you can just visit https://github.com/antonybudianto/react-ssr-starter/blob/master/config/webpack.server.config.babel.js for the reference.
I tried whit Firebase, but I can't, In the function's documentation says that execute the function can't be more than 60s, and my function takes more.
When I deployed other basic functions, it deploys without problems.
And If you achieve deploy it, give you a status 403, because you have to put the function in public mode.
If you want to deploy an app whit SSR make it whit Express, like in my case, you can deploy it like an API.
You can deploy it too whit Doker using AWS or Google cloud.
Heroku is the easiest way to do it, but I don't want to have all my apps here.