How to Deploy Angular websites on Github Pages Automatically!
- Knowledge of Angular CLI
- Basic Knowledge of Angular
- Github account
- Git knowledge
- Installed Node, Node Package Manager and Angular CLI
You have finished your Angular website and you need to be able to share the link of your work to a potential employer or a peer for reviewing.
Github pages is a service by Github that allows you to automatically host your website on the world wide web and it is absolutely free and there is no limit to the number of Angular sites you can have on Github pages.
And so our journey begins:
Create a simple Angular Project
Feel free to skip this step if you wish to deploy an already existing app. First let us create a new app using Angular CLI ,the name of the app is angular-deploy, feel free to choose a name of your choice for your application.
$ ng new angular-deploy
Navigate to the application, open it on your terminal and make sure it is running fine on your client by running the command
$ ng serve --open
From the Angular official documentation, the
ng serve command builds the app, starts the development server, watches the source files, and rebuilds the app as you make changes to those files while the
--open flag opens a browser to
http://localhost:4200/. If the application is running fine you should see the following on your client
So this means we have a fine running app, feel free to modify the app as you wish
Commit and push all your changes to a Github repository
Once you are satisfied with your app, commit and push all your changes to your Github repository.
git add . && git commit -m 'app complete' && git push origin master
Angular-CLI -gh-pages installation
Angular CLI gh-pages is a tool that helps deploy Angular web apps to Github pages from the Angular CLI. To Install it run the following command :
$npm i angular-cli-ghpages --save-dev
Building allows us to move from development into web app production mode which allows it to be accessed from remote servers. More elaborately, according to the official angular documentation, "The application builder uses the webpack build tool, with default configuration options specified in the workspace configuration file (
angular.json) or with a named alternative configuration. A "production" configuration is created by default when you use the CLI to create the project, and you can use that configuration by specifying the `--configuration="production" or the
--prod="true" option." The following command will achieve this for us:
$ ng build --prod --base-href "https://YourGithubAccountUserName.github.io/GithubRepoNameForThisProject/"
Deploying to Github Pages
We will now make use of the Angular CLI gh-pages that we already installed. The command below includes 'project-name', this can be found at the bottom of the angular.json file as assigned to "defaultProject", it is the name we gave our app.
npx angular-cli-ghpages --dir=dist/project-name
Viewing Our Deployed Site
Go to the settings tab on the Github repository for the project then scroll down to Github pages for the link , you should see something like this
On clicking the link it should lead to your website
This brings us to the end of our tutorial and a pro-tip I have found on my journey with Angular, it is always better to name your app and repository the same name for easy deployment.