Automate a Full-stack Application Deployment Using GitHub Actions

#githubactions #git #reactjs #expressjs #virtualization #fullstackdevelopment #githubrepository #statemanagement

I have always found this to be a challenging task, getting website contents to a remote web-server. Building locally seems to work, you get the outputs you expect but then there comes the challenge of getting this content to the internet or world wide web(WWW). There are a few options that we may consider,

1. Going to web hosting provider to server your contents.

2. Using a free web hosting tier provided online.

3. Using your own online web-server.

I have never tried the first option given. I have used the second option but this comes with its own pro and cons. It is free space that you are given but the disadvantage is, if its a full stack app that you are trying to upload then there are limitations on the language that the provider is using compared to what you have used. Using the third option is what has worked for me over the years, getting a virtual private server(VPS) or some may call it as a cloud server, installing the operating system and the services we need running on the VPS, in this case , web-hosting service.

Now, the most daunting part is getting content to the VPS, there are so many things we need to do and they also become repetitive, below is what I do;

1. Get the local contents to GitHub.
2. Clone the contents from GitHub to the VPS.
3. Repeat the same stuff that you have done locally like installing the dependencies that the app needs to work.

What if your customers grow in number? All the above works but is there a simpler way to accomplish all these steps? I had to deal with this challenge until I knew about GITHUB WORKFLOWS/ACTIONS. This has helped semi automate the above processes.

This GitHub repository https://github.com/bradtraversy/proshop-v2 by Brad Traversy is a full stack MERN(mongoDB,express,reactjs,nodejs) application that I have cloned to show the proof of concept, I have created a GitHub workflow to automate the process and below are the steps;

1. Clone repo from my GitHub account to Git-hub runner.
2. Clone the repo from my GitHub to my self-hosted runner(my VPS).
3. Repo in the GitHub runner is bundled into an artifact that is moved to the self hosted runner.
4. In the repo in the self hosted runner, the dependencies are installed using 'npm install'.
5. An environment file is copied into the root of the cloned repo.
6. PM2 is used to start up the app as a process on the web-server(PM2 is a daemon process manager that will help you manage and keep your application online-definition from the site).
7. There is one process that is not included that I have done manually, that is creating the MongoDB database in Mongo Atlas and attaching the db to the back-end of the full stack application.

Now it is just a matter of me making the edits in my local repository and when the changes are pushed to GitHub, this triggers the all the steps hence automating the process. After every change commit and push to GitHub the steps are triggered.

https://www.raliku.com is the working full stack MERN web application.

Check out the repo https://github.com/anapitalai/raliku-holdings. All the steps are in the above repo under .github/workflows/automate.yaml.

Knowledge is information, understanding is comprehension and application is wisdom.(Dr Myles Monroe). May God bless you.