How to Automate React Deployment to a Private Server Using Git Hooks

Recently I needed an efficient way to deploy a React frontend to a private server, so I explored several CI/CD approaches and summarized them.

The deployment can be done either by uploading the compiled build directory or by uploading the source code.

Compiled files deployment: run npm run build locally, then rsync the build folder to the server and serve it with Nginx.

Source deployment: push source to a bare Git repository on the server, let a post-receive hook build and deploy automatically.

Server setup

On the server install node, git and nginx. Create a bare repository in /opt/react-test.git. Inside its hooks directory add a post-receive script that checks out the release branch into /home/react-test, runs npm install and npm run build, then outputs status messages.

#!/bin/bash

echo 'server: received code push...'
cd /home/react-test
echo 'server: checkout latest code from git...'
git --git-dir=/opt/react-test.git --work-tree=/home/react-test checkout -f release
echo 'server: running npm install...'
npm install && echo 'server: building...' && npm run build && echo 'server: done...'

The --git-dir and --work-tree options allow using a separate Git repository and working tree, separating project files from the repository.

Nginx configuration

Create /etc/nginx/conf.d/react-test.conf with:

server {
    listen 80;
    server_name yourhost; # e.g. www.example.com
    root /home/react-test/build; # compiled files
    location / {
        index index.html;
    }
}

Reload Nginx with nginx -s reload.

Client side

Add the remote repository:

git remote add prod ssh://[email protected]/opt/react-test.git
git checkout -b release
git push prod release

After pushing, the server’s post-receive hook builds the project and updates the build directory, completing the CI/CD cycle. Subsequent deployments only require another git push.