Running Vue CLI 3 generated project with custom Express server

serve.js

"use strict";

// Generate webpack config with CLI service
const webpackConfig = require("@vue/cli-service/webpack.config.js");

// Create express app
const express = require("express");
const app = express();

// Configure webpack as middleware
const webpack = require("webpack");

webpackConfig.entry.app.unshift('webpack-hot-middleware/client');
const compiler = webpack(webpackConfig);
const devMiddleware = require('webpack-dev-middleware'); // eslint-disable-line
app.use(devMiddleware(compiler, {
	noInfo: false,
	publicPath: webpackConfig.output.publicPath,
	headers: { "Access-Control-Allow-Origin": "*" },
	stats: {colors: true}
}));

const hotMiddleware = require('webpack-hot-middleware'); // eslint-disable-line
app.use(hotMiddleware(compiler, {
	log: console.log
}));

const port = 8080;
app.listen(port, function() {
	console.log("Developer server running on http://localhost:" + port);
});

Nice, how you can register the SPA routes?
refreshing the browser gives 404 error

Try something like this

...

const hotMiddleware = require('webpack-hot-middleware'); // eslint-disable-line
app.use(hotMiddleware(compiler, {
    log: console.log
}));

app.use('*', (req, res, next) => {
    const filename = path.join(compiler.outputPath, 'index.html')

    compiler.outputFileSystem.readFile(filename, (err, result) => {
        if (err) {
            return next(err)
        }
        res.set('content-type', 'text/html')
        res.send(result)
        res.end()
    })
})

const port = 8080;
app.listen(port, function() {
	console.log("Developer server running on http://localhost:" + port);
});

Here's my approach: Using Vue-CLI to serve an Express app.

So close, but I'm getting this error:
Uncaught Error: [HMR] Hot Module Replacement is disabled

I suspect this has to do with using vue-cli 3, which probably has a different webpack config.

Any suggestions?

Nevamind. I didn't think this would work but adding hotModuleReplacementPluging() via vue.config.js seems to fix it:

  configureWebpack: {
    plugins: [
      new webpack.HotModuleReplacementPlugin()
    ]
  }

Here's my approach: Using Vue-CLI to serve an Express app.

Thank you for your approach! It working for some cases.
But for some - not.
For example I need to connect dyson service (like fake api service) to express app before app.listen(..)
I try to use before or after hooks - not works at all - server not initalize at all(
webpro/dyson#104
Help me please)