1

I use Webpack to compile my JS which is then loaded via bundle.js via a template string sent via express.

The only problem is, I can't find information on how to render custom html while also using webpack-dev-middleware to watch and compile bundle.js.

My HTML is being sent with the following code:

app.use('*', (req, res) => {
    res.send(`
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="utf-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
          <title>Title</title>
        </head>
        <body>
          <noscript>
            You need to enable JavaScript to run this app.
          </noscript>

          <div id="main"></div>

          <script type="text/javascript">window.__userData=${JSON.stringify(req.user)}</script>
          <script src="/bundle.js" type="text/javascript"></script>
        </body>
        </html>`);
});

So, I have no idea how I can keep/use this while using webpack-dev-middleware for the bundle.js, since what I tried to do was just add app.use as per webpack-dev-middleware before the above snippet, though it did not work, failing with the error of bundle.js being of the wrong mime type text/html, thus not executable.

EDIT

The server-side rendering option for webpack-dev-middleware is experimental and not what I'm looking for, I don't need raw bundle.js to send with html.

sparcut
  • 795
  • 1
  • 10
  • 27
  • if all you need is to watch and compile bundle.js why dont you simply write a gulp task for that purpose or just use nodemon/forever? – Manticore Oct 12 '17 at 11:01
  • @Manticore I've setup webpack todo all my compiling, I don't feel changing to gulp is a wise solution, I'll need to write brand new compile script for gulp. Webpack is also crazy fast with its in-memory dev middleware/server. – sparcut Oct 12 '17 at 11:06
  • do your scripts change on runtime? i mean do they really have to be recompiled by the webapplication? – Manticore Oct 12 '17 at 11:10
  • @Manticore I see what you mean, It's for development though, so only runs when node env is set to development. I require it to be compiled as it's React, so code base is spread over many files. I've come up with a temporary solution that'll appease me for the time being, I'm going to use Webpacks node api to watch and compile, it has a callback so I can tell browser to refresh, websocket, polling or something. – sparcut Oct 16 '17 at 04:32
  • @sparcut is your solution available somewhere (i.e. github) ? – molsson May 03 '20 at 17:28

0 Answers0