How to load multiple apps with vue devServer configuration

Question

Hi i have a app called Home which has installable plugins which i can install at any point of time which runs in iframe

<Home /home/user/mainprojects/index.html> <-- Home app
   <Bed iframe /home/user/plugins/bed/index.html> <-- plugins app
   <Bed /iframe>
</Home>

with this nginx setup i'm able to load the plugin app(Bed) with after build(which is heavy time consuming)

here is nginx setup for that

     location / {
             alias /home/user/mainprojects/dist/;
             index index.html;
     }


  location /Bed {
      alias    /home/user/plugins/bed/dist/;
      index  index.html index.htm;
  }

Question: i don't want to build main app Home app i want to run it through serve, but second app i,e plugin i will always build which will be available as bundle. with above nginx setup after building both(i,e npm run build, bundle) it will work fine. i want to avoid main app build.

here is how my vue.config.js will look like

module.exports = {
    devServer:{
        proxy:{
            '^/appReplacer':{
                 target: 'http://100.148.1.9:9003/',
                 changeOrigin:true,
                 logLevel:'debug',
                 pathRewrite: {'^/appReplacer':'/'}
            }
        }
    }
}

Still looking for a solution..

Please help me thanks in advance !!

You should run the second application in DEV mode - listening on port 9003 on address 100.148.1.9 Thus the first application will be able to proxy your requests to the second app. — IVO GELOV, Jan 11 '22 at 08:47
@IVOGELOV, with `nginx` i'm able to load second app too with run it(after build) — EaBengaluru, Jan 11 '22 at 12:56
You said that you are looking for a solution without `nginX` because you want to avoid bundling - therefore you need to run `npm run serve` inside the project folder of each of the 2 applications. — IVO GELOV, Jan 12 '22 at 14:36
@IVO GELOV, sorry for lack of clarity, my second app will always comes as a bundle but my first app will always run through `npm run serve` — EaBengaluru, Jan 12 '22 at 16:12
If your app will always come as a bundle - you will never be able to use `npm run serve` over this bundle. The bundle will have to be served through `nginX` or similar HTTP server. `npm run serve` can only work over the original unbundled source code. — IVO GELOV, Jan 13 '22 at 15:52

score 1 · Accepted Answer · answered Jan 13 '22 at 18:06

Assuming you are using Vue CLI v4 which is based on Webpack 4

Webpack DevServer is based on Express framework and allows to setup custom Express middleware using devServer.before option

This way you can configure any path to serve virtually anything you want. For example use the static middleware to serve some static files (dist of your plugin in this case)

Note that following code depends heavily on version of Vue CLI in use. Current release version of Vue CLI 4.5.15 is using "webpack-dev-server": "^3.11.0" which uses "express": "^4.17.1"

// vue.config.js

// express should be installed as it is used by webpack-dev-server
const express = require('express');

module.exports = {
  //...
  devServer: {
    before: function(app, server, compiler) {
      app.use('/url/to/plugin', express.static('dist/location/of/your/plugin'));
    }
  }
};

How to load multiple apps with vue devServer configuration

1 Answers1