App hosting should support pnpm workspace projects

[debkanchan]

[REQUIRED] Environment info

firebase-tools: 13.13.0

Platform: MacOS

[REQUIRED] Test case

Steps to reproduce should be enough

[REQUIRED] Steps to reproduce

1. Create a new pnpm workspace with the following pnpm-workspace.yaml

packages:
  - "apps/*"
  - "packages/*"

2. inside /apps/main init a new nextjs app
3. inside /packages/random init empty js project
4. in project root run pnpm i
5. commit and push to Github
6. create new app hosting backend, specify app directory to /apps/main

[REQUIRED] Expected behaviour

Deploys the app

[REQUIRED] Actual behaviour

failed to build, lockfile not found

[google-oss-bot]

This issue does not seem to follow the issue template. Make sure you provide all the required information.

[aalej]

Hey @debkanchan, thanks for reaching out and for providing a detailed report. I discussed this with our engineering team. Currently, pnpm is supported, however pnpm workspaces is not. For now, I’ll mark this as a feature request.

[benyap]

Hi @aalej, just thought I'd chip in and mention a similar discussion that was started here: https://github.com/firebase/firebase-tools/discussions/7206#discussioncomment-10348334

Looking forward to see official support for pnpm workspaces at some point in the future.

[juanmosv]

supporting pnpm monorepo is a must +1

[Xennis]

+1 for this.

PS: A workaround is to set shared-workspace-lockfile to false.

[KalebKloppe]

A workaround is to set shared-workspace-lockfile to false.

This does solve one error, but I still get other errors for missing pnpm workspace packages.

App Hosting Build Error

Type error: Cannot find module 'ui/components/Heading' or its corresponding type declarations.

Project Structure

    ├── apps
    │   └── web
    │       ├── package.json
    │       └── package.json
    ├── shared
    │   └── ui
    │       ├── pnpm-lock.yaml
    │       └── package.json
    ├── pnpm-workspace.yaml
    ├── pnpm-lock.yaml
    └── package.json

apps/web/package.json

  "dependencies": {
    "ui": "workspace:*",
    "utils": "workspace:*",
  },

[iSuslov]

+1, turborepo also should be supported

[huksley]

What is the status of this? All types of monorepo should be supported - pnpm, turborepo and npm workspaces as well.

[nidegen]

Totally agree! We need turborepo and pnpm

[debuggerpk]

no turbo repo support ?

[manuelodoi]

A workaround is to set shared-workspace-lockfile to false.

This does solve one error, but I still get other errors for missing pnpm workspace packages.

App Hosting Build Error

Type error: Cannot find module 'ui/components/Heading' or its corresponding type declarations.

Project Structure

    ├── apps
    │   └── web
    │       ├── package.json
    │       └── package.json
    ├── shared
    │   └── ui
    │       ├── pnpm-lock.yaml
    │       └── package.json
    ├── pnpm-workspace.yaml
    ├── pnpm-lock.yaml
    └── package.json

apps/web/package.json

"dependencies": { "ui": "workspace:", "utils": "workspace:", },

@KalebKloppe were you able to resolve this?

[okawidhyartha]

For those who still seek how to deploy turborepo in app, i've deployed this successfully using these configuration

1. set the root directory as /
2. add apphosting.yaml in root directory with this configuration

runConfig:
  runCommand: pnpm start

3. make sure you define build and start script in you package.json in root directory for my case, it looks like this

"scripts": {
    "build": "turbo run build --filter=website",
    "dev": "turbo run dev",
    "start": "turbo run start --filter=website",
    "lint": "turbo run lint",
    "format": "prettier --write \"**/*.{ts,tsx,md}\"",
    "check-types": "turbo run check-types"
  },

5. in package.json in the app directory make sure you also define build and start script based on your app requirement for my case, the app is next js and the script looks like this

"scripts": {
    "dev": "next dev --turbopack",
    "build": "pnpm install && next build",
    "start": "next start --port 8080",
    "lint": "next lint"
  },

6. You also have to make sure you have defined build and start task in the turbo.json file

[sjjj986]

Thanks for your feature requests regarding Turborepo and pnpm workspaces. We're currently adding support for Turborepo, and Pnpm workspaces has been added to our backlog.

[mrdavidlaing]

Building on @okawidhyartha's idea; I was able to get a turborepo to work with "custom" named start scripts:

2. add apphosting.yaml in root directory with this configuration

runConfig:
  runCommand: pnpm start

I was finding that running start via turbo was triggering turbo cache invalidation and causing my start script to attempt to rebuild my NextJs app - which was both slow AND required my runContainer to need more memory

Instead I just configure my run command to launch pnpm start from the right folder directly

runConfig:
  runCommand: sh -c "cd apps/webapp && pnpm start"

3. make sure you define build and start script in you package.json in root directory for my case, it looks like this

"scripts": {
    "build": "turbo run build --filter=website",
    "start": "turbo run start --filter=website",
   ...snip...

I have

 "scripts": {
    "build:webapp": "turbo build --filter=webapp",
   ...snip...

I don't need a start in my root package.json due to how I've configured my runCommand:

I also added this to my apphosting.yaml

env:
  - variable: GOOGLE_NODE_RUN_SCRIPTS
    value: build:webapp
    availability:
      - BUILD

to cause the Google Build service to run pnpm build:webapp rather than the default build (which in my case builds a bunch of things unrelated to the webapp being deployed)

5. in package.json in the app directory make sure you also define build and start script based on your app requirement for my case, the app is next js and the script looks like this

"scripts": {
    "dev": "next dev --turbopack",
    "build": "pnpm install && next build",
    "start": "next start --port 8080",
    "lint": "next lint"
  },

I have - in apps/webapp/package.json

"scripts": {
    "build": "next build",
    "start": "next start --port ${PORT:-8080}",
    ...snip...

NB(1) next start from the PORT env var; defaulting to 8080 NB(2) I think including pnpm install in the build script is unnecessary - pnpm install is automatically run by the Cloud Build Environment before pnpm build is run

6. You also have to make sure you have defined build and start task in the turbo.json file

My turbo.json looks like this;

  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**", ".next/**", "!dist/**/__tests__/**", ".turbo/*.tsbuildinfo", "packages/*/.turbo/*.tsbuildinfo", "apps/*/.turbo/*.tsbuildinfo"],
      "inputs": ["src/**", "*.ts", "*.tsx", "*.js", "*.jsx", "tsconfig.json", "package.json"],
"env": [
        "NEXT_PUBLIC_BASE_URL",
        "NEXT_PUBLIC_FIREBASE_FIRESTORE_DATABASE_ID"
      ]
    },
    "start": {
      "dependsOn": ["build"],
      "cache": false,
      "persistent": true
    },
    ...snip...

[sarbogast]

@okawidhyartha @mrdavidlaing Can your setups accomodate building and deploying more than one backend? In my monorepo, I have 2 Nuxt apps under apps that I would like to deploy to 2 separate backends. But if I add an apphosting.yaml file at the root, I can only have one runCommand in it, right? And this only build and deploy one of my apps, correct?