Chetan
Hosting your Angular project on GitHub Pages is a straightforward and efficient way to showcase your work, share it with others, or even run demos. GitHub Pages is a free service provided by GitHub to host static websites directly from a repository. This guide will walk you through the steps to deploy your Angular application to GitHub Pages.
Prerequisites
Before we start, make sure you have the following:
- Node.js and npm installed on your system.
- Angular CLI installed globally (npm install -g @angular/cli).
- A GitHub account.
- A GitHub repository created for your project.
Step 1: Create or Prepare Your Angular Project
If you already have an Angular project, you can skip this step. Otherwise, create a new Angular project using the Angular CLI:
ng new my-angular-app
cd my-angular-app
This command creates a new Angular project named my-angular-app. Navigate to the project directory after it's created.
Step 2: Install Angular CLI GitHub Pages Deployment Tool
Angular has a handy deployment tool that allows us to deploy the application to GitHub Pages easily. Install the angular-cli-ghpages package globally using npm:
npm install -g angular-cli-ghpages
Step 3: Build the Project
To deploy the Angular project to GitHub Pages, you first need to create a production build of the project. This step compiles the application and prepares it for deployment.
Run the following command to build your project:
ng build --prod --base-href "https://<your-username>.github.io/<your-repo-name>/"
Replace with your GitHub username and with the name of your GitHub repository. For example:
ng build --prod --base-href "https://johnDoe.github.io/my-angular-app/"
This command creates a production build in the dist/my-angular-app folder. The --base-href flag sets the base URL for the application, which is necessary for GitHub Pages to serve your app correctly.
Step 4: Deploy to GitHub Pages
Now that your application is built, it's time to deploy it to GitHub Pages using the angular-cli-ghpages tool. Run the following command:
ng build --base-href "https://johnDoe.github.io/my-angular-app/"
This command deploys the contents of the dist/my-angular-app directory to the gh-pages branch of your GitHub repository, which GitHub Pages uses to serve your site.
If you're doing this for the first time, the gh-pages branch will be created automatically.
Step 5: Verify the Deployment
Once the deployment is complete, you can visit your GitHub Pages URL to see your Angular application live. The URL will be:
https://<your-username>.github.io/<your-repo-name>/
Using the previous example, it would be:
https://johnDoe.github.io/my-angular-app/
