Deploying a React Frontend to a Private Server Using Git Hooks and Nginx

To deploy a React project efficiently, two main strategies are presented: uploading the compiled build directory or pushing the source code to the server and letting the server handle the build.

For the compiled‑files approach, run npm run build locally, then transfer the build folder to the server (e.g., via rsync) and configure Nginx to serve it as a static site.

The source‑code approach uses a bare Git repository on the server. After installing node, git, and nginx, create a bare repo in /opt/react-test.git:

cd /opt
git init --bare react-test.git

Inside the repository, add a post-receive hook that checks out the release branch into /home/react-test, runs npm install, builds the project, and 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 hook uses --git-dir and --work-tree to separate the Git repository from the working directory, allowing flexible checkout locations.

On the client side, add the remote repository and push the release branch:

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

After the push, the server automatically runs the hook, updates the source, builds the project, and places the new build folder in /home/react-test/build.

Finally, configure Nginx to serve the built files:

server {
    listen 80;
    server_name yourhost; # e.g., www.example.com
    root /home/react-test/build; # path to the built directory

    location / {
        index index.html;
    }
}

Reload Nginx with nginx -s reload. From now on, any code push to the bare repository triggers the full CI/CD pipeline, providing an automated deployment workflow for the React frontend.