Creating Desktop Application Using React, Electron and NodeJS

JavaScript is everywhere these days. There are so many existing web technologies that allow developers to create web applications efficiently and as quickly as possible. Building UI for web is almost effortless with the use of CSS and JavaScript here and there.

On the contrary, building UI for Desktop Based Application is a bit of demanding. There are great tools available, but often codebases become complicated to deal with, and creating a responsive design takes a lot of work.

But why do GUI applications are so complicated to develop? What if we could use JavaScript for the development of Desktop Based Applications? Yes it is possible! And to achieve this, we will be developing a React Based Web Application on top of Electron in this blog.

Electron is relatively new library, developed by GitHub for developing cross platform desktop based applications and React is a JavaScript library, developed by Facebook for building user interfaces.

For developing a simple application with React and Electron, start with downloading the latest version of node.js from https://nodejs.org/en/download/current/

Create file package.json in root folder and add following configuration in it.

{
 "name": "my-first-app",
 "version": "0.1.0",
 "main": "main.js"
}

Execute the following commands in command prompt

npm install electron electron-rebuild --save
npm install react react-dom --save
npm install webpack webpack-dev-server --save-dev
npm install babel babel-core babel-loader babel-preset-react --save-dev

After installing the above mentioned packages, create a folder “public” in the root directory and create index.html in it.

<!DOCTYPE html>
<html>
	<head>
		<title>My First Electron-React app</title>
	</head>
	<body>
		<div id="content"></div>
	</body>
	<script src="http://localhost:8080/webpack-dev-server.js"></script>
	<script src="http://localhost:8080/built/bundle.js"></script>
</html>

And then create a main.js in the root directory:
var electron = require('electron');
var app = electron.app;
var BrowserWindow = electron.BrowserWindow;

app.on('window-all-closed', function() {
	if (process.platform != 'darwin') {
	app.quit();
  	}
});

app.on('ready', function() {
	var mainWindow = new BrowserWindow({width: 1360, height: 800});
	mainWindow.loadURL('file://' + __dirname + '/public/index.html');
	mainWindow.openDevTools();
	mainWindow.on('closed', function() {
		mainWindow = null;
	  });
});

After the creation of main.js and index.html, we will create webpack.config.js with the following content in root folder.

var webpack = require('webpack');
module.exports = {
	entry: {
		app: ['webpack/hot/dev-server', './js/entry.js'],
	},
	output: {
		path: '/public/built',
		filename: 'bundle.js',
		publicPath: 'http://localhost:8080/built/'
	},
	devServer: {
		contentBase: '/public',
		publicPath: 'http://localhost:8080/built/'
	},
	module: {
		loaders: [
			{ test: /\.(js|jsx)$/, loader: 'babel-loader', exclude: /node_modules/, query: { presets:['react'] } },
			{ test: /\.css$/, loader: 'style-loader!css-loader' }
 		]
	},
	plugins: [
		newwebpack.HotModuleReplacementPlugin()
	 ]
}

Basically, we’re telling webpack it should watch for changes with webpack-dev-server, and that the start of our JavaScript code will be at javascripts/entry.js (It’ll watch for any changes in entry.js and any of the files it includes, except for those that are ignored).

After that, we will create out start point of the app i.e. entry.js in root directory with the following content.

'use strict';

import React from "react";
import ReactDOM from "react-dom";

const element = <h1>Hello world!!</h1>;
console.log("ReactDOM", ReactDOM);
ReactDOM.render(
	element, 
	document.getElementById('content')
);

So, instead of running all the commands we need by hand, let’s create some npm scripts to do it for us. Include the following in your package.json:

"scripts": {
  "start": "./node_modules/.bin/electron .",
  "watch": "./node_modules/.bin/webpack-dev-server",
  "electron-rebuild": "./node_modules/.bin/electron-rebuild"
 }

To run the application, execute the following scripts in command prompt

npm run-script watch

This starts our webpack-dev-server to watch and reload our code. Open up a new terminal, navigate to the project directory, and run:

npm start

And with this, we are done with the creation of our first application with React and Electron!

Definitions:

webpack is a node module that compiles Node.js code into browser-executable JavaScript.
webpack-dev-server allows a browser to reload whenever you change your code.
The babel-* modules will transpile ES6 code and JSX into ES5. This is a really cool feature as it can all be automated in real-time.

Creating Desktop Application Using React, Electron and NodeJS

Posted by: Blog Post December 21, 2017

COMMENTS ()

Blog Post

CALL

EMAIL

VISIT

Contact us