Deploy An Angular Application To GitHub Pages

How to Deploy Your Angular Application to GitHub Pages with angular-cli-ghpages

Photo by Anuja Tilj on Unsplash

GitHub Pages

GitHub Pages is a free service from GitHub, allowing users to host websites directly from their public GitHub repositories. It also provides a free web address that ends with “.github.io”. If you already have your own domain name, you can use it instead, following the instructions in this link.

If you want your website to appear at the root of your GitHub Pages subdomain, name your repository “<username>.github.io”. Otherwise, it will be published to “<username>.github.io/<repository-name>”.

Limitations

The static content size is limited to 1 GB. There’s a monthly bandwidth limit of 100 GB. The deployment process has a timeout limit of 10 minutes. Additionally, GitHub Pages have a soft limit of 10 builds per hour, so you should avoid triggering deployments too frequently.

Steps

Build:
Replace “https://<username>.github.io/<repository-name>/” with yours and simply run:

ng build --prod --base-href "https://<username>.github.io/<repository-name>/"

You can also add this command as an npm script. In your project’s “package.json” file, add the “github-build” command to the “scripts” section as follows:

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "lint": "ng lint",
    "format": "prettier --write .",
    "github-build": "ng build --configuration production --base-href 'https://<username>.github.io/<repository-name>/'"
  },

You can now run it like this:

npm run github-build

Build output location will be the path defined in “projects > architect > build > options > outputPath” in your “angular.json” file.

Deploy:
Make sure you have set your remote origin correctly (in https://<username>:<token>@github.com/<username>/<repository-name>.git format). I created my token by navigating to “GitHub Settings > Developer Settings > Personal access tokens > Tokens (classic)” and selecting “Generate new token (classic)”. I selected the “repo” scope for access.

git remote set-url origin https://<username>:<token>@github.com/<username>/<repository-name>.git

If not configured correctly, you may get such an error during deployment with angular-cli-ghpages:

Unable to access repo — permission to repo denied to user

Run the following command to deploy your Angular app to GitHub Pages. Be careful: the “dir” parameter should point to the location of “index.html” file in the build output path. In Angular 18, the location is “dist/<app-name>/browser”.

npx angular-cli-ghpages --dir=dist/<repository-name> --no-silent

The “ — no-silent” option provides more detailed output during the command execution. You can add this command (naming it “github-deploy”) below “github-build” you recently added to the “scripts” section in “package.json”.

"github-build": "ng build --configuration production --base-href 'https://<username>.github.io/<repository-name>/'",
"github-deploy": "npx angular-cli-ghpages --dir=dist/<repository-name>/browser --no-silent"

You can now run the following as well:

npm run github-deploy

angular-cli-ghpages — successful deployment

It may take some time for your site to be ready, so you may need to refresh a few times.

With tools such as GitHub Actions or Travis CI, you can also configure your CI/CD pipeline to build and deploy your Angular app whenever changes are pushed to the repository.

You will start to see your site url under your project’s GitHub page by navigating to Settings > Code and automation > Pages.

Before deployment:

A Project’s “GitHub Pages” Settings With No Configuration

After deployment:

A Project’s “GitHub Pages” Settings After Deployment

You will also notice a new branch named “gh-pages” is created in your repository:

gh-pages branch

Voilà!

Happy Coding!

Giphy

References:
https://chintanonweb.medium.com/code-to-cloud-how-to-deploy-your-angular-app-for-free-on-github-pages-e8b75151b1e5
https://www.angularminds.com/blog/host-an-angular-app-in-github-pages
https://www.syncfusion.com/blogs/post/host-angular-app-in-github-pages
https://www.linkedin.com/pulse/deploy-angular-app-github-pages-cli-dilakshan-antony-thevathas-octlc/
https://www.linkedin.com/pulse/how-deploy-angular-18-app-github-pages-mohamed-el-fadili-ahbrc/
https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages#usage-limits