max-vasin/resolve-electron-app

A simple reactive ToDo app that uses ReSolve and Electron frameworks

Fast start

Install Electron Forge globally

npm install -g electron-forge

when clone this repo and run

npm install
npm run dev
electron-forge start

Wrapping reSolve project to Electron desktop application

Electron is a framework for creating native applications with web technologies like JavaScript, HTML, and CSS. In this small tutorial we create reSolve application and run it within Electron framework.

Creating new reSolve application

The simplest way to create reSolve application is to use CLI named create-resolve-app.

npm install -g create-resolve-app

Create new application from example:

max$ create-resolve-app resolve-electron --example todo-two-levels

Importing reSolve application to Electron environment

Electron provides various tools for initializing new applications or importing/converting existing projects. We use one of the popular CLI tools for Electron - Electron Forge.

npm install -g electron-forge

Electron Forge have import to wrap existing projects with Electron framework.

electron-forge import resolve-electron

Its interactive command, but we need to override only main key in package.json to electron/index.js:

? Do you want us to change the "main" attribute of your package.json?  If you are currently using babel and pointing to a "build" directory say yes. Yes
? Enter the relative path to your uncompiled main file electron/index.js

Create Electron entry point

Unfortunately Electron Forge does not add new Electron index file during import command. So we need to create one. This file can be copied from new Electron Forge project created with init command. For now you can create this file manually as electron/index.js (create electron directory first). Please notice, that mainWindow.loadUrl method argument should load URL http://localhost:3000 where running reSolve development server.

import { app, BrowserWindow } from 'electron';

if (require('electron-squirrel-startup')) { // eslint-disable-line global-require
    app.quit();
}

let mainWindow;

const createWindow = () => {
    // Create the browser window.
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
    });

    // Load reSolve web application
    mainWindow.loadURL(`http://localhost:3000`);

    mainWindow.webContents.openDevTools();

    mainWindow.on('closed', () => {
        mainWindow = null;
    });
};

app.on('ready', createWindow);

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

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

Ready to launch

Now everything is ready. Firstly start reSolve development server with

npm run dev

This command should run local backend server and open browser page pointed to http://localhost:3000

Build and run Electron application

electron-forge start

Try to add ToDo lists and items with both browser and desktop application to test reactivity provided by reSolve app.