Home » Web Development » Electron » Create Electron Desktop Application With ReactJS, Babel and Webpack Tutorial

Create Electron Desktop Application With ReactJS, Babel and Webpack Tutorial

In this post, we’ll learn how to create an Electron application that uses React as the JavaScript library.  If you haven’t used Electron before then it would be best to go through the tutorials – Getting Started with Electron Development Tutorial and Create Your Own Electron Desktop Application Tutorial.

These tutorials will identify what needs to be installed and various tools that you will need.

Additionally, you should also refer to the online training that I mentioned in the React JavaScript Library Training Reference post.  This tutorial assumes you know at least a little about React so it only touches on the parts for integrating React with Electron and the tool-chain to compile your applications.

Overview

Before we start creating our project here’s an overview of the files that we will be creating.

toolchain

File or Module Usage
package.json Defines the modules to include and the starting file
main.js Contains the Electron and NodeJS code.
index.html Plain old HTML that also uses a script tag to include the bundle.js file
bundle.js JavaScript file that is generated by Webpack and Babel
webpack.config.js input file for the Babel and Webpack compilation step
babelAndWebpack This encompasses the Babel and Webpack modules that are downloaded using npm
app.js file that contains the React code

Create the Project Folder

As is customary in my tutorials, start by creating a folder to contain your work:

c:\_\my-electron-projects\first-electron-react-project

Create package.json file

Run the following command to create the package.json from the first-electron-react-project folder.

Install WebPack

From the first-electron-react-project folder run the following command to install the Webpack components.

 

Install Babel

From the first-electron-react-project folder run the following command to install the Babel components.

 

Install React

From the first-electron-react-project folder run the following command to install the React components.

 

Install ReactDOM

From the first-electron-react-project folder run the following command to install the ReactDOM components.

Review Package.json File

At this point, your package.json file should look as shown below.

We need to add a couple of items to the scripts array so we can use babel and webpack more easily.  Also, as I have already done in the snippet shown above, I updated the author and the license values.

Create webpack.config.js File

This step is largely a copy/paste step.  In the folder first-electron-react-project create a file called webpack.config.js with the following contents:

Create app.js File

You might’ve noticed that the app.js file is referenced in the webpack.config.js file.  This reference tells React what file is serving as the entry point.  Also, if you look in this same file, you’ll see the bundle.js is defined.  This is the output file where the compiled React code will be placed.

In the folder first-electron-react-project create a file called app.js with the following contents…

Create index.html File

In the folder first-electron-react-project create a file called index.html with the following contents…

What of note here is the script tag that includes bundle.js.  If you refer back to our webpack.config.js file you’ll find a reference to bundle.js as the output.

Although this tutorial assumes you know React, it might be worth mentioning here that the code that you wrote in the app.js is called JSX and browsers can’t use JSX directly.  The JSX code must be submitted to a compiler that outputs generic JavaScript that most browsers understand.  That’s what Babel is doing for us.  When Babel creates the JavaScript, the WebPack then packages up the compiled artifacts into bundle.js.  We then only need to reference bundle.js in our HTML pages.

Compiling

We have everything we need so we can begin the compilation process by entering the command…

You will see something like the following as the output:

If you look in the first-electron-react-project you’ll find the bundle.js file was created.

Test the Compile

To see if the compile worked, open the file index.html via a browser and you should see:

react-webpage-v2

Of course, this doesn’t accomplish the goal of this tutorial because we haven’t included Electron which we will do now.

Install Electron

From the first-electron-react-project folder run the following command to install the Electron components.

 

Create main.js File

The main.js file will contain our Electron and NodeJS statements and will load the index.html file.

The index.html in turn, will load the bundle.js file that was created by the compilation of our React code by the Babel and Webpack tools.

The main.js file has the following contents…

On line 15, you’ll notice the reference to our index.html.

Update package.json to use main.js

Edit your package.json and modify/add the following lines…

On line 5, we identify main.js as the file that Electron uses.

Compile with Electron

Actually, there’s no compilation required at this point because the bundle.js file already exists and we have’t made any changes to app.js that would require a recompilation.

Note though, that if we did make changes to app.js then we would need to run the “npm run webpack” command.

Run Electron

To start Electron enter the following command from the folder first-electron-react-project

electron-react

Summary

You have a complete working starter project that uses Electron for the front end framework and ReactJS for the JavaScript library.  You also know how to compile each of the modules so you can work effectively.