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

Introduction

Deploying an Angular application on GitHub Pages can be a convenient and cost-effective way to showcase your project to the world. In this comprehensive guide, we'll walk through the process step by step, covering all scenarios and providing full code examples to ensure a smooth deployment experience.

Setting Up Your Angular Project

Before we dive into deployment, let's ensure your Angular project is set up correctly. Assuming you already have Node.js and Angular CLI installed, let's create a new Angular project:

ng new my-angular-project
cd my-angular-project

Building Your Angular Project

Once your project is set up, it's time to build it for production. Run the following command in your terminal:

ng build --prod --base-href="https://yourusername.github.io/repositoryname/"

Replace yourusername with your GitHub username and repositoryname with the name of your GitHub repository where you want to deploy your Angular app.

Creating a GitHub Repository

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

1. Log in to your GitHub account.

2. Click on the "+" sign in the upper right corner and select "New repository."

3. Enter a name for your repository, choose whether it's public or private, and click "Create repository."

Pushing Your Angular Project to GitHub

Now, let's push your local Angular project to the GitHub repository you just created:

git remote add origin https://github.com/yourusername/repositoryname.git
git branch -M main
git push -u origin main

Replace yourusername with your GitHub username and repositoryname with the name of your GitHub repository.

Enabling GitHub Pages

Once your project is on GitHub, enabling GitHub Pages is straightforward:

1. Go to your repository on GitHub.

2. Click on "Settings" in the top navigation bar.

3. Scroll down to the "GitHub Pages" section.

4. Under "Source," select "main" branch and then the "/docs" folder.

GitHub Pages will now build and deploy your Angular app from the /docs folder.

Accessing Your Deployed Angular App

After a few moments, your Angular app will be deployed and accessible via a URL like https://yourusername.github.io/repositoryname/. You can share this link with anyone to showcase your project.

FAQ Section

Q: Can I use a custom domain with GitHub Pages?
A: Yes, you can set up a custom domain for your GitHub Pages site. Follow GitHub's documentation on setting up a custom domain for detailed instructions.

Q: How can I update my deployed Angular app?
A: Simply make changes to your Angular project, rebuild it using ng build --prod, and push the changes to your GitHub repository. GitHub Pages will automatically update your deployed app.

Q: Are there any limitations to using GitHub Pages for hosting an Angular app?
A: While GitHub Pages is a convenient option for hosting static sites, it may not be suitable for complex applications that require server-side processing or databases.

Conclusion

Deploying your Angular app on GitHub Pages is a straightforward process that provides a free and reliable hosting solution. By following the steps outlined in this guide, you can quickly share your Angular projects with the world. Happy coding!