Mastering Electron with React, TypeScript & Webpack for Seamless Desktop Apps

Building modern desktop applications has never been easier thanks to Electron, which lets you combine the power of web technologies with native capabilities. In this guide we walk through the essential steps to integrate React, TypeScript, and webpack, ensuring a smooth development experience from start‑up to production.

Electron is defined as a framework that enables developers to create native‑like desktop applications using HTML, CSS, and JavaScript.

Understanding the Dual Build Architecture

Electron runs two distinct processes:

• Main process – controls the application lifecycle and native OS interactions. It requires a webpack bundle with the electron-main target.
• Renderer process – hosts the UI, typically built with React. This bundle uses the web or electron-renderer target.

Keeping these builds separate ensures optimal performance and clear separation of concerns.

Setting Up the Development Environment

Follow these steps to get started:

1. Install Node.js (>=14) and verify with node -v.
2. Initialize a new project: npm init -y.
3. Add core dependencies:
   • electron
   • react & react-dom
   • typescript & @types/react
4. Install dev dependencies for bundling:
   • webpack, webpack-cli, webpack-dev-server
   • ts-loader and babel-loader (for JSX)
   • html-webpack-plugin
5. Create tsconfig.json and set "jsx": "react-jsx" under compilerOptions.

Configuring Webpack for Main and Renderer

Two separate configuration files keep the builds clean:

• webpack.main.config.js – target electron-main, entry point src/main.ts, output to dist/main.js.
• webpack.renderer.config.js – target electron-renderer, entry point src/renderer.tsx, output to dist/renderer.js.

Important tips:

• Set mode from process.env.NODE_ENV instead of hard‑coding.
• Include .js in resolve.extensions because many node_modules packages ship JavaScript files.

Development Workflow and Hot Reload

During development, launch the webpack dev server on localhost:3000. In main.ts, point the Electron BrowserWindow to this URL:

mainWindow.loadURL('http://localhost:3000');

When you modify React components, webpack‑dev‑server refreshes the renderer instantly, while the main process can be restarted using nodemon or a custom script.

Packaging for Production

For a release build, run webpack with mode: 'production'. This generates static assets in dist/. Update the main process to load the local index.html:

mainWindow.loadFile(path.join(__dirname, 'index.html'));

Finally, use electron-builder (or electron-forge) to package the app for Windows, macOS, and Linux. The builder reads the package.json configuration and produces installer files ready for distribution.

Frequently Asked Questions

Do I need two separate webpack configs?

Yes. The main process runs in a Node environment, while the renderer runs in a Chromium context. Separate configs allow you to target electron-main and electron-renderer respectively.

Can I use only JavaScript instead of TypeScript?

Absolutely. However, TypeScript adds static typing, which reduces runtime errors and improves IDE assistance—especially valuable in larger Electron projects.

How do I enable hot module replacement (HMR) for the renderer?

Configure webpack-dev-server with hot: true and add the react-refresh-webpack-plugin. This refreshes React components without a full page reload.

What’s the best way to manage native modules?

Install native dependencies (e.g., sqlite3) after the Electron version is fixed, then rebuild them using electron-rebuild to match Electron’s Node ABI.

Is it safe to ship source maps in production?

Generally avoid exposing source maps publicly, as they can reveal implementation details. Configure webpack’s devtool to source-map only for internal builds.

Neptune Infotech can help you accelerate your cross‑platform desktop projects with expert Electron, React, and TypeScript development.