Search code examples
firebasenext.jsnx-monoreponx.dev

How to build and deploy an app to Firebase using Nx and NextJs


I create an app using @nx/next. So basically a nextJs 13 app using app routing using nx.

Now, I created my project, worked inside my apps/projectName/app folder, and create a few libs/libName/lib etc... like a normal Nx repository.

I now arrived at a step where I would like to build and deploy a first draft of my work. I setup firebase

firebase experiments:enable webframeworks
firebase init hosting

And followed the step adding hosting and firestore (since I also use firestore) and accepting the default config once it detected my nextJs project.

I ended up with

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "hosting": {
    "source": ".",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "frameworksBackend": {
      "region": "asia-east1"
    }
  }
}

Now, as the route of my built project is dist/apps/projectName I changed to

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "hosting": {
    "source": "dist/apps/projectName",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "frameworksBackend": {
      "region": "asia-east1"
    }
  }
}

The problem is, running deploy channel now trigger the following:

firebase hosting:channel:deploy --project projectName testChannel

Error: Could not find the next executable.

When I create a new clean project without Nx, it s pretty straightforward but with Nx, I am not sure what I am supposed to deploy even tho it looks similar structure as my build folder. I am unsure what is the correct configuration to allow deployment of a NextJs app inside a NX repository using firebase.


Solution

  • Looks like to this day monorepo are not supported.

    https://github.com/firebase/firebase-tools/issues/6049

    I will try to play with the config manually a bit and edit if I find a solution.