Subscribe
Home Craft Deploy an Angular App to GitHub Pages With Angular CLI

Deploy an Angular App to GitHub Pages With Angular CLI

by Staff
0 comment

Deploying Angular applications to GitHub pages is a great way to host them for free. Angular is a popular JavaScript framework for building single-page applications.


Angular has a comprehensive command-line interface that supports quick build and set-up of JavaScript applications. The Angular CLI has several commands to create, build, serve, and generate application components.

You can also use the CLI to deploy Angular applications to various targets, including GitHub pages.


What You Need

To make the most of this guide, you need to have the following skills and tools:

  • You should be familiar with the basics of Angular, such as the concept of apps, settings, URLs, etc.
  • You are familiar with the basics of GitHub and Git, like creating a GitHub account, creating a git repository (repo), and GitHub pages (GH-pages).
  • You have an Angular application ready to deploy.
  • Your base URL is on the correct path. Deployments to GH-pages fail because of setting the wrong base-href (base-url).
  • A GitHub account.
  • A GitHub repository (repo) with application code.

Now that you have all these in place let’s start the deployment process.

Deployment Process

To begin, you should have created a GitHub repository for your project and pushed the code to the main/master branch.

Next, create a GH-pages branch.

1. Create a GH-pages Branch

This is a hack that will help you get the GH-pages link to help to set the base-href.

First, create GH-pages in your local repository with the following command:

git branch gh-pages

Next, check out from the main branch to GH-pages to transfer all code.

git checkout gh-pages

Then, push GH-pages to GitHub to create a remote GH-pages branch.

git push origin gh-pages

On the toolbar under the repo name, click Settings > Pages.

Under Build and deployment, select Deploy from a branch. Next, select gh-pages as the name of the branch, then click Save. This will create a GH-pages link at the top right under the GH-pages label.

Next, copy this link to the published site as illustrated below. You will use the link to set up the base-ref during deployment.

3. Install Angular-CLI-GHpages

The angular-cli-ghpages package is a tool that the Angular CLI uses for deployment purposes.

Navigate back to your local project repository. Then install and run angular-cli-ghpages with this command:

ng add angular-cli-ghpages

4. Deploy the App

To build the app in production, you must connect it to a remote server on GitHub.

Configure your app to a remote server by running the following command:

ng deploy --base-href=https:

Remember to replace the above link with the live link from GH pages

A successful build will look like the illustration below:

Next, navigate to GitHub and click on the GH-pages link to see your deployed project.

Congratulations, you have deployed your Angular App!

If the link displays only the README file, please go back to GitHub GH-pages settings. Ensure the selected branch is gh-pages and not the main or master branch. Then give it five minutes and reload. Sometimes GitHub takes time to reflect changes.

To learn more about how you can use Angular CLI in deployment, visit the Angular documentation.

How to Deploy an Angular App to GitHub Pages

There are several ways to deploy Angular apps to GH-pages, but this method is the easiest. You set up your GH-pages repo link and use it with the Angular-CLI to deploy your app to GitHub pages.

There’s a lot more you can do with Angular and Angular CLI. Feel free to explore. Use the CLI to deploy apps to GH-pages for free visibility and hosting for your applications.



Read the full article here

SaleBestseller No. 1
Apple AirPods Max Wireless Over-Ear Headphones. Active Noise Cancelling, Transparency Mode, Spatial Audio, Digital Crown for Volume Control. Bluetooth Headphones for iPhone - Green
Apple AirPods Max Wireless Over-Ear Headphones. Active Noise Cancelling, Transparency Mode, Spatial Audio, Digital Crown for Volume Control. Bluetooth Headphones for iPhone - Green
 Apple-designed dynamic driver provides high-fidelity audio; Active Noise Cancellation blocks outside noise, so you can immerse yourself in music
$479.00
SaleBestseller No. 3
Apple iPad Air 2, 64 GB, Space Gray (Renewed)
Apple iPad Air 2, 64 GB, Space Gray (Renewed)
Apple iOS 8; 9.7-Inch Retina Display; 2048x1536 Resolution; A8X Chip with 64-bit Architecture; M8 Motion Coprocessor
$141.99
Bestseller No. 4
2021 Apple 10.2-inch iPad (Wi-Fi, 64GB) - Silver
2021 Apple 10.2-inch iPad (Wi-Fi, 64GB) - Silver
Gorgeous 10.2-inch Retina display with True Tone; A13 Bionic chip with Neural Engine; 8MP Wide back camera, 12MP Ultra Wide front camera with Center Stage
$331.99
Bestseller No. 5
2022 Apple TV 4K Wi‑Fi with 64GB Storage (3rd Generation)
2022 Apple TV 4K Wi‑Fi with 64GB Storage (3rd Generation)
4K Dolby Vision and HDR10+ for vivid picture quality; Dolby Atmos for three-dimensional, theater-like sound
$123.49
Bestseller No. 7
Apple AirTag 4 Pack
Apple AirTag 4 Pack
Keep track of and find your items alongside friends and devices in the Find My app; Simple one-tap setup instantly connects AirTag with your iPhone or iPad
$94.98
Bestseller No. 8
Apple MacBook Air with Intel Core i5, 1.6GHz, (13-inch, 4GB,128GB SSD) - Silver (Renewed)
Apple MacBook Air with Intel Core i5, 1.6GHz, (13-inch, 4GB,128GB SSD) - Silver (Renewed)
1.6 GHz dual-core Intel Core i5 (Turbo Boost up to 2.7 GHz) with 3 MB shared L3 cache; 13.3-Inch (diagonal) LED-backlit Glossy Widescreen Display, 1440 x 900 resolution
$299.99
Bestseller No. 9
Apple Of My Eye
Apple Of My Eye
Amazon Prime Video (Video on Demand); Amy Smart, Burt Reynolds, Liam McIntyre (Actors); Castille Landon (Director) - Castille Landon (Writer) - Dori A. Rath (Producer)
$3.99
SaleBestseller No. 10
Apple 35W Dual USB-C Port Compact Power Adapter ​​​​​​​
Apple 35W Dual USB-C Port Compact Power Adapter ​​​​​​​
The compact size and folding prongs make it easy to pack and store.; Charging cable sold separately.
$52.00

You may also like

Leave a Comment

Iman Hearts is one of the biggest lifestyle news and articles portals, we provide the latest news and articles about family, lifestyle, entertainment, and many more, follow us to get the latest news about what matters to you.

 

© 2022 Iman Hearts. All rights reserved. Sitemap