Start a New Electron App With React and TypeScript

Build your first desktop app today

Photo by João Silas on Unsplash

What is Electron?

Electron is a framework for creating native applications. It’s open-source and cross-platform. If you already know Javascript, HTML, and CSS, you can build an application with electron.

In this tutorial, I’ll show you how to start an electron project from scratch using webpack, React, and Typescript.

Start With Electron

Let’s start by creating a new folder and a new npm project.

mkdir electron-react-ts
cd electron-react-ts
npm init -y

Now, install these dependencies.

npm install --save-dev electron \
webpack webpack-cli webpack-dev-server \
babel-loader @babel/core @babel/preset-env \
@babel/preset-react @babel/preset-typescript

Create a tsconfig.json file. This allows you to specify the configuration for the typescript compiler.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "lib": [
      "dom",
      "es2015",
      "es2016",
      "es2017"
    ],
    "allowJs": true,
    "jsx": "react",
    "sourceMap": true,
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
  }
}