How to Deploy an Angular App to GitHub Pages

Posted on by Panther

In this tutorial, we will learn how to deploy an Angular application to GitHub Pages. GitHub Pages is a static site hosting service provided by GitHub which allows you to host your website directly from your GitHub repository. Deploying your Angular app to GitHub Pages is a convenient way to make your application accessible to the public.

By the end of this tutorial, you will have a fully deployed Angular app on GitHub Pages that you can share with others.

Prerequisites

Before we begin, make sure you have the following prerequisites:

  1. Node.js and npm installed on your machine. You can download and install them from the official Node.js website.
  2. Angular CLI installed globally. You can install it by running the following command in your terminal:
    npm install -g @angular/cli

Step 1: Create a New Angular App

First, we need to create a new Angular app. Open your terminal and run the following command to create a new Angular app:

ng new my-angular-app

This command will create a new directory called my-angular-app with the basic structure of an Angular app.

Navigate to the app’s directory by running:

cd my-angular-app

Step 2: Build the Angular App

Next, we need to build our Angular app for production. GitHub Pages only supports static sites, so we need to ensure that our app is bundled and optimized for deployment.

To build the app, run the following command:

ng build --prod

This command will compile and bundle your Angular application into the dist directory.

Step 3: Create a GitHub Repository

In order to deploy the app to GitHub Pages, we need to create a new repository on GitHub.

  1. Go to GitHub and sign in to your account (or create a new account if you don’t have one).
  2. Click on the New repository button to create a new repository.
  3. Choose a name for your repository (e.g., my-angular-app) and optionally provide a description.
  4. Make sure to keep the repository public since GitHub Pages only works with public repositories.
  5. Click the Create repository button to create the repository.

Step 4: Connect the Local App to the GitHub Repository

To connect the local app to the GitHub repository, we need to add the remote repository URL to the app’s configuration.

  1. Open the .git/config file in your app’s root directory.
  2. Add the following lines to the file, replacing username with your GitHub username and repository-name with the name of your GitHub repository:
[remote "origin"]
    url = https://github.com/username/repository-name.git
    fetch = +refs/heads/*:refs/remotes/origin/*

Save the file and close it.

Step 5: Deploy the App to GitHub Pages

We are now ready to deploy our Angular app to GitHub Pages.

  1. Open your terminal and navigate to your app’s root directory.
  2. Run the following command to deploy the app:
    ngh --dir=dist/my-angular-app

This command will build your app and deploy the contents of the dist/my-angular-app directory to the gh-pages branch of your GitHub repository.

Step 6: Configure GitHub Pages

In order to access your deployed app on GitHub Pages, we need to configure the settings of your repository.

  1. Go to your GitHub repository page.
  2. Click on the Settings tab.
  3. Scroll down to the GitHub Pages section.
  4. Under the Source dropdown, select the gh-pages branch.
  5. Click on the Save button.

After saving, GitHub will provide you with the URL where your app is deployed. It may take a few minutes for the changes to propagate.

Step 7: Access Your Deployed App

Congratulations! You have successfully deployed your Angular app to GitHub Pages. To access your deployed app, simply navigate to the URL provided by GitHub in the previous step.

Note that it may take a few minutes for the changes to propagate, so if you don’t see your app immediately, wait for a while and try again.

Updating and Redeploying Your App

If you make changes to your app and want to update the deployed version on GitHub Pages, follow these steps:

  1. Build your app by running ng build --prod in the app’s root directory.
  2. Deploy the updated version by running ngh --dir=dist/my-angular-app in the app’s root directory.
  3. Wait for the changes to propagate and access your updated app using the same URL provided by GitHub.

Repeat these steps whenever you need to update your deployed app.

Conclusion

In this tutorial, we have learned how to deploy an Angular app to GitHub Pages. We covered the necessary steps to create a GitHub repository, connect it to your local app, and deploy the app using the Angular CLI and the ngh tool. We also learned how to configure GitHub Pages to make our app accessible to the public.

Now you can easily share your Angular app with others by simply deploying it to GitHub Pages. Happy deploying!

Related Post