I recently finished one of my projects and wanted to host it online for the world to see all its beauty. I didn’t want to use Heroku as I thought that it abstracts too much of the server configurations and I myself wanted to know how the server configs worked.
I first started looking around on how to host a React app on DigitalOcean. Side note, if you haven’t set up a Linux VPS on DigitalOcean before, I’d highly recommend. It’s one of the simplest things to do and for the cheapest option it’s about 5$ a month. Not being paid to say that, I just enjoy their service and I’ll be using it on for the rest of the tutorial. Ok back to the server. I used DigitalOcean’s NodeJS One-Click app as my starting template.
After the server was created, I like to secure the server the first time I log in, here’s a link to an article I follow. Next do the installations.
sudo apt-get install nginx
sudo npm i -g create-react-app react-scripts@latest pm2@latest
Go to a directory where you’d like to your React app and run:
create-react-app my-app
Once you have a ready to deploy application, go to your react app’s directory and run
sudo npm run build
The above code creates a minified version of your code optimized for production in the my-app/build directory.
We use PM2 as an application manager in order to keep our app running after we log out of the server.
pm2 start my-app/node_modules/react-scripts/scripts/start.js --name "my-app"
This will have our application running in the background.
Here’s a few commands to note when using pm2:
pm2 status
pm2 restart my-app
pm2 stop my-app
pm2 start my-app
pm2 delete my-app
Now it’s time we get Nginx configured in order to expose our application.
First, create a new site in /etc/nginx/sites-available/
cd /etc/nginx/sites-available/
vim my-app.com
Then inside /etc/nginx/sites-available/my-app.com place the server configurations:
server {
listen 80;
server_name my-app.com;
server_name your.server.ip.goes.here;
root /root/my-app.com;
index index.html;
access_log /var/log/nginx/my-app.com.access.log;
error_log /var/log/nginx/my-app.com.error.log;
location / {
try_files $uri /index.html =404;
}
}
Nginx needs to be told that a given site is active. To do this, create a symlink in sites-enabled
cd /etc/nginx/sites-enabled
ln -s ../sites-available/my-app.com
Run nginx -t to see if there are any errors with the config file, if any come up, try and find the error and correct it.
Restart Nginx:
/etc/init.d/nginx restart
Navigate to your servers IP on your local computer and your site should now be hosted!
ACTUALIZACIÓN
pm2 start "serve -s build" --name "react_pwa_eros"
