Step by step deployment of Git Push hook to push changes to my server in a single command
I have a ReactJS app setup as a git repo. Every-time I update and push to my currently working dev branch I have to ssh/login to my server and pull it to reflect changes to server.
In addition I have to restart my app by running pm2 restart “myapp”. Sometimes I have to run yarn install as well, when I have added or removed a package in my app.
I wish I could automate all this process of pushing, pulling, yarn install and finally restart my app. Is there a way? It seems like there are many!
Let’s try to set it up one. The one I am demonstrating here uses git’s post-receive hook.
1. Create the Bare Repo
- Login to your server
ssh arvind@devarticles.in
- Setup a bare repository. The My_React_App.git is the name of the folder and the path is the location where you want to keep your bare repo. In my case I just created my bare repo folder My_React_App.git in my current user’s folder /home/ubuntu. I named this folder with extension .git just to remind me that it is some repo folder and not just a normal folder.
git init --bare /path/to/My_React_App.git
- create a `post-receive` hook
nano /path/to/My_React_App.git/hooks/post-receive
- And enter into it, this:
#!/bin/sh # Check out the files git --work-tree=/path/to/My_React_App --git-dir=/path/to/My_React_App.git/hooks/post-receive checkout -f dev
Here, /path/to/My_React_App is the location where my actual app folder resides. It can be whatever you want. Something like /var/www/My_React_App if you like to keep your all sites in one place or perhaps like /opt/My_React_App if you want it something anonymous.
Note: In my example I am pushing my local `dev` branch to remote `dev` branch. You may omit passing branch name if you are working on your default branch, i.e. main or master, whatever is set in your config.
Important Step:
Make this file executable by setting:
chmod +x /path/to/My_React_App.git/hooks/post-receive
2. Configure local repo
Run this within your own local repo
git remote add dev 'ubuntu@<IP-ADDRESS>:My_React_App.git'
Here, dev is the name of branch which I am setting to push to remote hook. My_React_App.git is the name of the folder name of my bare repository created in previous steps. If you remember, I had set my bare repo folder in the root folder ubuntu of my account hence I did not set the full path to this folder in this command. Hence for you it could be something like
git remote add dev 'ubuntu@<IP-ADDRESS>:/path/to/bare/My_React_App.git'
**Note:** if you use ssh key to login to server use the following to set up your key in Git configuration, before running the command above.
GIT_SSH_COMMAND='ssh -i /Users/arvind/mykey.pem' git submodule update --init
3. And Finally, configuring the **push**:
git push --set-upstream dev dev
The above command maps our local repository branch push to remote branch. In my case it is dev > dev and this option can be omitted if you are doing it for your default branch.
If everything works fine you should be able see your local app changes on your server next time when you do
git push
Note- A normal push to your dev branch or any other branch should keep working as before, unaffected:
git push origin dev
Performing Tasks After executing Git Hook Push
As I mentioned earlier I was working on a reactapp for which I wanted to setup this post-receive hook. Hence, after every successful push I wanted to run some specific commands inside my app folder. The following ones to be specific:
yarn install pm2 restart "myapp"
Thankfully this is as easy to automate running these commands as adding these two or rather three lines of code into our /path/to/ICOV3_React_Admin.git/hooks/post-receive file. That is edit post-receive file to add:
cd /path/to/My_React_App yarn install pm2 restart "myapp"
**Note**: I assume that I had run pm2 command with same name to run this app first time, from my app folder. That is:
pm2 start yarn --name "myapp" -- start
