Skip to main content

Deploying on Various Platforms: Netlify, Firebase, GitHub Pages

In the world of Angular, deployment refers to the process of hosting your Angular application on a web server so it can be accessed by users worldwide. In this tutorial, we will focus on deploying your Angular application on three popular platforms: Netlify, Firebase, and GitHub Pages.

Deployment on Netlify​

Netlify is a cloud computing company that offers hosting and serverless backend services for web applications and static websites.

Step 1: Build your Angular Application​

To prepare your application for deployment, you need to build it first. Use the following command in your terminal:

ng build --prod

This command will create a dist/ folder containing your built application.

Step 2: Create a Netlify Account and Site​

Go to Netlify and sign up for a new account if you don't have one already. After logging in, click on New site from Git to create a new site.

Step 3: Connect to your repository​

Connect to the Git provider where your project is located and choose your repository.

Step 4: Build options and Deploy​

In the build options settings, set the Build command to ng build --prod and the Publish directory to dist/your-project-name.

Click on Deploy Site. Netlify will now build and deploy your site.

Deployment on Firebase​

Firebase is a platform developed by Google for creating mobile and web applications.

Step 1: Install Firebase Tools​

First, you need to install Firebase Tools, which will allow you to deploy your application. Use the following command:

npm install -g firebase-tools

Step 2: Build your Angular Application​

Just like with Netlify, you need to build your application:

ng build --prod

Step 3: Initialize Firebase​

In your project root, log in to Firebase using your Google account:

firebase login

Initialize Firebase in your app:

firebase init

During initialization, choose Hosting. When asked for the public directory, enter dist/your-project-name.

Step 4: Deploy to Firebase​

Now you can deploy your application:

firebase deploy

Your application is now hosted on Firebase.

Deployment on GitHub Pages​

GitHub Pages is a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub.

Step 1: Install Angular GitHub Pages​

You will need to install a package called angular-cli-ghpages. Use the following command:

npm install -g angular-cli-ghpages

Step 2: Build your Angular Application​

You need to build your application with the base-href flag:

ng build --prod --base-href "https://[username].github.io/[repo]/"

Replace [username] with your GitHub username and [repo] with your repository name.

Step 3: Deploy to GitHub Pages​

Now you can deploy your application:

ngh --dir dist/your-project-name

Your application is now available on GitHub Pages.

Conclusion​

In this tutorial, we have covered how to deploy an Angular application on Netlify, Firebase, and GitHub Pages. The process might seem complex at first, but once you understand the steps, it becomes a routine part of your development process. Happy deploying!