Skip to content

ilshookim/simple-electron-nodejs-flutter-web

Repository files navigation

simple-electron-nodejs-flutter-web

A simple Electron application using NodeJS middleware with Flutter web and Dart.

Screenshot Home

This project name is wapui (web application platform for ui).

  • electron release application to MacOS, Linux and Windows (electron: version 21)
  • npm managing scripts supported (npm: version 8)
  • node.js middleware integrated (node: version 16)
  • flutter web integrated (flutter: version 3)
  • internalization supported (flutter: en, ko)
  • loading spinning animation and status supported (electron: index.html)
  • hiding electron menu supported (electron: index.html)
  • debugging mode in settings (flutter web)
  • copy status and information to clipboard (flutter web)
  • play video both of local url and remote url (flutter web)
  • logging to browser console log and transfer to nodejs middleware (flutter web)
  • logging to specified log file (nodejs middleware)
  • restful API supported (nodejs middleware)
  • sqlite3 database integrated (nodejs middleware)
  • and so on

This project shows you the below.

  • how to interaction between flutter web and nodejs middleware
  • how to payload relays between websocket in flutter web and serial port in nodejs middleware
  • how to payload publication/subscription between websocket module and serial module using localbus in nodejs middleware
  • how to use static data and stream data in flutter web using flutter provider pattern
  • how to expose restful api in middleware and to use api in flutter web
  • how to show process steps using timer and animation in flutter web
  • how to play video both of local url and remote url in flutter web
  • how to show chart converted from csv format data in flutter web
  • how to show file dialog and read data from file in flutter web
  • how to read and show version in pubspec.yaml and package.json
  • how to debugging and logging in middleware or flutter web
  • how to use sqlite3 local database in middleware

Screenshots

Screenshot Video Screenshot Report Screenshot Process Screenshot Settings

Architecture

Flutter Framework

- /lib                  # flutter web
- /lib/main.dart        # main of webapp
- /lib/home.dart        # home page
- /lib/process.dart     # process pages (example: video play, process steps)
- /lib/reports.dart     # reports page
- /lib/settings.dart    # settings page
- /lib/data.dart        # data to serial, config/websocket
- /lib/api.dart         # request api/response to cache

Electron Framework

- /web                 # electron framework
- /web/index.html      # html page to loading flutter web and loading animation
- /web/index.js        # electron main to loading nodejs middleware

Middleware (Electron Framework using NodeJS)

- /web/middleware               # integrate to nodejs
- /web/middleware/index.js      # (middleware module: http/websocket listen to 8090)
- /web/middleware/knexfile.js   # sqlite3 local database info
- /web/middleware/db              # DB migration/seeding
- /web/middleware/db/data.sqlite3 # DB file
- /web/middleware/db/index.js     # (DB module)
- /web/middleware/db/migrations   # create to initial tables
- /web/middleware/db/seeds        # insert to initial values
- /web/middleware/server          # api/ws server
- /web/middleware/server/index.js # (server module)
- /web/middleware/server/api           # restful api expose and localbus service
- /web/middleware/server/api/index.js  # (api/ws module)
- /web/middleware/server/api/serial.js # api to serial port list/manage to port
- /web/middleware/server/api/config.js # api to key/value configs
- /web/middleware/server/api/ws.js     # api to websocket between flutter web and serial port
- /web/middleware/server/models            # query service
- /web/middleware/server/models/index.js   # (model module)
- /web/middleware/server/models/query.js   # model query to table
- /web/middleware/server/models/configs.js # query to configs table

Release

To build for production, first run npm run release.

To check dist/ output directory.

# Clone this repository
% git clone https://github.com/ilshookim/simple-electron-nodejs-flutter-web.git
# Go into the repository
% cd simple-electron-nodejs-flutter-web
# Install dependencies
% npm install
# Build release to dist/
% npm run release

Logging

By default, it writes logs to the following locations:

  • on Linux: ~/.config/wapui/logs/main.log
  • on macOS: ~/Library/Logs/wapui/main.log
  • on Windows: %USERPROFILE%\AppData\Roaming\wapui\logs\main.log

API

# Check to middleware
% curl http://localhost:8090/hello
Welcome!

Customize

Flutter Web (CanvasKit)

By default, flutter web renderer is html. If you want CanvasKit, You just disable this line.

const config = {
  renderer: "html", // or "canvaskit" in web/index.html
};

Electron App (Application Menu)

By default, electron default menu was removed. If you want to show the menu, You just disable this line.

Menu.setApplicationMenu(null);  // in web/index.js

Electron App (Window Size)

By default, electron app size is fixed 800 x 600. If you want change the size to ratio 75% in primary screen resolution, You just recalc = true; this line.

const recalc = false, ratio = 0.75; // in web/index.js

Middleware (Default Language)

By default, language is en. If you want change to preferred language such as 'ko' is korean.

 // in web/middleware/db/seeds/001_config_seed.js
{
  key: 'locale',
  value: 'en' // 'ko' --> korean
}

Guide to Debugging

To run the electron app

Basically middleware running automatically when to run the electron app.

# Clone this repository
% git clone https://github.com/ilshookim/simple-electron-nodejs-flutter-web.git
# Go into the repository
% cd simple-electron-nodejs-flutter-web
# Install dependencies
% npm install
# Install flutter dependencies
% npm run app:build
# Run the app
% npm run app

Also you can check to middleware on the electron app.

# Check to middleware
% curl http://localhost:8090/hello

To use middleware and your browser (Edge, Chrome or Safari)

Open the app in browser: http://localhost:8090

# Clone this repository
% git clone https://github.com/ilshookim/simple-electron-nodejs-flutter-web.git
# Go into the repository
% cd simple-electron-nodejs-flutter-web
# Install dependencies
% npm install
# Install flutter dependencies
% npm run build
# Run the server
% npm run middlware

To launch VSCode for coding and debugging

To launch the VSCode.

To start debugging (F5 key) flutter web in lib/main.dart.

  • should better to editing source files for middleware in web/ such as index.js, index.html.
