Configure Hot Module Reload for ElectronJS + Vue

Question

I have the following repository where I would like to get Hot Module Reload to work.

So far I am able to:

• start the app
• compile the app files and run a spectron test using the compiled files

What I'd like to achieve is to alter the webpack configuration accordingly so that I am able to run "npm run dev" for example and have the app start with HMR available.

How can I achieve so with the current webpack settings?

Any other answers around the subject are for react projects, which are most, beyond my understanding, or are using electron-reload, which is not actually what I am looking for.

Why not use Vue CLI?

I attempted Vue CLI and a plugin vue-cli-electron-builder-builder, but faced the following issues:

• It does not support mocha
• Simple spectron test takes up to 30 seconds
• If I want to customize anything, I end up with three items or more to learn/read about (Vue CLI, the plugin configurations, the scaffold)

Electron webpack

I initially used this plugin to achieve the same by following the video here. I encountered several issues:

• At the time I tried this plugin (3-4 months ago), there was an error during compilation occurring as it would not support the latest Electron version (4.0 was recently released)
• When I tried to understand how to get Spectron to work along, I wasted hours before realizing that I am unable to overwrite/use the NODE_ENV variable, making it even more difficult to set conditionals for various environment (test, development, production).
• When the first issue above was resolved, HMR wasn't working anymore
• Despite following the documentation, certain webpack overrides did not seem to take effect. For instance, I added overlay: true which did effectively render the overlay on error while the App was running. But any attempts to reduce the noise on compilation has no effect. Similarly, it's not easy to determine how to point mocha to the right webpack config (I tried both, pointing at the vendor generated config, or using an extended config on root, but in vain)

As per above, it turns out I spend a huge amount of time encountering issues rather than proceeding with the app idea. All the tools available to make things easier either have issues on Windows, or have known issues with x version of y dependency, or just simply adds overheads that I need to learn at one point to tackle better the setup (for example, electron-webpack in itself is a tool, not just a plugin, going through the documentation is a must since it has its own concept around the project structure and configurations). I spent more time learning side tools than electron itself.

Hence, I would like to know how to get HMR to work on the main and renderer process with a basic example, where, if simple enough, will avoid I believe the need to learn extra tools or face various issues due to versions or OS.

Requirements:

• ElectronJS
• Vue
• Relatively fast e2e tests
• Unit tests
• HMR both with main and renderer process

Answer 1

my advice to you is as fallow: first of all separate the Electron & Vue from each other.

the reason its that are both really different projects. i am telling you that as i have made this journey with very similar project.

the process i have done. install vue-cli link
npm install -g @vue/cli

run vue ui and you face the fancy vue ui project management. set what ever you like in the project create process.

after that i have run my code with a conditional to check if we in dev or not.
when i am in dev i point to the vue muck up server.

if (!app.isPackaged) {
   mainWindow.loadURL(`http://localhost:8081`);
   mainWindow.webContents.openDevTools({mode: 'undocked'});
} else {
   mainWindow.loadURL(`file://${__dirname}/index.html`);
}

and in this option the HMR work perfect.