How can you pack up your Electron proyect in windows?

JuanFran — Fri, 23 Aug 2024 16:53:56 +0000

To pack up your Electron proyect in windows, you will need to install a dependency in a electron proyect still created.

This dependency is called electron-builder. The installation command it is the following:

npm install --save-dev electron-builder

Secondly, it is necessary make a build of our proyect so you need to execute this command:

npm run build:win

Thirdly, if you want to pack up your proyect, you will put in file package.json, in the section scripts this script:

"electron-pack": "npm run build && electron-builder"

Finnaly, for pack up your proyect, you will execute this command:

npm run electron-pack

The installer it will be installed in the dist directory and the name of your aplication installer it will be something like this name [your_electron_proyect_name]-[version]-setup.exe.

For install your app in your device you only need to click in the file named before and it will be installed in your Desktop directory.

Build a desktop app with Electron + Vite + React EASYLY

JuanFran — Tue, 13 Aug 2024 16:37:15 +0000

To create a Electron proyect with Vite and React desktop app you can to create it in two ways:

Electron quick-start
Vite

Electron @Quick-Start

Instalation

For create a desktop app with Electron + Vite + React with electron quick-start you need to execute this command:

npm create @quick-start/electron [your_proyect_name]

In the next option you need to choose the frontend framework and in this case you will choose React:

In this case, we don't want use Typescript so we won't add it. We will select the option No:

We don't want the updater plugin so we will select No:

And we don't want the electron dowload mirror proxy so we will select No:

Finally, you have your electron proyect with Vite and React created by Electron @Quick-start.

Vite

Instalation

For create a desktop app with Electron + Vite + React with Vite you need to execute the same command for create a Vite proyect:

npm create vite@latest [your_proyect_name]

Now in the frameworks options you will choose Others:

In the next option you will can choosing beetwen build a electron proyect with vite or build a vite proyect with other framework and in this option you will choose create-electron-vite:

Now you need to select the framework frontend for you electron proyect: Vue, React or Vanilla. In this case you will select React:

Finally, you have your electron proyect with Vite and React created by Vite.

The configuration and launching, it is the same like a react proyect

Configuration

npm i

AND

npm install

Launching

npm run dev

RESULTS

Electron proyect created by Electron quick-start:

Electron proyect created by Vite:

DEV Community: JuanFran

How can you pack up your Electron proyect in windows?

Build a desktop app with Electron + Vite + React EASYLY

Electron @Quick-Start

Instalation

Vite

Instalation

Configuration

Launching

RESULTS