Narain Sagar
Published in

Narain Sagar

Quickly host your Angular2+ app on GitHub Pages (github.io) using Angular CLI

Since Angular uses TypeScript code, It has lots of node dependencies and a ‘production mode’, deploying on GitHub Pages turned out not to be so straight-forward. But after a bit of surfing over web, reading some blog posts, and going through some Github repos and comments, I found an easy and quicker way to deploy the apps to GitHub Pages

Using Angular CLI, a command-line interface for building Angular applications, surely made things easier! Here are the steps I took:

Create a ‘deploy.sh’ file at the root of the project repo.

#!/bin/bashPATH=$PATH:$(npm bin)set -x
# Production build for gh-pages
./node_modules/.bin/ng build — base-href “https://narainsagar.github.io/ng4-demo/"
# Deploy: Publish the /dist folder using angular-cli-ghpages
./node_modules/.bin/angular-cli-ghpages

> make sure to update your github.io link for your repository: https://narainsagar.github.io/ng4-demo/

once done, then next thing is to — modify your package.json — a little bit, to add the script command which executes the bash file to run and it will easily deploy your code to the github-pages.

Add this command into your package.json under “scripts”:

“deploy”: “sh deploy.sh”

and please don’t forget to add npm devDependency named angular-cli-ghpages

and Finally, now you can run the command npm run deploy` or npx deploy` or even yarn deploy` — if you use yarn!!

For reference, you may checkout this Pull request for the demo: https://github.com/narainsagar/ng4-demo/pull/1

For more, feel free to check below article;

http://aniri.ro/geek/development/how-to-host-an-angular2-app-on-github-pages-using-angular-cli/

Cheers,

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Narain Sagar

Narain Sagar

Full Stack JavaScript Developer, Currently focusing on Node.js / Angular2 / Koa2 / Loopback