Impossible to deploy with Nuxt 3 layers in a monorepo

[serhii-chernenko]

Explanation of NuxtHub deployment issue within a monorepo project

Repo: https://github.com/serhii-chernenko/nuxthub-issue/

Content

• Architecture
• Prepare local environment
• Prepare deployment environment
• Issues
• Expected help

Architecture

I expect a monorepo for complex project where I expect different Nuxt 3 apps that extends shared Nuxt 3 layers within one repository to speed up development and make easier a codebase management.
A structure is already prepared within the current repository but there are some expectations:

# Different apps with different NuxtHub projects and different domains
src/apps/admin # e.g. admin.nuxt.dev
src/apps/storefront # e.g. storefront.nuxt.dev

# Shared layers that could be used within end-apps
src/layers/ui
src/layers/ecommerce
src/layers/auth
src/layers/blog

Prepare local environment

Project workspaces

In the root package.json file I have workspaces setup:

{
  "workspaces": [
    "src/layers/*",
    "src/apps/*"
  ],
  "scripts": {
    "dev": "npm run dev --workspace @demo/app",
    "build": "npm run dev --workspace @demo/app"
  }
}

In the UI layer's package.json the package named @demo/ui:

{
  "name": "@demo/ui"
}

In the App package.json the package fakely installed with a file reference:

{
  "dependencies": {
    "@demo/ui": "file:../../layers/ui"
  }
}

The layer package is extended in layers of nuxt.config.ts of the app application:

export default defineNuxtConfig({
  extends: [
    ['@demo/ui', { install: true }]
  ]
})

Remove node_modules from any nested directories

Before starting development I have to remove any nested node_modules and package-json.lock files:

rm -rf src/layers/ui/node_modules src/layers/ui/package-lock.json
rm -rf src/apps/app/node_modules src/apps/app/package-lock.json

Local development

When I want to start the application I go to the root directory where I have the package.json with the dev script:

{
  "scripts": {
    "dev": "npm run dev --workspace @demo/app",
  }
}

and run the command

npm install
npm run dev

When the app is started, everything works perfectly:

Prepare deployment environment

When everything is prepared for development, I want to build my application via NuxtHub service.

NuxtHub

Currently I have one NuxtHub project especially for the demo issue explanation:

It's a reference to the domain: https://nuxthub-issue.nuxt.dev/.

GitHub Actions and secrets

Regarding the documentation, I have to have 2 ENV variables such as NUXT_HUB_PROJECT_KEY and NUXT_HUB_PROJECT_DEPLOY_TOKEN.

NUXT_HUB_PROJECT_KEY is provided there: https://admin.hub.nuxt.com/serhii-chernenko/nuxthub-issue/settings/environment

And NUXT_HUB_PROJECT_DEPLOY_TOKEN is available there:

Then I added both secrets to github actions config: https://github.com/serhii-chernenko/nuxthub-issue/settings/secrets/actions

Issues

However, I got a couple of issues here.

Initial deployment

Initial deployment was successfully finished somehow but as a result, I see just a "clear" Nuxt 3 application and it's not the same as I have locally:
https://nuxthub-issue.nuxt.dev/

GitHub actions build failed

When I set up everything correctly, I have deployment errors:
https://github.com/serhii-chernenko/nuxthub-issue/actions/runs/12338464409/job/34433433401

The following package was not found and will be installed: nuxthub@0.7.4
Please login to deploy your project or set the `NUXT_HUB_USER_TOKEN` environment variable.

Local deployment

So, if GitHub actions are not working, I tried to repeat it locally.

I prepared the .env file in the root directory and in the app directory just to be sure that it has to work in any cases:

When I run the command from the root project directory

nuxthub deploy

I got the error:

@nuxthub/core is not installed, make sure to install it with npx nuxt module add hub

So, I tried to run it from the app dir:

I got the error:

nuxt is not installed, please make sure that you are inside a Nuxt project.

It's expected because I expect workspaces here not to run anything inside nested apps, I want to make it working from the root project directory.

I also tried to change the application directory, but it didn't help:

Expected help

I want a clear explanation and detailed instructions how to make my current setup working. Please, don't suggest me to move layers to different repositories to extend them as external modules. I want exactly the setup what I described.

But decision of choosing NuxtHub make me mad at this point, because I spent 1 day and I totally failed.

[serhii-chernenko]

