{"id":13615399,"url":"https://github.com/ilshookim/simple-electron-nodejs-flutter-web","last_synced_at":"2025-04-13T21:30:52.701Z","repository":{"id":62887413,"uuid":"559416139","full_name":"ilshookim/simple-electron-nodejs-flutter-web","owner":"ilshookim","description":"A simple Electron application using NodeJS with Flutter Web \u0026 Dart","archived":false,"fork":false,"pushed_at":"2023-06-05T08:43:25.000Z","size":6546,"stargazers_count":16,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-11-07T23:39:25.646Z","etag":null,"topics":["electron","flutter","linux","logging","macos","nodejs","rest-api","serialport","sqlite3","webapp","websocket","windows"],"latest_commit_sha":null,"homepage":"","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ilshookim.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-10-30T03:20:16.000Z","updated_at":"2024-10-17T11:16:58.000Z","dependencies_parsed_at":"2024-11-07T23:32:21.144Z","dependency_job_id":null,"html_url":"https://github.com/ilshookim/simple-electron-nodejs-flutter-web","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ilshookim%2Fsimple-electron-nodejs-flutter-web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ilshookim%2Fsimple-electron-nodejs-flutter-web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ilshookim%2Fsimple-electron-nodejs-flutter-web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ilshookim%2Fsimple-electron-nodejs-flutter-web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ilshookim","download_url":"https://codeload.github.com/ilshookim/simple-electron-nodejs-flutter-web/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248785991,"owners_count":21161384,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["electron","flutter","linux","logging","macos","nodejs","rest-api","serialport","sqlite3","webapp","websocket","windows"],"created_at":"2024-08-01T20:01:13.068Z","updated_at":"2025-04-13T21:30:48.706Z","avatar_url":"https://github.com/ilshookim.png","language":"Dart","readme":"# simple-electron-nodejs-flutter-web\n\nA simple Electron application using NodeJS middleware with Flutter web and Dart.\n\n![Screenshot Home](screenshots/home.png)\n\nThis project name is wapui (web application platform for ui).\n\n- electron release application to MacOS, Linux and Windows (electron: version 21)\n- npm managing scripts supported (npm: version 8)\n- node.js middleware integrated (node: version 16)\n- flutter web integrated (flutter: version 3)\n- internalization supported (flutter: en, ko)\n- loading spinning animation and status supported (electron: index.html)\n- hiding electron menu supported (electron: index.html)\n- debugging mode in settings (flutter web)\n- copy status and information to clipboard (flutter web)\n- play video both of local url and remote url (flutter web)\n- logging to browser console log and transfer to nodejs middleware (flutter web)\n- logging to specified log file (nodejs middleware)\n- restful API supported (nodejs middleware)\n- sqlite3 database integrated (nodejs middleware)\n- and so on\n\nThis project shows you the below.\n\n- how to interaction between flutter web and nodejs middleware\n- how to payload relays between websocket in flutter web and serial port in nodejs middleware\n- how to payload publication/subscription between websocket module and serial module using localbus in nodejs middleware\n- how to use static data and stream data in flutter web using flutter provider pattern\n- how to expose restful api in middleware and to use api in flutter web\n- how to show process steps using timer and animation in flutter web\n- how to play video both of local url and remote url in flutter web\n- how to show chart converted from csv format data in flutter web\n- how to show file dialog and read data from file in flutter web\n- how to read and show version in pubspec.yaml and package.json\n- how to debugging and logging in middleware or flutter web\n- how to use sqlite3 local database in middleware\n\n## Screenshots\n\n![Screenshot Video](screenshots/video.png)\n![Screenshot Report](screenshots/report.png)\n![Screenshot Process](screenshots/process.png)\n![Screenshot Settings](screenshots/settings.png)\n\n## Architecture\n\nFlutter Framework\n```bash\n- /lib                  # flutter web\n- /lib/main.dart        # main of webapp\n- /lib/home.dart        # home page\n- /lib/process.dart     # process pages (example: video play, process steps)\n- /lib/reports.dart     # reports page\n- /lib/settings.dart    # settings page\n- /lib/data.dart        # data to serial, config/websocket\n- /lib/api.dart         # request api/response to cache\n```\n\nElectron Framework\n```bash\n- /web                 # electron framework\n- /web/index.html      # html page to loading flutter web and loading animation\n- /web/index.js        # electron main to loading nodejs middleware\n```\n\nMiddleware (Electron Framework using NodeJS)\n```bash\n- /web/middleware               # integrate to nodejs\n- /web/middleware/index.js      # (middleware module: http/websocket listen to 8090)\n- /web/middleware/knexfile.js   # sqlite3 local database info\n```\n\n```bash\n- /web/middleware/db              # DB migration/seeding\n- /web/middleware/db/data.sqlite3 # DB file\n- /web/middleware/db/index.js     # (DB module)\n- /web/middleware/db/migrations   # create to initial tables\n- /web/middleware/db/seeds        # insert to initial values\n```\n\n```bash\n- /web/middleware/server          # api/ws server\n- /web/middleware/server/index.js # (server module)\n```\n\n```bash\n- /web/middleware/server/api           # restful api expose and localbus service\n- /web/middleware/server/api/index.js  # (api/ws module)\n- /web/middleware/server/api/serial.js # api to serial port list/manage to port\n- /web/middleware/server/api/config.js # api to key/value configs\n- /web/middleware/server/api/ws.js     # api to websocket between flutter web and serial port\n```\n\n```bash\n- /web/middleware/server/models            # query service\n- /web/middleware/server/models/index.js   # (model module)\n- /web/middleware/server/models/query.js   # model query to table\n- /web/middleware/server/models/configs.js # query to configs table\n```\n\n## Release\n\nTo build for production, first run `npm run release`.\n\nTo check dist/ output directory.\n\n```bash\n# Clone this repository\n% git clone https://github.com/ilshookim/simple-electron-nodejs-flutter-web.git\n# Go into the repository\n% cd simple-electron-nodejs-flutter-web\n# Install dependencies\n% npm install\n# Build release to dist/\n% npm run release\n```\n\n## Logging\n\nBy default, it writes logs to the following locations:\n\n- on Linux: ~/.config/wapui/logs/main.log\n- on macOS: ~/Library/Logs/wapui/main.log\n- on Windows: %USERPROFILE%\\AppData\\Roaming\\wapui\\logs\\main.log\n\n## API\n\n- [Config API](./doc/usage/config.md)\n- [Serial API](./doc/usage/serial.md)\n\n```bash\n# Check to middleware\n% curl http://localhost:8090/hello\nWelcome!\n```\n\n## Customize\n\n### Flutter Web (CanvasKit)\n\nBy default, flutter web renderer is html.\nIf you want CanvasKit, You just disable this line.\n\n```js\nconst config = {\n  renderer: \"html\", // or \"canvaskit\" in web/index.html\n};\n```\n\n### Electron App (Application Menu)\n\nBy default, electron default menu was removed.\nIf you want to show the menu, You just disable this line.\n\n```js\nMenu.setApplicationMenu(null);  // in web/index.js\n```\n\n### Electron App (Window Size)\n\nBy default, electron app size is fixed 800 x 600.\nIf you want change the size to ratio 75% in primary screen resolution, You just recalc = true; this line.\n\n```js\nconst recalc = false, ratio = 0.75; // in web/index.js\n```\n\n### Middleware (Default Language)\n\nBy default, language is en.\nIf you want change to preferred language such as 'ko' is korean.\n\n```js\n // in web/middleware/db/seeds/001_config_seed.js\n{\n  key: 'locale',\n  value: 'en' // 'ko' --\u003e korean\n}\n```\n\n# Guide to Debugging\n\n## To run the electron app\n\nBasically middleware running automatically when to run the electron app.\n\n```bash\n# Clone this repository\n% git clone https://github.com/ilshookim/simple-electron-nodejs-flutter-web.git\n# Go into the repository\n% cd simple-electron-nodejs-flutter-web\n# Install dependencies\n% npm install\n# Install flutter dependencies\n% npm run app:build\n# Run the app\n% npm run app\n```\n\nAlso you can check to middleware on the electron app.\n\n```bash\n# Check to middleware\n% curl http://localhost:8090/hello\n```\n\n## To use middleware and your browser (Edge, Chrome or Safari)\n\nOpen the app in browser: http://localhost:8090\n\n```bash\n# Clone this repository\n% git clone https://github.com/ilshookim/simple-electron-nodejs-flutter-web.git\n# Go into the repository\n% cd simple-electron-nodejs-flutter-web\n# Install dependencies\n% npm install\n# Install flutter dependencies\n% npm run build\n# Run the server\n% npm run middlware\n```\n\n## To launch VSCode for coding and debugging\n\nTo launch the VSCode.\n\nTo start debugging (F5 key) flutter web in lib/main.dart.\n\n- should better to editing source files for middleware in web/ such as index.js, index.html.\n\n```bash\n# Clone this repository\n% git clone https://github.com/ilshookim/simple-electron-nodejs-flutter-web.git\n# Go into the repository\n% cd simple-electron-nodejs-flutter-web\n# Install dependencies\n% npm install\n# Install flutter dependencies\n% npm run release\n# Launching the vscode\n% code .\n```\n\n- should better to open JavaScript Debug Terminal in vscode: ctrl+`, and check to + button in right side menu of vscode terminal.\n\n```bash\n# Run the middleware in debugging mode\n% npm run mw\n```\n\n![Screenshot Debugging](screenshots/debugging-middleware-and-webapp.gif)\n\n## Development Information\n\nBasically required to flutter, npm and node to build and release, also need to code, git to edit and debugging.\n\n### The development environments on MacOS:\n\nInstallation Guide\n```bash\n# install homebrew\n% /bin/bash -c \"$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)\"\n% touch ~/.zshrc\n% echo -n 'export PATH=/opt/homebrew/bin:$PATH' \u003e\u003e ~/.zshrc\n% source ~/.zshrc\n\n% brew --version\nHomebrew 4.0.14\nHomebrew/homebrew-core (git revision 00783188ffd; last commit 2023-02-20)\nHomebrew/homebrew-cask (git revision 722b9ee1a7; last commit 2023-02-20)\n\n# install xcode/git\n% xcode-select --install\n% brew install git\n\n# install npm/node\n% brew install node@18\n% echo -n 'export PATH=/opt/homebrew/opt/node@18/bin:$PATH' \u003e\u003e ~/.zshrc\n% source ~/.zshrc\n\n# install vscode\n% brew install visual-studio-code --cask\n\n# install flutter (should check to USER_HERE in export line)\n% brew tap leoafarias/fvm\n% brew install fvm\n% echo -n 'export PATH=/Users/[USER_HERE]/fvm/versions/stable/bin:$PATH' \u003e\u003e ~/.zshrc\n% source ~/.zshrc\n% fvm install stable\n```\n\nCheck to versions\n\n```bash\n# Homebrew\n% brew --version\nHomebrew 4.0.14\nHomebrew/homebrew-core (git revision 00783188ffd; last commit 2023-02-20)\nHomebrew/homebrew-cask (git revision 722b9ee1a7; last commit 2023-02-20)\n\n# Flutter/Dart\nFlutter 3.10.3 • channel stable • https://github.com/flutter/flutter.git\nFramework • revision f92f44110e (3 days ago) • 2023-06-01 18:17:33 -0500\nEngine • revision 2a3401c9bb\nTools • Dart 3.0.3 • DevTools 2.23.1\n\n# Npm/NodeJS\n% npm --version\n9.2.0\n\n% node --version\nv18.14.2\n\n# VisualStudioCode\n% code --version\n1.78.2\nb3e4e68a0bc097f0ae7907b217c1119af9e03435\narm64\n\n# Git\ngit --version\ngit version 2.39.0\n```\n\n### The development environments on CentOS7:\n\nInstallation Guide\n\n```shell\n# install snap\n$ sudo yum update\n$ sudo yum install -y epel-release\n$ sudo yum install -y snapd\n$ sudo systemctl enable --now snapd.socket\n$ sudo ln -s /var/lib/snapd/snap /snap\n\n# install flutter\n$ sudo snap install flutter --classic\n# if 'flutter command not found' you should ssh reconnection with a new session\n\n# upgrade git version 1 to version 2\n$ sudo yum install -y http://opensource.wandisco.com/centos/7/git/x86_64/wandisco-git-release-7-1.noarch.rpm\n$ sudo yum remove -y git\n$ sudo yum install -y git\n\n# CXXABI_1.3.8' not found: https://github.com/TryGhost/node-sqlite3/issues/1610\n$ wget http://mirror.ghettoforge.org/distributions/gf/el/7/gf/x86_64/gcc10-libstdc++-10.2.1-7.gf.el7.x86_64.rpm\n$ sudo rpm -Uvh gcc10-libstdc++-10.2.1-7.gf.el7.x86_64.rpm\n$ echo 'export LD_LIBRARY_PATH=$PATH:/opt/gcc-10.2.1/usr/lib64' \u003e\u003e ~/.bashrc\n$ source ~/.bashrc\n\n# firewall 8090 (if necessary)\n$ sudo firewall-cmd --zone=public --add-port=8090/tcp --permanent\n$ firewall-cmd --reload\n```\n\nCheck to versions\n\n```shell\n$ cat /etc/redhat-release \nCentOS Linux release 7.9.2009 (Core)\n\n$ flutter --version\nFlutter 3.3.4 • channel stable • https://github.com/flutter/flutter.git\nFramework • revision eb6d86ee27 (10 days ago) • 2022-10-04 22:31:45 -0700\nEngine • revision c08d7d5efc\nTools • Dart 2.18.2 • DevTools 2.15.0\n\n$ npm --version\n8.12.1\n\n$ node --version\nv16.15.0\n\n$ git --version\ngit version 2.31.1\n\n$ sudo snap --version\nsnap    2.55.3-1.el7\nsnapd   2.55.3-1.el7\nseries  16\ncentos  7\nkernel  3.10.0-1160.66.1.el7.x86_64\n```\n\n### The development environments on Windows:\n\nInstallation Guide\n\nIn cmd\n\n```bat\n# install git\nC:\\\u003e winget install git\n\n# install vscode\nC:\\\u003e winget install vscode\n\n# install nodejs\nC:\\\u003e winget install -e --id OpenJS.NodeJS\n```\n\nIn Powershell (administrator mode)\n\n```cmd\n# install choco\nC:\\\u003e \"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'))\"\n\n# install flutter\nC:\\\u003e choco install flutter --pre \nC:\\\u003e git config --global --add safe.directory C:/tools/flutter\n```\n\nCheck to versions\n\n```cmd\nC:\\\u003e ver\n\nMicrosoft Windows [Version 10.0.22000.1098]\n\nC:\\\u003e git --version\ngit version 2.38.1.windows.1\n\nC:\\\u003e node -v\nv18.11.0\n\nC:\\\u003e npm -v\n8.19.2\n\nC:\\\u003e code -v\n1.72.2\nd045a5eda657f4d7b676dedbfa7aab8207f8a075\nx64\n\nC:\\\u003e flutter --version\n\nFlutter 3.4.0-17.1.pre • channel beta • https://github.com/flutter/flutter.git\nFramework • revision 9833838839 (5 weeks ago) • 2022-09-20 18:12:36 -0500\nEngine • revision 9b2472da99\nTools • Dart 2.19.0 (build 2.19.0-146.1.beta) • DevTools 2.16.0\n\n```\n","funding_links":[],"categories":["Dart"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Filshookim%2Fsimple-electron-nodejs-flutter-web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Filshookim%2Fsimple-electron-nodejs-flutter-web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Filshookim%2Fsimple-electron-nodejs-flutter-web/lists"}