-
-
Save icebob/0dda386fceb8e14b91d84d057fac676f to your computer and use it in GitHub Desktop.
"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); | |
}); |
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)
Nice, how you can register the SPA routes?
refreshing the browser gives 404 error