DEV Community

Cover image for Vite + Vue 3 + electron + TypeScript
Jenuel Oras Ganawed
Jenuel Oras Ganawed

Posted on • Edited on

Vite + Vue 3 + electron + TypeScript

#vue #electron #typescript #javascript

Their is a new post about this will full setup. check it here: https://dev.to/brojenuel/vue-3-vite-typescript-electron-my-full-setup-kgm

A lot of people have been asking how to do electron in vite vue 3 so here it is.

Step 1:

Were going to go straight a head and create a Vite project by running:

// run this and choose vue as your template,
// you can choose typescript or js. whatever you want.
yarn create vite
Enter fullscreen mode Exit fullscreen mode

Step 2:

Next cd to your project folder, and let as also add dependencies that we will need for our electron development and building.

yarn add -D concurrently cross-env electron electron-builder wait-on
Enter fullscreen mode Exit fullscreen mode

Be Sure to install all dependencies by running

yarn install
Enter fullscreen mode Exit fullscreen mode

Step 3:

Let us edit our package.json. Let us add build property. You can read more about this electron.build website.

 "build": {
    "appId": "com.my-website.my-app",
    "productName": "MyApp",
    "copyright": "Copyright © 2019 ${author}",
    "mac": {
      "category": "public.app-category.utilities"
    },
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true
    },
    "files": [
      "dist/**/*",
      "electron/**/*"
    ],
    "directories": {
      "buildResources": "assets",
      "output": "dist_electron"
    }
  }
Enter fullscreen mode Exit fullscreen mode

and then let us also add some scripts in our package.json

"scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "serve": "vite preview",
    "electron": "wait-on tcp:3000 && cross-env IS_DEV=true electron .",
    "electron:pack": "electron-builder --dir",
    "electron:dev": "concurrently -k \"cross-env BROWSER=none yarn dev\" \"yarn electron\"",
    "electron:builder": "electron-builder",
    "build:for:electron": "vue-tsc --noEmit && cross-env ELECTRON=true vite build",
    "app:build": "yarn build:for:electron && yarn electron:builder"
  },
Enter fullscreen mode Exit fullscreen mode

Let us also dont forget yo add author and main in our package.json file.

{
  "name": "vite-electron-app-test",
  "author": "BroJenuel",
  "version": "0.0.0",
  "main": "electron/electron.js",
  ...
}
Enter fullscreen mode Exit fullscreen mode

Step 4:

let us edit our vite.config.js or vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  base: process.env.ELECTRON=="true" ? './' : ".",
  plugins: [vue()]
})
Enter fullscreen mode Exit fullscreen mode

if we are running in electron production, the base will change.

Step 5:

Let us create a new folder and let us call it electron
inside this we will create an electron.js.

// electron/electron.js
const path = require('path');
const { app, BrowserWindow } = require('electron');

const isDev = process.env.IS_DEV == "true" ? true : false;

function createWindow() {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: true,
    },
  });

  // and load the index.html of the app.
  // win.loadFile("index.html");
  mainWindow.loadURL(
    isDev
      ? 'http://localhost:3000'
      : `file://${path.join(__dirname, '../dist/index.html')}`
  );
  // Open the DevTools.
  if (isDev) {
    mainWindow.webContents.openDevTools();
  }
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
  createWindow()
  app.on('activate', function () {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
});

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
Enter fullscreen mode Exit fullscreen mode

and create another file preload.js.

// electron/preload.js

// All of the Node.js APIs are available in the preload process.
// It has the same sandbox as a Chrome extension.
window.addEventListener('DOMContentLoaded', () => {
    const replaceText = (selector, text) => {
      const element = document.getElementById(selector)
      if (element) element.innerText = text
    }

    for (const dependency of ['chrome', 'node', 'electron']) {
      replaceText(`${dependency}-version`, process.versions[dependency])
    }
  })
Enter fullscreen mode Exit fullscreen mode

step 6: And your done 👍👍

Run yarn electron:dev to work with electron in development mode.

yarn electron:dev
Enter fullscreen mode Exit fullscreen mode

Run yarn app:build to build your electron app.

yarn app:build
Enter fullscreen mode Exit fullscreen mode

Run yarn dev to open vite in browser in development mode.

yarn dev
Enter fullscreen mode Exit fullscreen mode

Run yarn build to build files and can be served.

yarn build
Enter fullscreen mode Exit fullscreen mode

Hey! If you like to help me out, you can donate. Thanks :)

bmc-button

You can Check the Source Code in My Youtube Channel Git Repository:
https://github.com/BroJenuel-Youtube/vite-vue-electron

Top comments (22)

Collapse
 
rodrigoaraujolima92 profile image
rodrigoaraujolima92 •

very nice tutorial

Collapse
 
jenueldev profile image
Jenuel Oras Ganawed •

Thanks mate :)

Collapse
 
alex_gorbunov profile image
Alexander Gorbunov •

Thank you for your tutorial!:)
It helped me to configure dev environment for electron, though I'm not using ts😁

