Prerequisites:

  1. Knowledge of Angular CLI
  2. Basic Knowledge of Angular
  3. Github account
  4. Git knowledge
  5. 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

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

Success!!!

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.

Happy coding!

You've successfully subscribed to Decoded For Devs
Welcome back! You've successfully signed in.
Great! You've successfully signed up.
Your link has expired
Success! Your account is fully activated, you now have access to all content.