Angular Deployment with GitHub Actions

Finally… I’ve started to use GitHub Actions with Angular, I’ve been meaning to look into this for a while now and I’ve done it.

This post will only cover the yaml file required to create your CI/CD workflow, my example uses a Node.js environmentt to builds the project and transfers the dist folder content to an Azure App Service using FTP.

This does not necessarily have to be an Angular project, as you can build a React or Vue project and FTP it’s contents the same way, but as Angular is my preferred framework, it will be so.

main.yml

Angular deployment workflow

File Keywords

  • name the name of your workflow, displayed under the Actions tab of your repo.
  • on this is the event trigger, this case, any commits push ed to the main branch will trigger the workflow.
  • jobs there is only one job web-deploy , you can have many, each run in parallel unless a dependency have been defined.
  • name the name of your job.
  • runs-on the container environment used to process your workflow.
  • env a set of enviroment variables specific to this file. These are used like this ${{ env.VARIABLE_NAME }} .
  • steps the sequence of tasks processed. These can run commands, run setup tasks, or run an action in your repository, a public repository, or an action published in a Docker registry.
  • name the name of each step.
  • uses an action to use for the step in your workflow.
  • with key/value parameters defined by the action.
  • secrets these can be set under Settings > Secrets in repo. Then applied like this ${{ secret.MY_SECRET }} .

Workflow Steps

  1. actions/checkout@2.3.2 this checks-out the project so it can be used by the workflow.
  2. actions/setup-node@v2 this sets up the node environment in the workflow. with: node-version 14 LTS.
  3. run: npm install installs node modules.
  4. run: npm run build runs ng build --prod to compile the Angular app which generates the dist folder.
  5. SamKirkland/FTP-Deploy-Action@4.0.0 this is the FTP action used to transfer the compiled file to the Azure App Service. This action accepts several parameters. I have used local-dir which is the dist folder, server-dir the server folder where your project gets loaded and dangerous-clean-slate which I used to remove all files from the server directory before tranferring the files.

There it is, easy as that. The example above is closely mirrored to Sam Kirkland’s action example with my changes added to make it specific to Angular and Azure.
If you use this action, give it a star when you get a minute 👍

Thanks for reading and happy coding!

Lead Developer. Angular. Node. GraphQL. JavaScript enthusiast.