I have 3 entries in my webpack.config.js that generate 3 different HTML files. I do this so I can host them on separate domains:
- index.html = http://app.local
- site.html = http://site.local
- forms.html = http://forms.local
Right now I have a custom dev server that launches the webpack build three times so that I can point to what the index file should be. What I'd like to do is change this to a single server and use the host header to decide what index file to load.
The way I've tried to do this is:
devServer: {
host: '0.0.0.0',
/// Enable gzip
compress: true,
contentBase: './dist',
/* Theoretically, the public option is better but they only support a single host
*
* This is a security issue not using public.
* */
disableHostCheck: true,
// enable HMR on the server
hot: true,
overlay: true,
after: (app) => {
/* Server the dev settings that are normally injected via nginx */
app.get('/settings.js', function(req, res) {
const fullPath = path.join(__dirname, "settings.dev.js");
res.sendFile(fullPath);
});
app.get('*', function(req, res, next) {
const headers = req.headers;
const host = headers['host'];
if (
/* We only wan't to override GET */
(req.method !== 'GET') ||
/* They didn't send an accept header */
(!headers || typeof headers.accept !== 'string') ||
/* They prefer JSON */
(headers.accept.indexOf('application/json') === 0) ||
/* They don't want HTML */
(!acceptsHtml(headers.accept))
) {
console.log("TERMINATING EARLY", req.method, headers.accept);
return next();
}
let indexFile = 'index.html';
switch(host) {
case "site":
indexFile = 'site.html';
break;
case "forms":
indexFile = 'forms.html';
break;
}
console.log("BEFORE REQ URL", req.url);
req.url = `${indexFile}`;
console.log("AFTER REQ URL", req.url);
next();
});
},
}
This works on the initial load of the site but I get 404s for everything else. What should I be doing instead of req.url? I can't use res.sendFile because webpack is compiling everything in memory.
