How to Build and Deploy an Angular Application Directly From GitHub | by Aurélien Leloup | Jun, 2022

A CI/CD for Angular up and operating effortlessly with GitHub Actions and GitHub Pages

picture by creator

These days, having a dependable workflow for steady integration and deployment is necessary. Whether or not you’re employed alone or as a part of a group, being able to mechanically construct, examine, and deploy your challenge can save an enormous period of time. There are such a lot of choices out there for constructing a CI for Angular that it’s inconceivable to cowl all of them.

On this article, we’ll merely deal with doing all the pieces utilizing the instruments supplied by GitHub. In case you are already utilizing GitHub to model your challenge, you may be occupied with utilizing it to its full potential.

I’m going to construct and deploy a easy climate software I used in a previous article.

To initialize the workflow of your CI, merely go to your repository residence web page and click on on actions.

As you possibly can see, GitHub will counsel some predefined workflows to begin with, relying on the character of the code in your repository. We are going to construct the workflow manually, so we will touch upon every step. (the entire last file is supplied on the finish of the article)

After you clicked on “arrange a workflow your self,” you’ll get a primary hey world kind workflow. The workflow comes as a .yml file with a selected syntax. Every line has a remark explaining why it’s right here. We are able to maintain the file as is and click on on commit.

Now, when you return to the motion tab, your workflow ought to have executed efficiently.

The CI configuration file is now saved in your challenge beneath the/.github folder.

First, we have to determine when the workflow shall be triggered. I made a decision to set off it every time there was a push on the grasp department. In my case, it makes excellent sense as a result of my workflow goes to construct and deploy my challenge. You possibly can select to set off for every pull request, and even use a regex to match the department identify.

The start of my file seems like this:

Subsequent, let’s put together for the precise job. We have to:

  • Take a look at the challenge supply code
  • Arrange node.js
  • Set up dependencies
  • jobs is the syntax to start a job. A workflow can include as many roles as you need.
  • build-and-deploy is the identify of the job. You actually can put no matter right here.
  • runs-on is the place you determine the platform to run your job on. I went for Ubuntu, however as we’ll largely use npm we might have picked something right here.
  • makes use of is the syntax to import an exterior motion
  • run merely runs a command

I arrange Node.js utilizing the supplied cache parameter. This can cache and restore dependencies, permitting for shorter construct occasions. You will need to observe that it doesn’t cache the whole node_modules folder. Subsequently, I can then use the npm ci command.

With setup finished, we will now carry out a number of checks to make sure that the challenge high quality is OK earlier than truly constructing it. For this instance, we’ll carry out the most typical examine: linting the challenge and operating unit checks.

With node put in, it will get tremendous easy:

Earlier than you possibly can lint the challenge on the CI, it’s good to run the command no less than as soon as in your native machine. It’ll set off lint configuration and add the required information to your challenge.

To check my software, you may need seen that I didn’t use immediately thenpm run take a look at command that’s current within the default configuration. I as a substitute created a script particularly for the CI:

  • I switched the browser to the headless model of Chrome. There isn’t any must open a browser window for a CI, as we’d not be capable of see it anyway.
  • I set the watch attribute to false. If you don’t achieve this, the command won’t ever finish as it might be awaiting adjustments within the code. Your job would all the time fail by way of timeouts.
  • I additionally added the code-coverage attribute to show a code protection report.

Our challenge passes all of the checks. Nice! Now it’s time to construct it.

Earlier than truly doing so, there could be an elective further step. In my instance challenge, I’m consuming the climate API by way of an API key they supplied to me. However when you go into my surroundings.prod.ts file, the place the secret’s imagined to be, that is what you see:

The bottom line is not there. Even when it’s a free API, it’s a unhealthy apply to have secrets and techniques uncovered within the repository, and I wished to respect that precept. However now, how can we construct the challenge?

First, we have to retailer the precise key in a safe location. Go to your repository settings and click on on Secrets and techniques.

Then, you possibly can add a brand new repository secret. Give it an express identify as you will have it later.

Again to the workflow file, we should add a step that can exchange the placeholder worth with the precise one. There are many actions offering this on {the marketplace}. I went for this one.

In my surroundings file, I fastidiously enclosed my worth inside braces to make it simpler for the plugin to search out it. In that case, SECRET_API_KEY is the identify of the token that can get changed and API_KEY is the identifier of the key.

To construct the challenge, I can simply run the next:

I created a selected script for the CI by including the — deploy-url parameter. This can make sense within the subsequent step.

GitHub pages present static internet hosting immediately from GitHub. It’s excellent for private pages, challenge documentation, and even internet hosting a small Angular app.

We have to create a department that can retailer the compiled model of the challenge. This department shall be a direct reflection of what’s deployed on GitHub Pages. You may name it nevertheless you need.

Nevertheless, gh-pages is the usual identify that’s acknowledged by GitHub. After you have created and pushed this department, you possibly can examine that the deployment labored.

In your repository settings, click on on pages. The department gh-pages ought to have been mechanically detected and deployed.

I’m utilizing a customized area identify to host my GitHub pages, I can’t cowl how to take action on this tutorial. The default URL ought to look one thing like this http://<github_username>.github.io/<repository_name>

Your challenge shall be deployed in a subfolder. That’s the reason the deploy-url attribute we set earlier is vital. The construct must serve the belongings from the precise path.

It says your website is printed, however it isn’t over but! Should you created the department from grasp, then you definitely simply have the supply code of an Angular software deployed. It isn’t usable like this. We have to deploy the construct we generated within the earlier steps.

Let’s return to the workflow file and add the ultimate step.

This motion will merely copy the content material of the dist folder to the department we created earlier, mechanically triggering the deployment to GitHub pages. You may see it really works within the logs of the CI.

Congratulations! You now have a easy CI to your Angular challenge in addition to a deployed model to showcase.

Right here is the ultimate workflow file. You may entry the total repository here.

Thanks for studying this text till the tip! I solely lately began to dive into the options of GitHub Actions. I’m amazed by how good and easy it’s.

Thus, I’ll proceed to make use of it, and I encourage you to do the identical.

More Posts