0

I have a typical Ubuntu VPS setup (20.04LTS) where I have installed the Nginx Server. I have two local repos with front-end reactJS code repo and back-end ExpressJS code repo. I will start the ExpressJS on the 3000 port with forever start. I have also a mysql db. I have configured Nginx to server the static files with the root /var/www/[Your repo name]/build; and I can open the html files and it is working. The question is, do I need to start on another port for an example the ReactJS npm run start or is Nginx enough? Could you help me out with some links or best practices?

Thanks in advance.

ultimo_frogman
  • 91
  • 3
  • 11

2 Answers2

1

If you're using CRA (create react app), it ships with a build script, so after running npm run build the whole app is built into static files including a index.html and some js and css files. all you need to do is to config nginx to serve that index.html. so nginx is enough for that. if you're using react-router in your app keep in mind that you may need to use try_files directive of nginx for serving that index.html for any incoming requests.

for more information about react-router and nginx see this.

If you're doing SSR (Server Side Rendering) you need a process manager like pm2 or forever to serve your app internally and proxy_pass directive of nginx to reverse proxy incoming requests to your app. More info

StackedQ
  • 3,999
  • 1
  • 27
  • 41
  • Hi. Thanks for the intro. I think my developer is using create react app. And I have configureg nginx to server index.html. I am not sure how to check if we are using Server Side Rendering. Where could I check it out? – ultimo_frogman Jun 19 '20 at 09:27
  • if you're using bare CRA you're not doing SSR, a react app with SSR usually is built on top of `nextjs`, `gatsby` or have a custom SSR engine with a `server.js` in root directory. – StackedQ Jun 19 '20 at 09:29
  • Hi. I have found out that we are using react Router , so I did configure before the : server { listen 80 default_server; server_name _; # react app & front-end files location / { root /home/ubuntu/front-end/html; try_files $uri /index.html; } # node api reverse proxy location /api/ { proxy_pass http://localhost:3030/; } This should be enough I guess. – ultimo_frogman Jun 19 '20 at 10:42
  • Thanks for the fast reply. I have the files in the public folder with html and index.html. This should be enough for nginx as a start point ? My config. – ultimo_frogman Jun 19 '20 at 10:51
  • please edit your question if you want to add more information. – StackedQ Jun 19 '20 at 15:07
0

All the static files like index.html and assets will be served from your "root /var/www/[Your repo name]/build" folder, when the user opens your base url and sent as response for the get call. From your code, make sure to append '/api/' to all your backend requests from ui, so that it will get forwarded to your service running on port 3030.

Vijay122
  • 884
  • 8
  • 12
  • Hi. Yes I have appended the code to the /api . This is quite clear. But I am still confused, should I start for ReactJS frontend with npm run star and also for ExpressJS backend with npm run start (and add some proxy). Or this is not needed if I run only react.router without nextjs ( I think I have seen reactdom packages used in frontend). With react npm run start , I see it starts his own development server. What is the best practice in production with this situation and NGINX ? – ultimo_frogman Jun 19 '20 at 19:13
  • It is not necessary to run a dev server on a production environment. Your need to build your project on the production server(either by jenkins or manually login to the server machine), and when the 'dist' folder is created, it have all necessary files to load your UI page. In nginx, always serve the dist folder in the root path, '/' so that your index.html containing the links of app.min.js and app.min.css are served to the browser requesting the page. – Vijay122 Jun 25 '20 at 15:47
  • And one more point here is, when you run a dev-server, it exposes your source-maps to the outer world, which may not be a good practice. If you start to serve static bundles, it is handy to move to serverless architecture. – Vijay122 Jun 26 '20 at 04:58
  • @VIijay122 - Thanks for the good explanation. Do you have maybe some links on how to build the project of ReactJS and creating the /dist folder and making all of the nginx settings for production. Maybe some tutorial or best practice link with the steps ? – ultimo_frogman Jun 27 '20 at 06:17
  • Sure. Building a react app is done either through webpack, or through scripts to generate the dist folder. Once the dist is generated, from nginx configuration, dist folder is pointed to root url. Kindly refer below link for detailed steps. https://dev.to/xarala221/the-easiest-way-to-deploy-a-react-web-application-2l8a – Vijay122 Jun 28 '20 at 10:12