Setup your Web-App for Continuous Integration

Outline

Building a production-level web application is daunting. This post provides an outline suitable for most small to medium-sized web applications allowing for continuous integration. We will be focusing on Flask web-apps, but this could be adapted to WordPress, NodeJS, etc. For reference, the website you are currently on (ITB) uses the process described below. It allows for easy debugging, safely testing changes, and moving those changes to production with minimal effort.

What you need

1. Git + GitHub

Git is a version-control system popularly integrated with GitHub. With the proper setup, one can seamlessly test locally, commit and push to GitHub, and lastly pull down the changes on the production server.

1. Bash Scripts

We are striving toward simplicity and stability to ensure our applications run at optimal levels. Writing Bash scripts that handle running locally, pushing to GitHub, and updating production will allow for repeatability and help eliminate small, but possibly consequential mistakes. These Bash scripts ease the process of continuous integration

1. An application

You can't continually develop an web-app that doesn't exist... I'll let you do the math ;)

The idea

We want two environments so we can test our changes before moving to production. The local staging environment will allow for fast updates and easy debugging while the production environment provides speed and security.

Bash Scripts

As noted above, we need three bash scripts.

Run Locally

The first script is to run your website locally. You may ask, why can't I just spin up my server with python app.py? While that definitely does work, having simple bash scripts with plain English names such as run-server.sh breaks down the entry barrier to development. This is especially helpful when working with multiple team members.

Pro tip: add another script called setup.sh that will install any required packages and do the initial database setup.

Example run-server.sh file:

echo ">> Starting Local Web Server"
echo "-----------------------"
if [[ $1 == 'DEBUG' ]]; then
python3 server.py
else
gunicorn -w 4 wsgi:app
fi

With this script, in your terminal, you can run your website with debugging enabled by simply calling bash run-server.sh DEBUG or leave off the DEBUG to run normally.

Push to GitHub

Quick pre-rec on this one - you need to initialize a git repository to track the code changes you make. The setup of the Git repository is outside of this article's scope, but for further guidance, please follow this link to an article on GitHub.

Now that we have the web-app synced with GitHub we want an easy script to update the remote repository on GitHub with the changes we have made locally. Let's call this script git-sync.sh. This script will take in 1 argument, the description of the changes made.

Example git-sync.sh file:

echo ">> Syncing Local Edits With GitHub"
echo "-----------------------"
git add --all
git commit -m "$1"
git push

Update Production

The third script will live on the production server. We want a simple way to update the production server with the changes we pushed from local to GitHub. Let's call this script update-production.sh.

Example update-production.sh file:

echo ">> Updating Production Server From GitHub"
echo "-----------------------"
git pull
sudo systemctl restart isaacstechblog.service

The second line, sudo systemctl restart isaacstechblog.service, restarts the server to make sure the changes are live.
  Note: most produciton servers use a Linux service to spin up the server. Follow this link for a tutorial on getting that setup*

Workflow

With Git + GitHub setup and the bash scripts in place, you are ready for fast and easy development. Let's walk through an example workflow of updating the search bar on your web application.

Local

1. Open your terminal and navigate to the base directory of your application.
2. Run bash run-server.sh DEBUG.
3. Make your edits to the app and test the functionality.
4. After testing, run bash git-sync.sh "Updated the search bar background and implemented fuzzy search". Your changes are now on GitHub!

Production

1. SSH into your production server and navigate to the base directory of your application.
2. Run bash update-production.sh.

Wow, that was easy! There is some setup involved but your future self will be very grateful.

Wrap-up

Continuous integration sounds fancy and complex, but with a few tools, you can iteratively update your web-app with ease. I strongly recommend creating bash scripts with plain English names to eliminate confusion. When you come back to a project 3+ years later, you don't want to remember how to start up your local server or update production.

To summarize the outline, run a local server, push your tested changes to GitHub, and finally pull them down to your production server.