Wails: Support for other frontend frameworks

[luizfonseca]

Hi!

I'd like to discuss the possibility of Wails also working with other frameworks:

• React
• Svelte

I am currently integrating with Svelte and making sure everything works; I wonder if this would actually be useful for everyone else.

[leaanthony]

This is great! Integrating other frameworks is pretty easy. I need to update the docs on how to do it, but essentially copy https://github.com/wailsapp/wails/tree/master/cmd/templates/vuebasic, update the frontend files and update the template.json. Once you have a PR, I'll re-enable the template selection code.

[luizfonseca]

Cool! Thanks for the assistance! @leaanthony
I will work on this over the weekend and submit a PR 👍

[leaanthony]

Svelte looks sweeeet!

[leaanthony]

There's been more call for this lately so I thought I'd lay out what needs to happen to support other frameworks. Hopefully, this information will eventually make its way into the official docs.

Originally, I had 3 templates and when you ran wails init you could choose which one you wanted. However, to get the first release out the door I simplified it to just the Vue template.

How projects work

Project templates live in cmd/templates. During project init, that directory is scanned for directories containing template.json. If it only finds 1, then it defaults to this template. This is what's happening when you run wails init today.

template.json contains the following:

{
  "name": Template Name,
  "shortdescription": Description used when prompting for template during wails init,
  "description": A more complete description,
  "author": Informational,
  "created": Informational,
  "frontenddir": The relative path to your frontend code,
  "install": The command to run to install frontend dependencies,
  "build": The command to run to build the frontend,
  "serve": The command to serve up the frontend,
  "bridge": The directory to copy the bridge runtime
}

(This is likely to change slightly in the near future to support #88 -"bridge" will become "runtime").

When the template is copied over, it will create directories, copy non-template files then copy template files. Template files end in .template and will simply substitute values based on the Project Options.

Where we are at

The one complication currently, is that those templates are read from an asset pack. The reason for this is because we create a binary release for github. I'm deprecating this. Now that we have a better update mechanism, I want to revert to old behaviour which is to read that data from the project directory. It's not much work to do but it may be a few days.

The workaround for developing templates is simply this:

• Add your project directory to cmd/templates
• Make sure you have a valid template.json
• cd cmd
• mewn
• cd wails
• go install

This will update the embedded template and make it work. It's a horrible workaround that I intend to fix as a priority for the next release. Let me know if you have issues!

[leaanthony]

Happy to report that as of today, this is now entirely possible. Please update to v0.14.4-pre: wails update -pre.
If only one template is available, then it will be selected by default. Add your templates to cmd/templates and they will be picked up (if you have a valid template.json file).
Let me know if you have issues!

[leaanthony]

@lanzafame if you are happy you can create a new template then please close this ticket 👍

[leaanthony]

@lanzafame - you will be happy to know that there is now Developer Tooling to support generation of new project templates. Let me know how you get on and feel free to close this issue ;-)

[lanzafame]

@leaanthony do you mean @luizfonseca?

[leaanthony]

I really did...😂

[leaanthony]

@luizfonseca React template iiiiiiiincoooooommmiiiing :-)

[bh90210]

I hope I finished the integration with React first, so much work to come second :smile: I should have looked at the tickets though...

@luizfonseca how is the Svelte template going? Svelte indeed looks really cool.

[lobre]

I would love to see Svelte as an option to Wails as well! I know the thread is kinda old but would it make sense to reopen / open a new issue to track this?

And another general question on frameworks: would it be feasible to have a pure JS setup without any specific framework?

I don't know if it makes sense but having a really light and simple option for really basic apps could be useful if people don't know any of the proposed frameworks. This would maybe simplify the learning curve and allow more people in.

[goldcoders]

im looking for an svelte integration , anyone can share?