How to Set Up an Electron.js Project with React, Vite, Tailwind CSS, and TypeScript

Introduction

In this guide, you’ll learn how to set up a modern Electron.js project using React, Vite, Tailwind CSS, and TypeScript. We’ll walk through each step to create a well-structured project that leverages the best tools for building desktop applications with a web technology stack.

Prerequisites

Before we start, make sure you have the following installed on your machine:

• Node.js: You can download it from nodejs.org.
• npm or yarn: These come with Node.js, so you should already have them.

Step 1: Create the Project Folder Structure

First, create a new directory for your project. Inside this directory, we’ll have two main folders: one for the Electron setup and another for the frontend (React) setup.

1. Open your terminal and navigate to the location where you want to create your project.
2. Run the following commands:bashCopy codemkdir ibex-simulator cd ibex-simulator mkdir frontend

Step 2: Set Up the React Project with Vite

Next, we’ll create the React app inside the frontend directory using Vite.

1. Navigate to the frontend directory:bashCopy codecd frontend
2. Create a new Vite project:bashCopy codenpm create vite@latest
3. Follow the prompts to set up your project:
   • Project name: frontend
   • Select a framework: React
   • Select a variant: TypeScript
4. Install the dependencies:bashCopy codenpm install

Step 3: Add Tailwind CSS

Now, let’s add Tailwind CSS to style your React components.

1. Install Tailwind CSS:bashCopy codenpm install -D tailwindcss postcss autoprefixer
2. Initialize Tailwind CSS:bashCopy codenpx tailwindcss init -p
3. Configure Tailwind by editing the tailwind.config.js file:javascriptCopy code/** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx}", ], theme: { extend: {}, }, plugins: [], }
4. Add Tailwind directives to your CSS file:In src/index.css, replace the content with:cssCopy code@tailwind base; @tailwind components; @tailwind utilities;

Step 4: Set Up Electron in the Root Directory

Now, let’s set up Electron in the root of your project.

1. Navigate back to the root directory:bashCopy codecd ..
2. Initialize a new Node.js project:bashCopy codenpm init -y
3. Install Electron and development tools:bashCopy codenpm install --save-dev electron concurrently cross-env electron-builder

Step 5: Create main.js for Electron

Create a main.js file in the root directory. This file will manage the Electron window.

1. Create main.js:bashCopy codetouch main.js
2. Add the following code to main.js:javascriptCopy codeconst { app, BrowserWindow } = require('electron'); const path = require('path'); function createWindow() { const mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: path.join(__dirname, 'preload.js'), }, }); if (process.env.NODE_ENV === 'development') { mainWindow.loadURL('http://localhost:5173'); } else { mainWindow.loadFile(path.join(__dirname, 'dist/index.html')); } } app.on('ready', createWindow); app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit(); } }); app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow(); } });

Step 6: Modify package.json Scripts

Update the package.json in the root directory to include scripts for running and building the project.

1. Open the package.json file and update the scripts section:jsonCopy code"scripts": { "start": "electron .", "dev": "concurrently \"npm run dev-frontend\" \"cross-env NODE_ENV=development electron .\"", "dev-frontend": "npm run dev --prefix frontend", "build": "npm run build-frontend && electron-builder", "build-frontend": "npm run build --prefix frontend" }

Step 7: Run the Project

Now, let’s run the project to see everything in action.

1. From the root directory, run:bashCopy codenpm run dev
2. This will:
   • Start the Vite development server in the frontend directory.
   • Launch Electron and load your React app in an Electron window.

Step 8: Create and Display a Simple React Component

Here’s an example of a basic React component.

1. In frontend/src/App.tsx, replace the content with:typescriptCopy codeimport React from 'react'; import './App.css'; function App() { return ( <> <h1 className="text-2xl font-bold text-center text-blue-600">Khan Sab</h1> </> ); } export default App;
2. Tailwind CSS styles are applied to make the text bold, centered, and blue.

Conclusion

Congratulations! You’ve successfully set up an Electron.js project with React, Vite, Tailwind CSS, and TypeScript. This setup gives you a powerful environment for building cross-platform desktop applications with modern web technologies.