WEB APP DEVELOPMENT

Automatic deploys for efficient web development with GitHub + Netlify

Let tools take care of CI/CD so that you can focus on development.

Shailesh Kumar

--

Managing the delivery of a large web application requires a lot of work. Having some good continuous integration tools can help in significantly accelerating the development and review process. This article provides an overview of some good continuous integration flows that you can build with a combination of GitHub and Netlify.

We start with a simple web application. It may have been built using Angular, React, or Vue (any of the popular frameworks). Assume that all the development is happening in the main branch of the GitHub repository of the project. Netlify provides some straightforward tools to deploy the project directly from your GitHub repository to its CDN. It works for both public as well as private repositories. It will also assign a subdomain for your web application (of your liking). Here are some references:

This is great in the beginning. As more developers join the project and parallel work starts, it doesn’t make sense to work directly in the main branch. A better approach is to as follows:

  • develop features in feature branches
  • review them to ensure that everything is working fine
  • create pull requests
  • review pull requests and ensure that there are no conflicts for merge
  • merge them in the main branch

You would like to see the website in action at the following steps in the above workflow:

  • Whenever changes are pushed into a feature branch, you would like to be able to review them by seeing them in action
  • Whenever a pull request is created, you would like to see the resulting website in action before you merge the pull request into the main (production) branch.

Fortunately, Netlify supports both use cases.

  • It can automatically create branch deploys (with a separate site name) for every branch. As soon as any change is pushed to a branch, it gets deployed automatically.
  • It can automatically create deploy previews from each pull request.

Here are some references:

In case any of the builds fail, Netlify also provides detailed build logs to identify and resolve the problems. This usually happens if someone fails to update the package.json to specify some dependencies.

In summary, Netlify makes it very easy for you to deploy your branches and pull requests automatically, verify that they are building correctly (you can also include unit tests), and allowing your collaborators to review the features in action before they get merged into the production. This can lead to huge savings in development time and a more pleasant experience.

Happy coding!

--

--

Shailesh Kumar

Python | JavaScript | Web Applications | Math | Statistics | Computer Vision | Sparse Representations https://www.linkedin.com/in/shaileshkumar1729/