Hosting Your Angular Website

In this tutorial, I will show you how to host your Angular website for free using Firebase

By: King Wai Mark

In this tutorial, I will show you how to host your Angular website for free using Firebase.

Firebase is a platform that is backed up by Google which provides backend services to help us build and launch web and mobile applications. Some of the services it provides are Database management, Authentication, and Hosting.

To begin, you need to have a Google Account ready. If you do not have one, go to Google.com and sign up.

https://www.google.com/

Once you have your Google account, go to Firebase.google.com and sign in if you have not already.

https://firebase.google.com/

Then go to the Console, click on the Go to console button.

Create a project for your Angular website. Click on “Create a project.”

Enter your project name.

Keep in mind, you should use a unique name otherwise the free domains that you get from Firebase will end up with random characters at the end of it.

Accept the agreement and Continue.

Enable Google Analytics and continue. Google Analytics will give us useful statistics for our app.

Continue accepting the agreements and Create the project.

Creating the Web App

To host our website, create a web app. Click on the web icon.

Give the app a name and enable Firebase Hosting for the app.

Since we are using Angular, we can skip the Add Firebase SDK step.

For step 3, Click on the copy to clipboard icon, open the command prompt or terminal, paste the code in the terminal window and execute the command.

npm install -g firebase-tools

Once the Firebase tools are installed on your computer, click Next and then continue to the console.

Setting Up Your Angular Project

To host the Angular website, we have to build and compile the project first. Open your Angular project and the terminal window on Visual Studio Code - Press the [ CTRL + ~ ] keys.

Execute the ng build command with the --prod flag to indicate that we want to build using the production environment.

ng build --prod

Once the command finish, it will generate a dist directory with our compiled project files. Go into it by right clicking on the dist directory and select the “Reveal in File Explorer” option.

Deploying Your Project to Firebase

Next, open the command prompt or terminal that points to the path to the dist directory. On Windows, click on the address bar and run the cmd command.

We need to run 3 Firebase CLI commands to host our website.

First log in, by executing firebase login and allow Firebase to collect usage data.

firebase login

It will open up a browser. Sign into the Google account with the Firebase project and allow Firebase CLI to modify your data.

Go back to the command prompt and initialize Firebase. Execute firebase init.

firebase init

1) Type Y if you are ready.

2) Keep pressing the down arrow key until you reach Hosting and press the space bar to select it. When Hosting is selected, press the enter key on your keyboard.

3) Since we have already created a project, select the “Use an existing project” option and press enter. Select the project and press enter again.

4) For the public directory, we have to put the exact name of the folder inside the dist folder earlier. If we go back to the dist folder, there is a folder inside. Use that name.

5) Type Y to configure as a single-page app.

6) Type N for GitHub. We can always do this manually later on.

7) Type N to overwrite our index.html file.

Now hosting is set up.

The last thing we need to do is to deploy it to Firebase. Execute firebase deploy with the –only hosting flag.

firebase deploy --only hosting

If you see Deploy complete!, it means the project is now live and everyone can access it.

Go back to the Firebase console. Under the Build tab, select Hosting.

In here, we can see the 2 domains that we were provided. If we click on either one, we will go to our website.

https://freeangularhosting.web.app

https://freeangularhosting.firebaseapp.com

Policy

Follow @codeible

Video Tutorials

Policy

Video Tutorials

Policy

Video Tutorials

Policy

Video Tutorials

Policy

Sign In