# Clone this repository
% git clone https://github.com/ilshookim/simple-electron-nodejs-flutter-web.git
# Go into the repository
% cd simple-electron-nodejs-flutter-web
# Install dependencies
% npm install
# Install flutter dependencies
% npm run release
# Launching the vscode
% code .
  • should better to open JavaScript Debug Terminal in vscode: ctrl+`, and check to + button in right side menu of vscode terminal.
# Run the middleware in debugging mode
% npm run mw

Screenshot Debugging

Development Information

Basically required to flutter, npm and node to build and release, also need to code, git to edit and debugging.

The development environments on MacOS:

Installation Guide

# install homebrew
% /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
% touch ~/.zshrc
% echo -n 'export PATH=/opt/homebrew/bin:$PATH' >> ~/.zshrc
% source ~/.zshrc

% brew --version
Homebrew 4.0.14
Homebrew/homebrew-core (git revision 00783188ffd; last commit 2023-02-20)
Homebrew/homebrew-cask (git revision 722b9ee1a7; last commit 2023-02-20)

# install xcode/git
% xcode-select --install
% brew install git

# install npm/node
% brew install node@18
% echo -n 'export PATH=/opt/homebrew/opt/node@18/bin:$PATH' >> ~/.zshrc
% source ~/.zshrc

# install vscode
% brew install visual-studio-code --cask

# install flutter (should check to USER_HERE in export line)
% brew tap leoafarias/fvm
% brew install fvm
% echo -n 'export PATH=/Users/[USER_HERE]/fvm/versions/stable/bin:$PATH' >> ~/.zshrc
% source ~/.zshrc
% fvm install stable

Check to versions

# Homebrew
% brew --version
Homebrew 4.0.14
Homebrew/homebrew-core (git revision 00783188ffd; last commit 2023-02-20)
Homebrew/homebrew-cask (git revision 722b9ee1a7; last commit 2023-02-20)

# Flutter/Dart
Flutter 3.10.3 • channel stable • https://github.com/flutter/flutter.git
Framework • revision f92f44110e (3 days ago) • 2023-06-01 18:17:33 -0500
Engine • revision 2a3401c9bb
Tools • Dart 3.0.3 • DevTools 2.23.1

# Npm/NodeJS
% npm --version
9.2.0

% node --version
v18.14.2

# VisualStudioCode
% code --version
1.78.2
b3e4e68a0bc097f0ae7907b217c1119af9e03435
arm64

# Git
git --version
git version 2.39.0

The development environments on CentOS7:

Installation Guide

# install snap
$ sudo yum update
$ sudo yum install -y epel-release
$ sudo yum install -y snapd
$ sudo systemctl enable --now snapd.socket
$ sudo ln -s /var/lib/snapd/snap /snap

# install flutter
$ sudo snap install flutter --classic
# if 'flutter command not found' you should ssh reconnection with a new session

# upgrade git version 1 to version 2
$ sudo yum install -y http://opensource.wandisco.com/centos/7/git/x86_64/wandisco-git-release-7-1.noarch.rpm
$ sudo yum remove -y git
$ sudo yum install -y git

# CXXABI_1.3.8' not found: https://github.com/TryGhost/node-sqlite3/issues/1610
$ wget http://mirror.ghettoforge.org/distributions/gf/el/7/gf/x86_64/gcc10-libstdc++-10.2.1-7.gf.el7.x86_64.rpm
$ sudo rpm -Uvh gcc10-libstdc++-10.2.1-7.gf.el7.x86_64.rpm
$ echo 'export LD_LIBRARY_PATH=$PATH:/opt/gcc-10.2.1/usr/lib64' >> ~/.bashrc
$ source ~/.bashrc

# firewall 8090 (if necessary)
$ sudo firewall-cmd --zone=public --add-port=8090/tcp --permanent
$ firewall-cmd --reload

Check to versions

$ cat /etc/redhat-release 
CentOS Linux release 7.9.2009 (Core)

$ flutter --version
Flutter 3.3.4 • channel stable • https://github.com/flutter/flutter.git
Framework • revision eb6d86ee27 (10 days ago) • 2022-10-04 22:31:45 -0700
Engine • revision c08d7d5efc
Tools • Dart 2.18.2 • DevTools 2.15.0

$ npm --version
8.12.1

$ node --version
v16.15.0

$ git --version
git version 2.31.1

$ sudo snap --version
snap    2.55.3-1.el7
snapd   2.55.3-1.el7
series  16
centos  7
kernel  3.10.0-1160.66.1.el7.x86_64

The development environments on Windows:

Installation Guide

In cmd

# install git
C:\> winget install git

# install vscode
C:\> winget install vscode

# install nodejs
C:\> winget install -e --id OpenJS.NodeJS

In Powershell (administrator mode)

# install choco
C:\> "Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))"

# install flutter
C:\> choco install flutter --pre 
C:\> git config --global --add safe.directory C:/tools/flutter

Check to versions

C:\> ver

Microsoft Windows [Version 10.0.22000.1098]

C:\> git --version
git version 2.38.1.windows.1

C:\> node -v
v18.11.0

C:\> npm -v
8.19.2

C:\> code -v
1.72.2
d045a5eda657f4d7b676dedbfa7aab8207f8a075
x64

C:\> flutter --version

Flutter 3.4.0-17.1.pre • channel beta • https://github.com/flutter/flutter.git
Framework • revision 9833838839 (5 weeks ago) • 2022-09-20 18:12:36 -0500
Engine • revision 9b2472da99
Tools • Dart 2.19.0 (build 2.19.0-146.1.beta) • DevTools 2.16.0