2024-11-03 21:30:09 -05:00

7.9 KiB

Raw Blame History

Deploy your application on Firebase Hosting & Functions

In this guide, we'll look at how to use @angular/fire to automatically deploy an Angular application to Firebase hosting or functions by using the Angular CLI.

@angular/fire uses Firebase functions to deploy your Angular universal projects, with server-side rendering enabled.

Angular Universal deployments work with @nguniversal/* version 9.0.0 and above.

Step 1: add `@angular/fire` to your project

First, you need to add the @angular/fire package to your project. In your Angular CLI project run:

ng add @angular/fire

Note that the command above assumes you have global Angular CLI installed. To install Angular CLI globally run npm i -g @angular/cli.

First, the command above will check if you have an Angular universal project. It'll do so by looking at your angular.json project, looking for a server target for the specified project. If it finds one, it'll ask you if you want to deploy the project in a firebase function.

After that it will trigger the @angular/fire ng-add schematics. The schematics will open a web browser and guide you through the Firebase authentication flow (if you're not signed in already). After you authenticate, you'll see a prompt to select a Firebase hosting project.

The schematics will do the following:

Add @angular/fire to your list of dependencies
Create firebase.json, .firebaserc files in the root of your workspace. You can use them to configure your firebase hosting deployment. Find more about them here
Update your workspace file (angular.json) by inserting the deploy builder

In the end, your angular.json project will look like below:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "sample-app": {
      // ...
      "deploy": {
        "builder": "@angular/fire:deploy",
        "options": {} // Here you may find an "ssr": true option if you've
                      // selected that you want to deploy your Angular universal project
                      // as a firebase function.
        }
      }
  },
    // ...
  "defaultProject": "sample-app"
  
}

If you want to add deployment capabilities to a different project in your workspace, you can run:

ng add @angular/fire --project=[PROJECT_NAME]

Step 2: deploying the project

As the second step, to deploy your project run:

ng deploy --project=[PROJECT_NAME]

The --project option is optional. Learn more here.

The command above will trigger:

Production build of your application
Deployment of the produced assets to the firebase hosting project you selected during ng add

If you've specified that you want a server-side rendering enabled deployment in a firebase function, the command will also:

Create a firebase function in dist, which directly consumes main.js from your server output directory.
Create package.json for the firebase function with the required dependencies.
Deploy the static assets to firebase hosting and your universal server as a Firebase function.

If you want to preview your Angular Universal project before we deploy it as a Firebase Function you can run:

ng deploy --preview

We'll create the function and a package.json in your project output directory. This way, you can later run firebase serve in your project root so you can test everything before deploying.

Step 3: customization

To customize the deployment flow, you can use the configuration files you're already familiar with from firebase-tools. You can find more in the firebase documentation.

Configuring Cloud Functions

Setting functionsNodeVersion and functionsRuntimeOptions in your angular.json allow you to custimze the version of Node.js Cloud Functions is running and run-time settings like timeout, VPC connectors, and memory.

"deploy": {
    "builder": "@angular/fire:deploy",
    "options": {
        "functionsNodeVersion": 12,
        "functionsRuntimeOptions": {
          "memory": "2GB",
          "timeoutSeconds": 10,
          "vpcConnector": "my-vpc-connector",
          "vpcConnectorEgressSettings": "PRIVATE_RANGES_ONLY"
        }
    }
}

Working with multiple Firebase Projects

If you have multiple build targets and deploy targets, it is possible to specify them in your angular.json or workspace.json.

It is possible to use either your project name or project alias in firebaseProject. The setting provided here is equivalent to passing a project name or alias to firebase deploy --project projectNameOrAlias.

The buildTarget simply points to an existing build configuration for your project. Most projects have a default configuration and a production configuration (commonly activated by using the --prod flag) but it is possible to specify as many build configurations as needed.

You may specify a buildTarget and firebaseProject in your options as follows:

"deploy": {
    "builder": "@angular/fire:deploy",
    "options": {
        "buildTarget": "projectName:build",
        "firebaseProject": "developmentProject"
    },
    "configurations": {
        "production": {
            "buildTarget": "projectName:build:production",
            "firebaseProject": "productionProject"
        }
    }
}

The above configuration specifies the following:

ng deploy will deploy the default project with default configuration.
ng deploy projectName will deploy the specified project with default configuration.
ng deploy projectName --prod or ng deploy projectName --configuration='production' will deploy projectName with production build settings to your production environment.

All of the options are optional. If you do not specify a buildTarget, it defaults to a production build (projectName:build:production). If you do not specify a firebaseProject, it defaults to the first matching deploy target found in your .firebaserc (where your projectName is the same as your Firebase deploy target name). The configurations section is also optional.

Working with multiple project sites

For example, if you have muti sites config in firebase.json like this:

{
  "hosting": [
    {
      "target": "custom-site",
      "public": "public/my-custom-site",
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
      ],
      "rewrites": [
        {
          "source": "**",
          "destination": "/index.html"
        }
      ]
    }
  ],

If you have multiple build targets and deploy targets, it is possible to specify them in your angular.json or workspace.json.

It is possible to use either your project name or project alias in siteTarget.

You may specify a siteTarget in your options as follows:

"deploy": {
    "builder": "@angular/fire:deploy",
    "options": {
        "buildTarget": "projectName:build",
        "firebaseProject": "developmentProject",
        "siteTarget": "yourDefaultSiteTarget"
    },
    "configurations": {
        "production": {
            "buildTarget": "projectName:build:production",
            "firebaseProject": "productionProject",
            "siteTarget": "yourProdSiteTarget"
        },
        "storybook": {
            "buildTarget": "projectName:build-storybook",
            "firebaseProject": "developmentProject",
            "siteTarget": "yourStorybookSiteTarget"
        }
    }
}