Search code examples
electronelectron-packager

How to build a electron app from an built HTML(dist)?


I have been searching the internet but I couldn't find an answer. I just want to find out if I could use the built HTML.

To make things clear. I created a vue-CLI project. I created a built HTML by running an npm run build.

Running the npm run build will create a dist folder with an index HTML, and its needed resources.

Now I would like to add this in electron. Is this possible?


Solution

  • If your project is client-side html only, then it is ready to go: just use one of the minimal Electron examples, and set your index.html as the start page.

    If it is connecting to a back-end server (e.g. to access a database), it can still do that, but it means the application won't be able to run offline.

    It is worth considering why you want an Electron app, instead of just having a web app. E.g. Are you hitting any security restrictions or other limitations of a web app, that a desktop app does not have? If not, packaging as an Electron app might just be effort spent on something that no-one wants or needs.

    As you've built with vue-cli, it might be worth looking at Quasar Framework which is a wrapper for Vue that comes with Electron and Mobile targets ready to go. You don't actually have to use any of their UI components to get this.