A CI/CD for Angular up and running effortlessly with GitHub Actions and GitHub Pages
Nowadays, having a reliable workflow for continuous integration and deployment is mandatory. Whether you work alone or as part of a team, having the ability to automatically build, check, and deploy your project can save a huge amount of time. There are so many options in the market for building a CI for Angular that it is impossible to cover them all.
In this article, we will simply focus on doing everything using the tools provided by GitHub. If you are already using GitHub to version your project, you might be interested in using it to its full potential.
I am going to build and deploy a simple weather application I used in a previous article.
To initialize the workflow of your CI, simply go to your repository home page and click on actions.
As you can see, GitHub will suggest some predefined workflows to start with, depending on the nature of the code in your repository. We will build the workflow manually, so we can comment on each step. (the complete final file is provided at the end of the article)
After you clicked on “set up a workflow yourself,” you will get a basic hello world type workflow. The workflow comes as a
.yml file with a specific syntax. Each line has a comment explaining why it is here. We can keep the file as is and click on commit.
Now, if you go back to the action tab, your workflow should have executed successfully.
The CI configuration file is now stored in your project under the
First, we need to decide when the workflow will be triggered. I decided to trigger it each time there was a push on the
master branch. In my case, it makes perfect sense because my workflow is going to build and deploy my project. You could choose to trigger for each pull request, or even use a regex to match the branch name.
The beginning of my file looks like this: