How do I correctly configure Neutralinojs to work with Vite HMR?

Question

I'm trying to integrate Neutralinojs with Vite to improve my dev workflow and use HMR. How should I configure the setup for HMR to function properly? I've tried both in macOS and Windows without luck.

I’ve followed the Neutralinojs docs. I've succeeded to use assets written to disk by using Vite's watch mode (vite build --watch). However, this causes a full refresh of the application.

I start the development servers in two separate terminals with the following commands:

1. vite
2. npx @neutralinojs/neu run -- --frontend-lib-dev --window-enable-inspector

Below are my configuration files.

vite.config.js

export default defineConfig({
  build: {
    outDir: "dist",
    emptyOutDir: false
  },
  server: {
    port: 3000
  }
});

neutralino.config.json

{
  "applicationId": "js.neutralino.zero",
  "version": "1.0.0",
  "defaultMode": "window",
  "port": 0,
  "documentRoot": "/dist/",
  "url": "/",
  "enableServer": true,
  "enableNativeAPI": true,
  "exportAuthInfo": true,
  "nativeAllowList": [
    "app.*"
  ],
  "modes": {
    "window": {
      "title": "neu-vite",
      "width": 800,
      "height": 500,
      "minWidth": 400,
      "minHeight": 200,
      "icon": "/public/appIcon.png"
    }
  },
  "cli": {
    "binaryName": "neu-vite",
    "resourcesPath": "/dist/",
    "extensionsPath": "/extensions/",
    "clientLibrary": "/public/neutralino.js",
    "binaryVersion": "4.12.0",
    "clientVersion": "3.10.0",
    "frontendLibrary": {
      "patchFile": "/index.html",
      "devUrl": "http://localhost:3000"
    }
  }
}

Answer 1

Since @neutralinojs/neu version 10 it is possible to definde commands to start a dev server and to build the frontend app which are executed before neu run and neu build.

First, set a fixed port to your dev server in your vite config:

  ...,
  server: {
    port: 3000,
    strictPort: true
  }

In the cli section of your neutralino.config.json, make sure there is no clientLibrary. You shouldn't need extensionsPath either.

Make sure there is a section frontendLibrary that points to your index.html and the URL of your dev server.

  "cli": {
    "binaryName": "myApp",
    "resourcesPath": "/path/to/your/vue/build/output/dir",
    ...
    "frontendLibrary": {
      "patchFile": "/index.html",
      "devUrl": "http://localhost:3000",
      "devCommand": "npm run dev",
      "buildCommand": "npm run build"
    }
  }

Then you just need to run npx @neutralinojs/neu run, wich starts both, vite live server and neutralino.

However, there are some pitfalls:

The vue dev server is started first. When your defaultMode is "browser", this opens your browser but the neutralino dev lib is not provided at this time. You might have to refresh the page after neutralino is started.

Also, building the app with neu build and having the index.html patched will prevent vue from loading in a production build. Just make sure index.html is not patched before build.

Answer 2

I think to use your local you need to provide server.hmr in your config

server: {
   port:3000,
   hmr: {
     host: 'localhost',
     port:7859,
   },