simple-electron-nodejs-flutter-web
A simple Electron application using NodeJS middleware with Flutter web and Dart.
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 basic information and status to clipboard (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 show chart converted from csv format data 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
Architecture
Flutter Framework
- /lib # flutter web - /lib/main.dart # main of webapp - /lib/home.dart # home page - /lib/process.dart # process pages (scenario example) - /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.
window.flutterWebRenderer = "html"; // in web/index.html
Electron App (Application Menu)
By default, electron default menu was removed. If you want 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 primiary 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 perfered 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 luanch the VSCode.
To start debugging (F5 key) flutter web in lib/main.dart.
- should better to editing source files for middleware in web/ sucn 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
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:
Check to versions
# Flutter/Dart % flutter --version Flutter 3.3.4 • channel stable • https://github.com/flutter/flutter.git Framework • revision eb6d86ee27 (3 days ago) • 2022-10-04 22:31:45 -0700 Engine • revision c08d7d5efc Tools • Dart 2.18.2 • DevTools 2.15.0 # Npm/NodeJS % npm --version 8.5.0 % node --version v16.9.1 # VisualStudioCode % code --version 1.72.0 64bbfbf67ada9953918d72e1df2f4d8e537d340e x64 # Git git --version git version 2.37.0 (Apple Git-136)
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
Download source code on GitHub
Provides the list of the opensource Flutter apps collection with GitHub repository.