Easy deploy your react server with Nginx

Now you have your react project and you want to create a simple deploy server.

Install your host server. We are going to use a Nginx proxy server. This is an example for a Debian based system.

sudo aptitude install nginx-light

For this example we don’t need the full Nginx server.

Nginx creates a default host file. Then you can place the content of your build files under /var/www/default and it should be enough.

However if you want to create your own file.

Create a configuration file under /etc/nginx/sites-available/ myreact.

It’s most simple content is this one:

server {
  listen 80;
  location / {
    root /var/www/myreact;
    index index.html index.htm;
    try_files $uri $uri/ /index.html =404;
  }
}

Now let’s activate our site.

It used to be enough just creating the symlink to the file, now you have to copy it.

sudo cp /etc/nginx/sites-available/myreact /etc/nginx/sites-enabled/myreact

And place your built files.

sudo cp -r build /var/www/myreact

Since we are using the same port 80 is best to remove the default settings file from sites-enabled.

If you can access your server under a name, like myreact.com. You can add the tag server_name to your file like this.

server {
  listen 80;
  server_name myreact.com www.myreact.com;
  location / {
    ...
  }

And it will listen to both myreact.com www.myreact.com. However you are under your locahlost server and it doesn’t work, you might need to add your names to your host files.

• React
• Build
• Nginx