Create Desktop App With Electron And React

Posted By : Shashwat Gupta | 27-Mar-2018

 

 

 

 

 

 

 

Electron-React-Desktop app

 

 

This Application is based on ReactReduxReact Router Technologies

Electron Boilerplate Demo

Install

  •  node version requires bigger than 7 and an npm version requires bigger than 4.

Firstly, clone the git repos.

git clone --depth=1 https://github.com/chentsulin/electron-react-boilerplate.git project-name

And then you must  install dependencies with yarn or npm

$ cd project-name
$ yarn

Note: If you are not useing yarn, run npm install.

 

 

 To Run this application

 

$ npm run dev

Alternatively, and manully way to run app

$ npm run start-renderer-dev
$ npm run start-main-dev

 

 

Make build of app

To package apps for the local platform:

$ npm run package

To package apps for Linux platforms:

 

$ npm run package-linux

 

To package apps for Mac platforms:

$ npm run package-mac

 

To package apps for Windows platforms:

$ npm run package-win

To run End-to-End Test

$ npm run build
$ npm run test-e2e

 

DEBUG_PROD=true npm run package

 

Manually Way

 

You have to install create-react-app template via terminal

npm install -g create-react-app
create-react-app your-app
cd your-app

 

create main.js file .. put below content into there

// ./main.js
const {app, BrowserWindow} = require('electron')

let win = null;

function createWindow() {
  // Initialize the window to our specified dimensions
  win = new BrowserWindow({width: 1000, height: 600});

  // Specify entry point
  win.loadURL('http://localhost:3000');

  // Show dev tools
  // Remove this line before distributing
  win.webContents.openDevTools()

  // Remove window once app is closed
  win.on('closed', function () {
    win = null;
  });
}


app.on('ready', function () {

  createWindow();

});

app.on('activate', () => {
  if (win === null) {
    createWindow()
  }
})

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

 

Ref :

1: https://medium.freecodecamp.org/building-an-electron-application-with-create-react-app-97945861647c

2:  https://medium.com/@kitze/%EF%B8%8F-from-react-to-an-electron-app-ready-for-production-a0468ecb1da3

3:  https://github.com/chentsulin/electron-react-boilerplate

 

 

 

 

Request for Proposal

Recaptcha is required.

Sending message..