Use monorepos with App Hosting

With monorepos, you can organize and manage multiple projects in a single directory. This guide describes how to get started deploying Nx-based apps with App Hosting.

Deploy monorepos with the Firebase console

Monorepo support is built into the graphical backend setup flow in the Firebase console. When prompted for a "Root directory" under "Deployment settings," specify the path to the application you want to deploy inside the monorepo:

Screen shot of the console backend creation view

Deploy monorepos with the Firebase CLI

Monorepo support is built into the backend setup flow invoked by the Firebase CLI command apphosting:backends:create. After you enter this flow and specify your chosen GitHub repository, you are prompted to specify your app's root directory relative to your repository; at this prompt, pass the path to the application you want to deploy inside the monorepo:

$ firebase apphosting:backends:create --project [project-name]
i  === Import a GitHub repository
✔  Connected with GitHub successfully

? Which GitHub repo do you want to deploy? gh-username/nx-monorepo
? Specify your app's root directory relative to your repository path/to/app

For example, here are the assets that would be deployed given the following Nx project structure and "target-app" as the application you want to build and deploy:

.
    ├── lib
    ├── apps
    │   └── target-app
    │       ├── project.json
    │       └── src
    │           └── ...
    ├── nx.json
    ├── package-lock.json
    └── package.json

The app's root directory relative to your repository is apps/target-app.

Troubleshooting monorepo deployment

  • If you leave the "root directory" field blank during backend setup, App Hosting may still be able to build and deploy the user's target project if it is specified in the defaultProject of the related nx.json configuration file.
  • If you specify neither the "root directory" field nor a defaultProject, then the build will fail and display a message that App Hosting cannot find a project to target inside the Nx monorepo.
  • For Nx + Angular applications, you must use the Angular application builder to build the application. The Angular application builder is specified in project.json