Using Angular CLI, you can follow the steps below to deploy your Angular web app as a GitHub page.
 |
GitHub page configuration |
Publishing from Docs Folder
1) Build your web app with prod flag and set the output path to docs
ng build --prod --output-path docs --base-href https://USER_NAME.github.io/PROJECT_NAME/
2) Make a copy of the index.html as 404.html by running the following command in your root directory.
cp doc/index.html docs/docs/404.html
3) Commit and push to GitHub repo
git add .
git commit -m ‘GitHub page’
git push
Publishing from gh-pages branch
1) Install using npm or yarn
npm i -g angular-cli-ghpages
yarn global add angular-cli-ghpages
2) Create a dist folder in your root directory by running the following command
mkdir dist
3) Build your web app with prod flag using Angular CLI
ng build --prod --base-href "https://USERNAME.github.io/REPOSITORY/"
3) Run angular-cli-ghpages command to push the build to gh-pages branch
angular-cli-ghpages [OPTIONS]
OR
There are Options flag that you can use to configure your deployment to GitHub Page.
For example, --branch=other-branch flag can set the branch to which the deployment will be.
Angular-cli-ghpages Options
 |
angular-cli-ghpages options |
 |
angular-cli-ghpages options |
 |
angular-cli-ghpages options |
Streamline
Alternatively, you can set up an npm script to streamline the deployment process.
You can add the following line to your package.json. You can also set up using npm hooks.
"github": "ng build --prod --base-href \"https://USERNAME.github.io/REPOSITORY/\" && ngh"
 |
package.json |
Then, you can deploy your page by running only one command. You can also set up npm script using deploy and predeploy flags.
npm run github
 |
GitHub page deployment command |
Note
1) Note that you should use double quotes in your index.html file as mine wasn't working when I had single quotes. It could be a parsing or escape issue.
Comments
Post a Comment