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.
Related
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 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.
I am new in react+redux. Recently I got a task and have no idea.
Is it possible not to use any web server to run my react+redux project?
After building my project, I got a folder of static files.
Is it possible to place those in CDN not having web server eg. nodejs or tomcat?
thanks.
If you do not need save data on server - you do not need it. Take a look on GitHub pages for sample.
Of course you can but you need an HTML page to be parsed by the browser, in which you would include the necessary SCRIPT tags to load and run your React app.
I recommend you give Surge (https://surge.sh/) a try, it's free right now and you can easily host your React project with ease (including the .html files and every asset generated by your build). You can even create a npm script that builds and then deploys from the CLI with a single surge call. Works like a charm!
You can even use a custom domain name, or choose a specific surge subdomain if it's available, like gibbok.surge.sh. ;)
No it is not possible without a webserver.
If your app is a static website for example, with no server functionalities (like nodeJs) you could host your builded application (static files) on any simple http server included github pages without setup a nodeJs server.
If you app has some dynamic functionalities, example it use nodeJs to work with server file system or db, you need a node server.
In both cases a http server is necessary to delivery JS/HTML and assets to the browser when requested.
On a CDN you could store some static files, which can be used in your project, which is great if you are building a js library.
In case you do not want to care about the http server you could use any simple hosting solution, example GitHub page, or any hosting which allow running a website with some static files.
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.