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>