Nuxt.js: Multiple NuxtJS Instances

[XEngine]

Hei! I wonder if nuxtjs can multiply installed on a shared express framework. like one nuxtjs for storefront another nuxtjs setup for admin dashboard but sharing the same express app.js

something like this can be achievable?

Eg :
./
--server
--storefront -> srcDir for storefront
----pages
----components..
--dashboard -> another srcDir for admin dashboard
----pages
----components..
--app.js
--nuxt.config.js
--package.json

nuxt config can be an object like

storefront: {
 "head": {},
 "build": {}
},
dashboard: {
 "head": {},
 "build" : {}
}

_{This question is available on Nuxt.js community (#c1601)}

[cretueusebiu]

I have something like this:

.
├── node_modules/
├── src/
|   ├── storefront/
|   |   ├── nuxt.config.js
|   |   ├── pages
|   |   └── components 
|   └── dashboard/
|   |   ├── nuxt.config.js
|   |   ├── pages
|   |   └── components 
|   └── shared/
|       ├── nuxt.config.js  
|       └── components   
|    
└── package.json

Both config files from storefront and dashboard extend the shared/nuxt.config.js because I have some things that I don't want to duplicate.

In storefront/nuxt.config.js I have:

{
   srcDir: __dirname, 
   buildDir: '.nuxt/storefront',
   ...
}

And dashboard/nuxt.config.js:

{
   srcDir: __dirname, 
   buildDir: '.nuxt/dashboard',
   ...
}

And my scripts in package.json look like this:

"scripts": {
  "storefront:dev": "nuxt --config-file src/storefront/nuxt.config.js -p=3000",
  "dashboard:dev": "nuxt --config-file src/dashboard/nuxt.config.js -p=4000",
  "dev": "concurrently \"npm run storefront:dev\" \"npm run dashboard:dev\"",
  "storefront:build": "nuxt build --config-file src/storefront/nuxt.config.js",
  "dashboard:build": "nuxt build --config-file src/dashboard/nuxt.config.js",
  "storefront:start": "nuxt start --config-file src/storefront/nuxt.config.js",
  "dashboard:start": "nuxt start --config-file src/dashboard/nuxt.config.js"
},

I use concurrently so I can run both apps from the same command.

Now I can build and run both apps from the same source code.

Here you can find an example by @motia.

[XEngine]

@cretueusebiu Thank you for this! Very appreciated man!

[gbezyuk]

I guess this approach does not allow nuxt-links between subapps, does it?

[XEngine]

in my case using express, this makes two different applications using same express base.

[cretueusebiu]

The build property is not shared in my case.

[ngodink]

excuse me..
I run npm run build using concurrently to build all projects, its successfull, but I want make shared modules to separate folder, so in each build folder, there are no duplicated modules.. what should i do?

[motia]

@ngodink , you should create a folder in the root directory, then you can create symlinks to it in each nuxt app folder or use resolve.fallback in the app configs.

[ngodink]

thanks @motia for your solution, it works ! :)
but i have alternative solution, it is editing nuxt.config.js in each folder like

var path = require('path')
module.exports = {
  ...
  extend (config, ctx) {
    config.resolve.alias['~shared'] = path.join(__dirname, '../../shared')
  }
}

note: ../../shared is a directory which i place shared folder from nuxt.config.js
so, i can use shared file (like: components, pages, etc.) in plugin folder with:

import utils from ~shared/utils

[paolog22]

can i still have a main config file like this :

.
├── node_modules/
├── src/
| ├── storefront/
| | ├── nuxt.config.js
| | ├── pages
| | └── components
| └── dashboard/
| | ├── nuxt.config.js
| | ├── pages
| | └── components
| └── shared/
| ├── nuxt.config.js
| └── components
|
└── package.json
-------nuxt.config.js (this has the common conifg file like global css('bootstrap') .. etc)

thanks
@cretueusebiu thanks for the idea :)

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.