Deploying Angular Applications to GitHub Pages

Welcome to the comprehensive guide on deploying Angular applications to GitHub Pages! 🚀

By the end of this tutorial, you'll learn how to deploy your Angular projects seamlessly to GitHub Pages, making them accessible to the world. Let's dive in! 💻

Prerequisites

Before we start, make sure you have the following prerequisites in place:

Node.js and npm installed (Install Node.js)
Angular CLI (Install Angular CLI)
A GitHub account (Create a GitHub account)

Project Setup

First, let's create a new Angular project:

bash

ng new my-angular-app

Navigate into your project directory:

bash

cd my-angular-app

Preparing Your Project for Deployment

To deploy your Angular app to GitHub Pages, we need to do some configuration.

Run ng build --prod to build your project in production mode. This command will generate an optimized version of your application in the dist/my-angular-app directory.

bash

ng build --prod

Now, you need to create a new GitHub repository for your project. You can either create a new repository manually or initialize a new one within your local project.

bash

cd dist/my-angular-app
git init
git add .
git commit -m "Initial commit"

Connect your local repository to a new or existing GitHub repository.

bash

git remote add origin https://github.com/yourusername/my-angular-app.git
git push -u origin master

Configuring GitHub Pages

Go to your GitHub repository and navigate to the Settings tab.
On the left sidebar, click on Pages. If you don't see the Pages option, follow these steps to enable GitHub Pages.
Under Source, select gh-pages branch or master branch deployment, depending on your preference. The gh-pages branch will be created automatically when you push your built project to the repository.
Click Save and your GitHub Pages URL will be displayed.

Testing Your Deployment

Now, navigate to the URL provided in the GitHub Pages settings and check if your Angular application is deployed successfully.

📝 Note: If you face issues with the initial deployment, delete the .git folder from your project directory and push it again to GitHub.

Deploying to Custom Domain (Optional)

To deploy your Angular application to a custom domain, you'll need to follow the steps outlined in these instructions.

Quiz

Happy coding! 🎉