So you have created an Angular application, it runs on your machine, maybe it calls an external API, you pushed it on GitHub… Great, now let the world see it :)
What I want:
- to be sure that my application will successfully build, in an automated way each time I push commits on any branch
- to automatically deploy built files on a gh-pages branch of my repository, each time I push on master branch (or merge a PR in master), so I can see my application online in production mode with GitHub Pages
— This article may not be the best way to do, feel free to improve it through comments ! —
First we want to configure CircleCi so that every time we push on the GitHub repository, the application is linted, built, and deployed (according to the branch that has been pushed).
- Create a .circleci/config.yml at the root of your project
- Create an account on CircleCi and link it to your GitHub account
- click on "Add a project", find your repository in the list, click on "Set up a project" and "Start Building"
Now let's see the config.yml you can start with:
With this, there will be a "build" workflow on every push, it will:
- start from a node 12 docker container (needed for Angular 9)
- checkout the code
- install dependencies with npm(using a cache if it can)
- build your Angular application, production mode if the pushed branch is master, dev mode otherwise (this uses npm scripts we'll see at the end of this article)
- persist the generated files in a dist directory, available for the next workflow
The next workflow "deploy" will occur only after the "build" has passed, and only if the pushed branch is master. It will:
- start from a node docker container with git > 1.9
- add an ssh key fingerprint : the fingerprint of the private key you must add to CircleCi account (let's see this on the next section)
- get the persisted built files in dist directory
- install gh-pages
- push all files in dist to gh-pages branch of your repository (branch needed by GitHub Pages)
We need to create a private and a public ssh key so that CircleCi is allowed to push on our GitHub repository :ssh-keygen -t rsa -b 4096 -C "circleci@example.com"
# Accept the default of no password for the key (This is a special case!)
# Choose a destination such as 'deploy_key_rsa'
This creates a public and a private key:
- go to CircleCi application, in your project settings, in SSH Permissions, click "Add SSH key", set github.com as the host, and paste your private key
- copy paste the new fingerprint in your config.yml
- In your GitHub repository settings, go to Deploy Key, click "add a deploy key", paste your public key and give it write access
- you can delete the generated keys from your computer
Finally, let's see the scripts you'll need to have in your `package.json`:
- we set the output-path so that built files go to dist directory (which will be persisted)
- when master is pushed and so deploy job is triggered, we want to set the base href to the url where our site will be hosted by GitHub Pages. This will be `http://https://[username].github.io/[repo]/` if you didn't set a custom domain name in your GitHub Pages settings