In general, I solved the issue by building all workspaces (it's important) to avoid having issues with extend.
But, I have to run the nuxt build command manually from the root dir, because when I try to run the

npx nuxthub deploy

from the root dir, it doesn't do the same as I need for workspaces.

So, I prepared a script in package.json:

"build": "npm run build --workspace src/layers/* && npm run build --workspace @demo/app"

And then, I have to manually go to the app dir

cd src/apps/app

And run the deploy command without building sources:

npx nuxthub deploy --no-build

It wasn't clear, I didn't find any references in your docs for such cases, it'd be nice if you update your documentation and possibly support workspaces with specific options like

npx nuxthub deploy --workspace @demo/app

BTW, the login issue used to happen because I just made a mistake and used the NUXT_HUB_PROJECT_DEPLOY_TOKEN ENV variable instead of this NUXT_HUB_USER_TOKEN one.

But additional issue I got when I guessed that everything has solved, I see duplicated deployment jobs in the NuxtHub dashboard. One is failed because it tries to be run somehow with the just deploy command. And the second one is coming from GitHub Actions CI with --no-build option that resolves the issue.

So, I don't expect duplicated failed builds

=== upd ===

The last issue has solved by disabling auto-deploys directly in CloudFlare dashboard:

[atinux]

Thank you for your feedback and clear explanations @serhii-chernenko 🙏

To fix the extends failing, please add this postinstall script to your root package.json:

"postinstall": "npm run dev:prepare --workspace src/layers/*",

This will make sure the .playground/ of your layers are properly created for the tsconfig.json to resolve correctly.

I just fixed the nuxthub deploy command so it can work also with monorepo by giving a path as positional argument in nuxt-hub/cli#38 (Make sure to use nuxthub >= v0.7.6).

In you GitHub Action, you can remove the npm run build section and update it to:

-     - name: Build app
-       run: npm run build
-
      - name:  Deploy with nuxthub
-       working-directory: ./src/apps/app
-       run: npx nuxthub deploy --no-build
+       run: npx nuxthub deploy src/apps/app
        env:
          NUXT_HUB_PROJECT_KEY: ${{ secrets.NUXT_HUB_PROJECT_KEY }}
          NUXT_HUB_USER_TOKEN: ${{ secrets.NUXT_HUB_USER_TOKEN }}

If you don't want to use the GitHub action and use Cloudflare Pages CI, then:

• Build command: npx nuxi build src/apps/app
• Build output: src/apps/app
• Root directory: leave empty

Note

You should either use the GitHub action OR the Cloudflare Pages CI.

I hope my answer helps 🙏

Feel free if you have any questions or suggestions!

[serhii-chernenko]

Hi @atinux,
Thank you for your quick response and changes in CLI! I really appreciate it.
Sadly, it doesn't work.

Related commits:

• serhii-chernenko/nuxthub-issue@6f4077f
• serhii-chernenko/nuxthub-issue@e8d18e3

I added postinstall script as you advised:

{
  "scripts": {
    "postinstall": "npm run dev:prepare --workspace src/layers/*"
  }
}

Moreover:

• I removed build step
• Removed working-directory
• Removed --no-build
• Added src/apps/app to npx nuxthub deploy.

Additionally, I added

{
  "optionalDependencies": {
    "nuxthub": "^0.7.6"
  }
}

To be sure, I have the right version as you also mentioned.

But as a result I got error:
https://github.com/serhii-chernenko/nuxthub-issue/actions/runs/12358249647

`@nuxthub/core` is not installed, make sure to install it with `npx nuxt module add hub`

I guess because @nuxthub/core is not mentioned in the root package.json.

I decided to restore

working-directory: ./src/apps/app

and keep

npx nuxthub deploy

But got

`nuxt` is not installed, please make sure that you are inside a Nuxt project.

Did I miss something?

[serhii-chernenko]

@atinux it was my bad, sorry.
I changed npm install with npm ci at the same commit.
And my step was skipped when the cache already exists. Also, npm ci doesn't trigger postinstall by default as well.
So, I just moved
npm run postinstall to a separate step and everything works like a charm by your instructions. Thanks!

Also, I decided to check, if it works the same with disabled GitHub Actions workflow and could be deployed with CloudFlare Pages deployments. The deployment was successfully done BTW, but the domains were not accessible for unknown reasons.

• nuxthub-issue.pages.dev
• nuxthub-issue.nuxt.dev
  
  
  
  
  

But when I disabled autodeployment in CF and restored GitHub Actions workflow, pages are alive.

Maybe some specific configuration in CF has to be done anymore!?

[RihanArfan]

For Pages CI, could you try with the the output directory set to src/apps/app/dist?

[serhii-chernenko]

@RihanArfan currently I'm using this way of deployments and it works fine:
https://github.com/serhii-chernenko/nuxthub-issue/blob/main/.github/workflows/deploy.yml#L47

[RihanArfan]

Ah, glad to hear it's resolved :)