Skip to content

Rise and Fall of WebPack Dev Server in My Project

December 1st, 2016 - Software

Disclaimer: This is a log of my journey developing an electron app.

I’m working at a small electron app and I was experimenting with webpack-dev-server, so I can try to do live reloads. First, I’ve started the app as a web app (no electron dependencies whatsoever). At this stage, running:

cross-env NODE_ENV=development IS_ELECTRON=1 webpack-dev-server

off npm run would allow me to load and reload every time I did a change. Perfect solution I thought and I started to add electron via a simple app. The idea was to load the scripts off a file in production or the server in development. I used:

<script>
      {
        const script = document.createElement('script');
        const port = process.env.PORT || 3000;
        script.src = (process.env.HOT)
          ? 'http://localhost:' + port + '/main.js'
          : './main.js';
        document.write(script.outerHTML);
      }
</script>

in my HTML document to make the choice. It worked in the sense that it was seeking the right resource, but… I ended up with load errors, in particular:

Uncaught SyntaxError: The URL’s scheme must be either http: or https:. file: is not allowed.

Then I found out webpack-dev-server doesn’t like if the HTML source is a file :(.

Back to the drawing board I guess :)

Share on
Reddit
Linked in
Whatsapp

A little experiment: