Serve react CSR in nginx

previous part | home

Build the React app in your VM or your local. Up to your preference

yarn build

Then, files will be generated inside the build folder. This will have an index.html that will be the file first retrieved by the browser. After that, it will fetch more bundle js for performing React magic.

You need to move these to /var/www folder. It is not a must, but it is the best practice we better use. You can use cp or mv.

If you build the app on your local machine, you can send your files with scp.

scp -r ./build rous@[vmhost]:/var/www/domain.xyz

After that, you need to set up your nginx.conf file

events {
        worker_connections 1024;
}

http{
        server {
               listen 80;
               server_name domain.com;
               location / {
                        alias /var/www/domain.com;
               }
        }

}

See that I use alias to direct the path. Another option, like root, will append location to the path. But I don’t need it now.

This procedure only covers HTTP; you can set up the HTTPS using Let’s Encrypt.

Reload the nginx service

sudo systemctl reload nginx

There you go.

This is what I used to serve http://averrous.xyz/. It still looks terrible.