Building Desktop Apps with React and Electron

Building Desktop Apps with React and Electron

Begin with a Template that is Sane Production-grade applications usually end up with a complicated folder structure, but for starters, I will create a src/ folder and move index.html and renderer.js, renamed as index.js

A few months ago I got exposed to Electron by building a blockchain app, and beyond the basic examples that are provided by the original Electron team, I encountered only grief!

I was trying to combine Electron with popular frameworks like ReactandAngular, with a preference to the first due to its simplicity, and although there are many popular boilerplates, I could not find what I wanted. My main problem was this: They all used the native react tools to generate a project and retro-fitted Electron afterward. What you ended up with was a standard client-server architecture with a development server needed to serve the pages as if it was a web app… only it wasn’t! The result, and you can use any of the links above to see this, was that once you fired a simple:

const p = fetch('https://google.com');

You got an error in the console:

Fetch API cannot load https://google.com/. Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Now, that is correct, and should be expected, if you are running a web app inside a browser asit prevents a form of hacking called cross site scripting by restricting “Ajax” calls to the domain the page was served from. Electron apps, on the other hand should not have such restrictions, and the running of a web server as a separate process is totally useless and can only lead to confusion.

So, frustrated with what I found, I built my own: Electrate, and here I will show you how I did it.

Begin with a Template that is Sane

The good people form Electron have provided a great starting point in the form of a simple template. Clone it on your local repo

git clone https://github.com/electron/electron-quick-start my-app
cd my-app
npm install
npm start

This will give us an elementary template with no build scripts but with the base code to get an Electron app running. Production-grade applications usually end up with a complicated folder structure, but for starters, I will create a src/ folder and move index.html and renderer.js,renamed as index.js. I will create an index.css and link it to the html. Finally, add an app container div.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="./index.css">
    <title>Electrate</title>
  </head>
  <body>
    <div id="app">
    </div>
    <script src="./index.js"></script>
  </body>
</html>

With a small change to main.js so that it points to the correct file:

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

We can now run the application from NPM

npm run start # or npm start

Transpiling ES6 with Babel 7

As most of React user code is written in a format called JSX, we first need to add Babel so we can compile it down into standard Javascript.

npm i @babel/core --save-dev # this will install babel 7.0 

Babel works through presets, which also need installing:

npm i @babel/preset-env @babel/preset-react --save-dev

When it runs, it looks for its configuration in a file named .babelrc, so create in on the root and add:

{ "presets": ["@babel/env", "@babel/react"] }

Babel needs to run before any code executes and the best way schedule that is through a build tool. My preference is Gulp, although you could use any other.

npm i gulp gulp-babel --save-dev # basic gulp
npm i gulp-concat gulp-clean-css --save-dev # plugins

The idea is to compile all the files that exist in our source directory into plain old Javascript and move them into a single folder.

This is image title

When Electron runs it reads from package.json and looks for the “main” key. It runs the file that is included there so we will set it to point to the place where main will be moved after compilation

"main": "app/main.js",

This main script will create the window that will load the index.html which in turn will call our first JS file that will inject the React app.

Create a gulpfile.js at the root of your project and add the tasks

const exec = require('child_process').exec;
const gulp = require('gulp');
const babel = require('gulp-babel');
const css = require('gulp-clean-css');
// 1. Copy the index.html as is
gulp.task('html', () => {
    return gulp.src('src/index.html')
        .pipe(gulp.dest('app/'));
});
// 2. Compile CSS file and move them to the app folder
gulp.task('css', () => { // 2.
    return gulp.src('src/**/*.css')
        .pipe(css())
        .pipe(gulp.dest('app/'));
});
// 3. Compile JS files and move them to the app folder
gulp.task('js', () => { // 3.
    return gulp.src(['main.js', 'src/**/*.js'])
         .pipe(babel())
         .pipe(gulp.dest('app/'));
});
// 4. Start the electron process.
gulp.task('start', gulp.series('html', 'css', 'js', () => { // 4.
    return exec(
        __dirname+'/node_modules/.bin/electron .'
    ).on('close', () => process.exit());
}));

This task (start) will be run from npm and through the package.json

"scripts": {
  "start": "gulp start"
},

Finally Adding React.js

Now we are ready to add React.

npm i react react-dom --save-dev

Let’s create our basic app container file as a React Component in app.js.

import React from 'react';

export default class App extends React.Component {
    render() {
        return <div><h2>Hello Electrate</h2></div>;
    }
}

The index.js file will inject the base component into the body:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './app.js';

window.onload = () => {
    ReactDOM.render(<App />, document.getElementById('app'));
};

Just for clarity, what we have ended up doing is this:

This is image title

Packaging the app

There are mainly two options for packaging an Electron app and we will go with the second, Electron Builder (the other being Electron Packager).

npm i electron-builder --save-dev

For this tool we need to create a build folder where we will put our our app icon. We need to point the tool to the folder with the code to be compiled through the package.json by adding:

"build": {
  "appId": "com.karmadust.electrate",
  "files": [
    "app/**/*",
    "node_modules/**/*",
    "package.json"
  ],
  "publish": null
}

Then we will call it after we have compiled and moved the files there through gulp. So in your .gulpfile add:

gulp.task('release', ['copy', 'build'], () => {
    return exec(        
        __dirname+'/node_modules/.bin/electron-builder .'
    ).on('close', () => process.exit());
});

Through npm:

"scripts": {
  "postinstall": "install-app-deps",
  "start": "gulp start",
  "release": "gulp release"
},

Adding Livereload

It would be a shame if we left our template without an autoreload. So let’s add gulp-livereload plugin. Have a look at the project files to see how it’s set up.

reactjs Electron javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Electron & React JS: Build a Native App with Javascript,

In short? Electron JS is a framework for creating native applications with web technologies like Javascript, Html & CSS. Yes — you heard that right, you can use HTML to create awesome native applications that can run across multiple platforms including macOS, Windows, and Linux. Many popular applications like Visual Studio Code, Slack, Discord, Twitch, and WhatsApp are created in Electron.

The essential JavaScript concepts that you should understand

The essential JavaScript concepts that you should understand - For successful developing and to pass a work interview

What is ECMAScript and How is it Different From JavaScript?

Many times developers use JavaScript and ECMAScript synonymously for each other. Though they are very closely linked to each other, it does not mean they are the same thing.here is a complete story on the history of JavaScript and how it came into existence. To cut the long story short, ECMA in ECMAScript refers to Europen Computer Manufacturers Association to which JavaScript 1.1 was submitted for standardization back in the year 1997.

Electron From Scratch: Desktop Apps With JavaScript

Electron From Scratch: Build Desktop Apps With JavaScript. Create 3 useful desktop applications with web technologies using Electron. Learn how to build desktop apps with Electron. Use Vanilla JS & React with Electron. Work with local data as well as MongoDB Atlas database. Create and package 3 complete cross-platform applications

How to Build Desktop App with JavaScript Using Electron

This Electron.js tutorial explains how to build Desktop App with JavaScript using Electron. Build a desktop application using Electron.js which allows us to build desktop apps using only JavaScript. Build an Electron App in Under 60 Minutes