I recently created a simple React app for running different tax calculations (still a work in progress) called Calc Mate and decided to deploy it on a Linode instance I have running Nginx.
Create a new nginx site configuration file for the react app
Create a new configuration file for your application.
sudo vim /etc/nginx/sites-available/calc-mate
Add configuration
The contents of the file should be the following. Replace the server_name as appropriate and update the root to point to the build directory of your app wherever it is located on your server. Don’t forget to specify the index file, which for a React app will usually be index.html
Also another important thing to remember is that is you are using react-router you need to specify in the location try_files to point to index.html because without this you will get an Nginx error when you refresh the browser on a routed resource as the request wont be routed back into the router.
server {
server_name calc-mate.com www.calc-mate.com;
root /path/to/calc-mate/build;
index index.html;
location / {
try_files $uri /index.html;
}
}
link config file to site-enabled
Now that you have created the configuration file for the app you need to link the configuration to the sites-enabled so that Nginx will import the server configuration.
sudo ln -s /etc/nginx/sites-available/calc-mate /etc/nginx/sites-enabled
restart
Now you just need to restart Nginx in order to get the changes ot take effect
sudo service nginx restart
Build/Rebuild
Now that the server is configured you need to build the app in production mode to serve it correctly. Every time you make changes to the app you will need to rebuild. I use yarn as my package manager. To build the app in production mode using yarn from the root of the application you just run:
yarn build
And then when you refresh the page in the browser your latest changes will have taken effect. No need to restart the server!