Collapse
 
jenueldev profile image
Jenuel Oras Ganawed •

awesome! Glad to help :)

Collapse
 
jimhucksly profile image
Dmitriy Nevezhin • • Edited

don't work!

(node:4232) electron: Failed to load URL: localhost:3000/ with error: ERR_CONNECTION_REFUSED
(Use electron --trace-warnings ... to show where the warning was created)

vite is not running after 'npm run electron'

Collapse
 
jenueldev profile image
Jenuel Oras Ganawed •

I redid what I wrote above, but still works... try re reading the instruction above,, specially the script in package.json

Collapse
 
frandev profile image
Franco •

This problem might be because vite port does not listen in port 3000 of local host. For fix it, see which port is vite running, and then, put it in the main.ts file

Image description

Image description

Collapse
 
mujtabalab profile image
mujtaba-lab • • Edited

I got stuck on this one too, here is how I got through:

Or use two separate terminal and run pnpm vite and pnpm dev:electron

"from the article"

Collapse
 
liu_li_77724758a124832e29 profile image
liu li • • Edited

Tanks! But i get some problem and could you help me?
With the demo i can run Vue3 + Vite in Electron but i can't use electron in xxx.vue

The code i write is copy what you write, the Demo.vue is what i write.

<script setup lang="ts">
// import { ipcRenderer } from 'electron'
// const x = window.require('electron')
const e = require('electron')

function handleGetDrives() {
    // ipcRenderer.send('on-get-drives', 1)
}
</script>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
dougkusanagi profile image
Douglas Lopes • • Edited

There is some details that changed on vite seems the creation of this post. You have to make some adjusts:

The main.js and preload.js file that controls electron shoud have now the extension cjs, so they should be renamed to main.cjs and preload.cjs because vite uses ES6 and this files don't.

// on package.json
// "vue-tsc --noEmit" should be now just "vite build"
// the tcp port used by vite is now 5173
"scripts": {
    "dev": "vite",
    "build": "vite build && vite build",
    "serve": "vite preview",
    "electron": "wait-on tcp:5173 && cross-env IS_DEV=true electron .",
    "electron:pack": "electron-builder --dir",
    "electron:dev": "concurrently -k \"cross-env BROWSER=none yarn dev\" \"yarn electron\"",
    "electron:builder": "electron-builder",
    "build:for:electron": "vite build && cross-env ELECTRON=true vite build",
    "app:build": "yarn build:for:electron && yarn electron:builder"
  },
Enter fullscreen mode Exit fullscreen mode 
// on main.js
// the tcp port used by vite is now 5173
mainWindow.loadURL(
  isDev
    ? 'http://localhost:5173'
    : `file://${path.join(__dirname, '../dist/index.html')}`
);
Enter fullscreen mode Exit fullscreen mode
Collapse
 
andrealupo profile image
Wolf Developer • • Edited

I had some troubles to make it work. Your article really helped me, the app is created with success!
However, I see in VS Code that both in electron.js and preload.js I have some errors, because the following are not defined: require, process, __dirname. Do you know a way to fix the problem? Or it's just a clashing configuration from tsconfig.json?
Thanks!

Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt •

It would be nicer if Electron itself is TypeScript as well.

Collapse
 
jenueldev profile image
Jenuel Oras Ganawed •

You can actually change it to typescript if you want.

Collapse
 
falcort profile image
Falcort •

As soon as I am trying to use IPC I have an __dirname is not defined in the web console, any solutions ?

Collapse
 
jenueldev profile image
Jenuel Oras Ganawed •

This video might help,,, its better to use something like context bridge in our preloadjs to create apis for our frontend. It is recommended by the electron documentation..
https://www.youtube.com/watch?v=h9rSUxZkEQw&list=PLwlbj033Wc51ZwPQx3bYO1eb2PProKgBX&index=6&t=617s

Collapse
 
falcort profile image
Falcort •

Thanks a lot, it worked !

Collapse
 
nolawnchairs profile image
Michael Wieczorek •

Unfortunately, your tutorial whilst uses TS for the renderer, your main process code is only in JS. Anyone who's writing a desktop app would want TS for both renderer and main process. How to use TS for this and using module aliases?

Collapse
 
rgehrsitz profile image
robertg •

It worked perfectly. Thanks!

Collapse
 
jenueldev profile image
Jenuel Oras Ganawed •

Im Glad I could help :)

View full discussion (22 comments)

Read next

aralroca profile image

Brisa 0.2.0 Release Notes

Aral Roca -

shavonharrisdev profile image

Understanding K Element Patterns in LeetCode: The Basics (Part 1)

Shavon Harris -

abhay_yt_52a8e72b213be229 profile image

Mastering Redux Toolkit: Simplify State Management in Your React App

Abhay Singh Kathayat -

iprogrammer_solutionspvt profile image

Progressive Web Applications: Your Ultimate Guide to Modern Web Development

iProgrammer Solutions Pvt. Ltd. -