Deploy App page

Deploying App

Overview

In this part, we will:

  • Create a Firebase account
  • Create a new project in Firebase
  • Install Firebase cli tools
  • Link our Place My Order app to the Firebase app
  • Deploy app to Firebase
  • Update npm script to include deploy

Add Production API URL

For our production app, we won’t be running a local server, instead we’ll point to https://www.place-my-order.com/api. All we need to do is add the apiUrl variable to our production environment file. When we do a production build by running ng build, our production file will be used.

✏️ Update src/environments/environment.prod.ts:

export const environment = {
  production: true,
  apiUrl: 'https://www.place-my-order.com/api',
};

Create Firebase account

Go to https://console.firebase.google.com and sign in or create new account.

Create new project

Create a new project called place my order in the Firebase console.

Install Firebase CLI

npm install -g firebase-tools

Now, log into firebase.

firebase login

This will launch a page in your browser asking you to authenticate.

Link Place My Order app to new Firebase app

firebase init
  1. Which Firebase CLI features do you want to setup for this folder? (hosting)
  2. Select a default Firebase project for this directory? (don’t setup a default project)
  3. What do you want to use as your public directory? (dist/place-my-order)
  4. Configure as a single-page app (rewrite all urls to /index.html)? (yes)
  5. Set up automatic builds and deploys with GitHub? (no)
firebase use --add
  1. Which project do you want to add? (select your place-my-order project)
  2. What alias do you want to use for this project? (prod)

Deploy App

We need to get our app ready to deploy, so we’ll create a build.

ng build

firebase deploy
firebase open hosting:site

Now when we view our project url from the page Firebase launches we’ll see our app!

Update npm scripts

 "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "api": "place-my-order-api --port 7070",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "deploy": "ng build && firebase deploy"
  },

Survey

Thanks for taking this Bitovi training! We are constantly looking to improve this course. Please fill out the following survey and we will send you a t-shirt!