Creating a new Angular Site on Google Firebase

Angular is a framework for creating front-ends for websites. Technically, the site is static from a web hosting perspective, meaning that in and of itself it does not have a database, but rather only serves static files from the web server. From a user perspective, it can appear to be very dynamic, with the ability to log in, create and work with data, and other normal web application behaviors.

The dynamic portions of an Angular app require integration with back-end services. Angular apps simply call out to these external services, and are not typically a part of providing the services.

The creation of these services is both out of scope for angular and out of scope for this tutorial. Instead, we’ll create a very simple static website with Angular and deploy it to Firebase.

Firebase is a set of services provided by Google. One service is hosting, which primarily hosts static websites such as those created with Angular. Google offers a free tier that allows you to get a site up and running quickly and easily.

Prerequisites

You have the following installed:

• Node 10+ (node -v)
• NPM 6+ (npm -v)
• Angular CLI 8+ (ng --version)
  howto

Create Angular app

In the folder where you want to create the app, run

ng new <your-app-name>

It will ask you questions. If you are not sure what answer to choose, you can use the defaults. Routing allows you to have URLs that point to pages, which technically simulates multiple pages even though it is still a “single page” application. This is useful if you have menu navigation. The CSS options allows you to use CSS templates to add functionality.

Launch your app:

npm start

Open in your browser: http://localhost:4200/

You can now edit the src/app/app.component.html file to make it your own. When it looks good, build it for production.

ng build --prod

This creates static output in a dist folder in your project. This is what we’ll deploy to Firebase.

Deploy to Firebase

Use your Google account to log into firebase.google.com. Then click on “Go to console” in the top right. Create a new project and give it a name. Now you can come back to the console and drill into your project at any time.

Intall Firebase on the computer with your Angular project with the following command. This will update it if you already have it installed. Prefix with sudo if it fails with permission errors without it.

npm i -g firebase-tools

You will primarily use the command firebase to interact with it. You can use these commands to log into and out of a Google account:

firebase login
firebase logout

While in your project’s root directory, run

firebase init

This will fire off options to choose from. Begin by selecting Hosting. Select existing project if you created via the web console, or new otherwise. For your public directory, look in your dist folder. if it created another folder under it for your project, then you’ll include that. Let’s say your project is called helloworld, your public folder would be:

dist/helloworld

You can choose single page app since that is what Angular created.

Once it is done setting up the project, your process for deploying to Firebase will be to do a prod build to repopulate the dist folder, then to run a Firebase deploy command:

ng build --prod
firebase deploy