wails.json questions

[Robert-M-Muench]

I have some questions/comments regrading wails.json.

From the docs (V2):

{
    "name": "[The project name]",
    "assetdir": "[Relative path to your assets directory]",
    "frontend:install": "[The command to install node dependencies, run in the frontend directory - often `npm install`]",
    "frontend:build": "[The command to build the assets, run in the frontend directory - often `npm run build`]",
    "frontend:dev": "[This command is run in a separate process on `wails dev`. Useful for 3rd party watchers]",
    "wailsjsdir": "[Relative path to the directory that the auto-generated JS modules will be created]",
    "version": "[Project config version]",
    "outputfilename": "[The name of the binary]",
    "debounceMS": 100, // The default time the dev server waits to reload when it detects a vhange in assets
    "devserverurl": "[URL to the dev server serving local assets. Default: http://localhost:34115]",
    "appargs": "[Arguments passed to the application in shell style when in dev mode]"

}

My wails.json:

{
  "name": "build",
  "assetdir": "frontend/src",
  "frontend:build": "",
  "frontend:install": "",
  "frontend:dev": "",
  "wailsjsdir": "./frontend",
  "version": "2",
  "Path": "",
  "BuildDir": "",
  "outputfilename": "build.exe",
  "OutputType": "",
  "Platform": "",
  "Author": {
    "name": "Robert M. Muench",
  },
  "debounceMS": 100,
  "devserverurl": "http://localhost:34115"
}

1. assetdir is a confusing wording because there exists frontend/src/assetsand the other config words read for the frontend are named frontend:... Why not use frontend:src and a description like Relative path to the frontend files which are embedded into the binary?
2. frontend:build is run in the frontend directory (assuming this is the one pointed to be assetdir) but then where to put React JSX source files for example? I mean, the unprocessed JSX file shouldn't go into the binary, only the pre-processed JS file. Where should I put the React source files?
3. wailsjsdir I would expect this to point to ./frontend/wailsjsand not only ./frontend That's confusing.

[leaanthony]

Good comments. Let's see what other people think.

[Robert-M-Muench]

We could use something:

frontend
|--src (unprocessed frontend code, output goes to embed/)
|--embed (everything in here goes into the binary)
|--embed/wails (on demand generated)

• frontend:build (executed in src/ and should output to embed/)
• frontend:install (executed in src/ everything should be installed in src/ too)
• frontend:dev (executed when wails dev starts, might set up a watcher for src/ which outputs to embed/ which triggers wails to reload
• embed/wails (could even be made simpler, by only containing stuff that goes into the binary in a simple flat layout, no subdirs)

My idea is, that we strictly separate all the directories used for development from the one that gets embedded. Further, wails support calling the zillion necessary frontend tools one needs to use these days until the generated files, assets, etc. land in embed/ which is then used to run the application.

Ideas:

• src-frontend
• src-frontend-embed
• src-go

[leaanthony]

Thanks for taking the time to write this. So assetdir should already point to your compiled assets directory. The vanilla template gets away with pointing to source because there's no compile step. Developers are free to do what they want with the frontend. The only hooks are:

• what do I run to install (frontend:install)
• what do I run to build (frontend:build)
• where are the final assets (assetdir)

Vanilla is blank for first 2 as no compilation step, and points to `frontend/src° as the source is the same as the compiled assets.

[FrancoRATOVOSON]

I used to work with my own webpack configuration, so my frontend folder looks like :
-public/
--index.html
-src/
--index.tsx
--..[all my frontend code]
-..[eslint, webpack, swc... configutaion files]

And in the "frontend:build" in the wails.json file i put "webpack" witch build all my files inside a "dist" folder wich i use as frontend folder.

[Robert-M-Muench]

@FrancoRATOVOSON Can you post your wails.json, please? I'm struggling with the correct webpack call.

My layout:

I want to run webpack -w inside the frontend-react folder and have the output go into frontend. When I run wails dev it should start the webpack -w watcher (how would I see error messages?), which regenerates the files on demand, which in turn triggers wails to reload/rebuild the application.

[FrancoRATOVOSON]

Before I run wails dev, I run in another terminal webpack -w to change the dist folder (your frontend-react) since wails is watching for every changes inside the folder.
Here's my wails.json

{
  "assetdir": "frontend/dist",
  "frontend:build": "pnpm build",
  "frontend:install": "",
  "frontend:dev": "",
  "wailsjsdir": "./frontend/",
  "version": "2",
  "Path": "",
  "BuildDir": "",
  "OutputType": "",
  "Platform": "",
  "debounceMS": 100,
  "devserverurl": "http://localhost:34115",
  "appargs": ""
}

in my package.json

"scripts": {
    "test": "tap",
    "dev": "webpack --watch --mode development",
    "build": "webpack --mode production",
    "serve": "webpack serve --mode development"
  }