DEV Community

Michael Simmonds
Michael Simmonds

Posted on

Setting up an Angular project with Angular cli, GitHub cli and deployment to GH Pages

This guide uses Angular cli, git cli, GitHub Pages and a package called angular-cli-ghpages

Prerequisites:

  • Angular cli (this example uses Angular 13)

  • Github cli ( this example uses v2.4)

In your workspace spin up a new angular app with:

ng new <app-name>

This will prompt you to create a new project, set up a local git repo and make an initial commit for you.

To create a new repo on GitHub with the command:
gh repo create

Select 'Push an existing local repository to Github` and follow the interactive prompts.
The repo will need to be public unless you have GitHub Pro.
When offered, set up a remote,
This will create a github repo for your project and set up the remotes so you can push to it easily.

Now we add the angular-cli-ghpages package. Note the use of ng add, not npm i.
ng add angular-cli-ghpages

Add a script to package.json to simplify deploy.

  • Open package.json.
  • In the scripts object add a new line: "deploy": "ng deploy --base-href=/<your-repo-name>/"

Commit your changes to the main branch
git add .
git commit -m "added angular-cli-ghpages"
git push origin main

Create a new branch called gh-pages (this can be customised, but you will need to select a different branch in the github settings page mentioned below)
git branch gh-pages
git checkout gh-pages
git push origin gh-pages

Set up GitHub Pages in the browser (just need to check this - it should be setup in the correct way by default)

  • Find the repo you just created on GitHub.com
  • Setting > Pages
  • In Source select deploy from branch (automatic)
  • Under branch select gh-pages and /root (automatic)

Finally - its time to deploy the base application
git checkout main
npm run deploy

NB: The deploy script will build your application and overwrite the contents of the gh-pages branch with the compiled build. There is rarely any need to have the gh-pages branch checked out locally, so I suggest you delete it.

If all is well - your application should be deployed to http://<gh-username>.github.io/<repo-name>

Top comments (0)