Deploy Angular App on GitHub Pages: A Step-by-Step Guide

Introduction

Are you looking to showcase your Angular application to the world? GitHub Pages offers a convenient way to host and share your projects, including Angular apps. In this comprehensive guide, we'll walk through the process of deploying an Angular app on GitHub Pages, covering all scenarios with full code examples. By following these steps, you'll be able to make your Angular app accessible to a wider audience in no time.

Setting Up Your Angular Project

Before we dive into deployment, ensure you have an Angular project ready to go. If you haven't created one yet, you can initialize a new Angular project using Angular CLI with the following command:

ng new my-angular-app

Replace my-angular-app with your preferred project name.

Building Your Angular App

Once your Angular project is set up, navigate into the project directory and build your app for production using the Angular CLI:

cd my-angular-app
ng build --prod --base-href=/my-angular-app/

This command will create a dist folder in your project directory containing the compiled production-ready files.

Creating a GitHub Repository

Next, you'll need to create a new GitHub repository to host your Angular app. Follow these steps:

1. Log in to your GitHub account.
2. Click on the "+" icon in the top right corner and select "New repository."
3. Choose a repository name and provide a brief description.
4. Optionally, initialize the repository with a README file.
5. Click on "Create repository."

Pushing Your Angular App to GitHub

After creating the repository, you need to push your Angular project files to GitHub. Follow these steps:

1. Initialize a Git repository in your Angular project folder:

git init

1. Add the GitHub repository as a remote:

git remote add origin https://github.com/your-username/your-repository.git

Replace your-username with your GitHub username and your-repository with the name of your GitHub repository.

1. Add all files to the Git staging area and commit your changes:

git add .
git commit -m "Initial commit"

1. Push your code to the GitHub repository:

git push -u origin master

Configuring GitHub Pages

Now that your Angular app is on GitHub, it's time to configure GitHub Pages to serve your app. Follow these steps:

1. Navigate to your GitHub repository's settings page.
2. Scroll down to the "GitHub Pages" section.
3. Under "Source," select "master branch" as the branch to use for GitHub Pages.
4. Optionally, you can choose a custom domain if you have one.
5. Click on "Save."

GitHub Pages will now publish your Angular app from the dist folder whenever you push changes to the master branch.

Accessing Your Deployed Angular App

Once GitHub Pages has finished deploying your Angular app, you can access it using the following URL pattern:

https://your-username.github.io/your-repository/

Replace your-username with your GitHub username and your-repository with the name of your GitHub repository.

FAQs

Can I deploy multiple Angular apps on GitHub Pages?

Yes, you can deploy multiple Angular apps on GitHub Pages by creating separate repositories for each app and following the same deployment process outlined in this guide.

How can I set up a custom domain for my GitHub Pages site?

To set up a custom domain for your GitHub Pages site, you'll need to configure your domain's DNS settings to point to GitHub's servers. Then, you can add your custom domain in your GitHub repository's settings.

Is GitHub Pages free to use?

Yes, GitHub Pages is free to use for public repositories. However, if you need to host a private repository or require additional features, you may need to upgrade to a paid plan.

Can I use a different hosting provider for my Angular app?

Yes, you can use a different hosting provider for your Angular app if GitHub Pages doesn't meet your requirements. Popular alternatives include Netlify, Firebase Hosting, and AWS S3.

Conclusion

Deploying an Angular app on GitHub Pages is a straightforward process that allows you to share your projects with the world. By following the steps outlined in this guide, you can showcase your Angular skills and make your app accessible to a wider audience. Happy coding!