├── .gitignore ├── Dockerfile.template ├── LICENSE ├── README.md ├── app ├── .editorconfig ├── .eslintrc ├── bower.json ├── build │ ├── asset-manifest.json │ ├── favicon.ico │ ├── index.html │ └── static │ │ ├── css │ │ ├── main.9a0fe4f1.css │ │ └── main.9a0fe4f1.css.map │ │ └── media │ │ └── logo.2abd9687.svg ├── main.js ├── package.json ├── public │ ├── favicon.ico │ └── index.html ├── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── balena_icon.svg │ ├── index.css │ └── index.js └── start.sh └── screenshot.png /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # Created by https://www.gitignore.io/api/node,windows,osx,linux 3 | 4 | ### Node ### 5 | # Logs 6 | logs 7 | *.log 8 | npm-debug.log* 9 | 10 | # Runtime data 11 | pids 12 | *.pid 13 | *.seed 14 | *.pid.lock 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # nyc test coverage 23 | .nyc_output 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # node-waf configuration 29 | .lock-wscript 30 | 31 | # Compiled binary addons (http://nodejs.org/api/addons.html) 32 | build/Release 33 | 34 | # Dependency directories 35 | node_modules 36 | jspm_packages 37 | 38 | # Optional npm cache directory 39 | .npm 40 | 41 | # Optional eslint cache 42 | .eslintcache 43 | 44 | # Optional REPL history 45 | .node_repl_history 46 | 47 | 48 | ### Windows ### 49 | # Windows image file caches 50 | Thumbs.db 51 | ehthumbs.db 52 | 53 | # Folder config file 54 | Desktop.ini 55 | 56 | # Recycle Bin used on file shares 57 | $RECYCLE.BIN/ 58 | 59 | # Windows Installer files 60 | *.cab 61 | *.msi 62 | *.msm 63 | *.msp 64 | 65 | # Windows shortcuts 66 | *.lnk 67 | 68 | 69 | ### OSX ### 70 | *.DS_Store 71 | .AppleDouble 72 | .LSOverride 73 | 74 | # Icon must end with two \r 75 | Icon 76 | 77 | 78 | # Thumbnails 79 | ._* 80 | 81 | # Files that might appear in the root of a volume 82 | .DocumentRevisions-V100 83 | .fseventsd 84 | .Spotlight-V100 85 | .TemporaryItems 86 | .Trashes 87 | .VolumeIcon.icns 88 | .com.apple.timemachine.donotpresent 89 | 90 | # Directories potentially created on remote AFP share 91 | .AppleDB 92 | .AppleDesktop 93 | Network Trash Folder 94 | Temporary Items 95 | .apdisk 96 | 97 | 98 | ### Linux ### 99 | *~ 100 | 101 | # temporary files which can be created if a process still has a handle open of a deleted file 102 | .fuse_hidden* 103 | 104 | # KDE directory preferences 105 | .directory 106 | 107 | # Linux trash folder which might appear on any partition or disk 108 | .Trash-* 109 | 110 | ### node ### 111 | package-lock.json 112 | 113 | 114 | ### React ### 115 | app/build 116 | -------------------------------------------------------------------------------- /Dockerfile.template: -------------------------------------------------------------------------------- 1 | FROM resin/%%RESIN_MACHINE_NAME%%-node:8 2 | 3 | # Install other apt deps 4 | RUN apt-get update && apt-get install -y --no-install-recommends \ 5 | apt-utils \ 6 | clang \ 7 | xserver-xorg-core \ 8 | xserver-xorg-input-all \ 9 | xserver-xorg-video-fbdev \ 10 | xorg \ 11 | libxcb-image0 \ 12 | libxcb-util0 \ 13 | xdg-utils \ 14 | libdbus-1-dev \ 15 | libgtk2.0-dev \ 16 | libnotify-dev \ 17 | libgnome-keyring-dev \ 18 | libgconf2-dev \ 19 | libasound2-dev \ 20 | libcap-dev \ 21 | libcups2-dev \ 22 | libxtst-dev \ 23 | libxss1 \ 24 | libnss3-dev \ 25 | libsmbclient \ 26 | libssh-4 \ 27 | fbset \ 28 | libexpat-dev && rm -rf /var/lib/apt/lists/* 29 | 30 | RUN echo "#!/bin/bash" > /etc/X11/xinit/xserverrc \ 31 | && echo "" >> /etc/X11/xinit/xserverrc \ 32 | && echo 'exec /usr/bin/X -s 0 dpms -nocursor -nolisten tcp "$@"' >> /etc/X11/xinit/xserverrc 33 | 34 | # Move to app dir 35 | WORKDIR /usr/src/app 36 | 37 | # Move package.json to filesystem 38 | COPY ./app/package.json ./ 39 | 40 | # Install npm modules for the application 41 | RUN JOBS=MAX npm install --unsafe-perm --production && npm cache clean --force && \ 42 | rm -rf /tmp/* && node_modules/.bin/electron-rebuild 43 | 44 | # Move app to filesystem 45 | COPY ./app ./ 46 | 47 | # Build react app 48 | RUN JOBS=MAX npm run build 49 | 50 | ## uncomment if you want systemd 51 | ENV INITSYSTEM on 52 | 53 | # Start app 54 | CMD ["bash", "/usr/src/app/start.sh"] 55 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "{}" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright {yyyy} {name of copyright owner} 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | **This is a react.js fork of balena-electronjs** 2 | 3 | It uses [create-react-app](https://github.com/facebookincubator/create-react-app) to handle the configuration and provide a simple starting point for balena.io + electron + react projects. 4 | 5 | This fork is preconfigured to run the node launcher, so `URL_LAUNCHER_NODE` is always set to `1`. 6 | 7 | ![screenshot](screenshot.png) 8 | 9 | # balena-electronjs 10 | 11 | a boilerplate for developing kiosks, digital signage or other human-machine interaction projects based on [ElectronJS](http://electron.atom.io/) and [balena.io](http://balena.io) 12 | 13 | ## Warning regarding armv6 14 | This project does not currently support the armv6 architecture (ie Raspberry Pi 0 and 1) due to electron limitations. If the issue is fixed on the electron side, we will include it in this project. More on this [here](https://github.com/electron/electron/issues/4677) 15 | 16 | ## Getting started 17 | 18 | - Sign up on [balena.io](https://dashboard.balena.io/signup) 19 | - go throught the [getting started guide](http://docs.balena.io/raspberrypi/nodejs/getting-started/) and create a new application 20 | - clone this repository to your local workspace 21 | - add the _balena remote_ to your local workspace using the useful shortcut in the dashboard UI ![remoteadd](https://raw.githubusercontent.com/balena-io-playground/boombeastic/master/docs/gitresinremote.png) 22 | - `git push balena master` 23 | - see the magic happening, your device is getting updated Over-The-Air! 24 | 25 | ## Configure via [environment variables](https://docs.balena.io/management/env-vars/) 26 | Variable Name | Value | Description | Device-specific 27 | ------------ | ------------- | ------------- | ------------- 28 | **`RESIN_HOST_CONFIG_gpu_mem`** | a value from `64` to `160` | the amount of RAM dedicated to the GPU | Raspberry Pi (all revs) 29 | 30 | Apply the above settings in the "Fleet Configuration" panel (if applying it for the all devices withing your application), or "Device Configuration" panel (if applying it for a single device). 31 | 32 | 33 | ### WHY THIS TEMPLATE 34 | 35 | Achieving kinda-smooth desktop application display on devices like the raspberrypi is hard. This project aims to provide a quickstart template. 36 | 37 | ### URL LAUNCHER config via ENV VARS 38 | *__!!! Please note that since `0.1.0` the `bool`-based env vars dropped `true` / `false` strings in favour of `0` / `1` ones. !!!__* 39 | 40 | simply set these [environment varables](http://docs.balena.io/#/pages/management/env-vars.md) in your app via "Environment Variables" panel in the balena dashboard to configure the behaviour of your devices. 41 | *__Please note that the `bool` type definition in the table is meant to accept to either `0` or `1` values.__* 42 | 43 | * **`URL_LAUNCHER_URL`** *string* - the URL to be loaded. use `file:////usr/src/app/data/index.html` to load a local electronJS (or any website) app - *defaults to* `file:////usr/src/app/data/index.html` 44 | * **`URL_LAUNCHER_NODE`** *bool* (converted from *string*) - whether or not enable nodejs - *defaults to* `0` 45 | * **`URL_LAUNCHER_KIOSK`** *bool* (converted from *string*) - whether or not enter KIOSK mode - *defaults to* `1` 46 | * **`URL_LAUNCHER_TITLE`** *string* - the title of the window. Seen only with `URL_LAUNCHER_FRAME`=`true` - *defaults to* `RESIN.IO` 47 | * **`URL_LAUNCHER_FRAME`** *bool* (converted from *string*) - set to "true" to display the window frame. Seen only with `URL_LAUNCHER_KIOSK`=`false` - *defaults to* `0` 48 | * **`URL_LAUNCHER_CONSOLE`** *bool* (converted from *string*) - set to "true" to display the debug console - *defaults to* `0` 49 | * **`URL_LAUNCHER_WIDTH`** *int* (converted from *string*) - - *defaults to* `1920` 50 | * **`URL_LAUNCHER_HEIGHT`** *int* (converted from *string*) - - *defaults to* `1080` 51 | * **`URL_LAUNCHER_TOUCH`** *bool* (converted from *string*) - enables touch events if your device supports them - *defaults to* `0` 52 | * **`URL_LAUNCHER_TOUCH_SIMULATE`** *bool* (converted from *string*) - simulates touch events - might be useful for touchscreen with partial driver support - be aware this could be a performance hog - *defaults to* `0` 53 | * **`URL_LAUNCHER_ZOOM`** *float* (converted from *string*) - The default zoom factor of the page, 3.0 represents 300% - *defaults to* `1.0` 54 | * **`URL_LAUNCHER_OVERLAY_SCROLLBARS`** *bool* (converted from *string*) - enables overlay scrollbars - *defaults to* `0` 55 | * **`TFT`** *bool* (converted from *string*) - sets the target display to TFT screen like the [piTFT](https://www.adafruit.com/product/1601) but still requires you to set the proper device tree overlay configuration for it - *defaults to* `0` 56 | * **`TFT_ROTATE`** *int* (converted from *string*) - accepted values: 0,90,180,270 - *defaults to* `0` 57 | * **`ELECTRON_ENABLE_HW_ACCELERATION`** *bool* (converted from *string*) - enable hardware acceleration - *defaults to* `0` 58 | * **`ELECTRON_RESIN_UPDATE_LOCK`** *bool* (converted from *string*) - Enable supervisor update locking (see [Update Locking](#update-locking)) 59 | * **`ELECTRON_APP_DATA_DIR`** *string* - Override the `appData` directory (see [Electron API Documentation: app](https://electronjs.org/docs/api/app#appgetpathname)) 60 | * **`ELECTRON_USER_DATA_DIR`** *string* - Override the `userData` directory (see [Electron API Documentation: app](https://electronjs.org/docs/api/app#appgetpathname)) 61 | 62 | ### Update Locking 63 | 64 | **NOTE:** Take care to only listen for a response *once*, and avoid sending 65 | multiple requests before the response arrived. 66 | 67 | ```js 68 | const {ipcRenderer} = require('electron') 69 | ``` 70 | 71 | #### Acquiring the Lock 72 | 73 | ```js 74 | // Listen for a response 75 | ipcRenderer.once('resin-update-lock', (event, error) => { 76 | if (error) { ... } 77 | }) 78 | 79 | // Send the 'lock' command to acquire the lock 80 | ipcRenderer.send('resin-update-lock', 'lock') 81 | ``` 82 | 83 | #### Releasing the Lock 84 | 85 | ```js 86 | // Listen for a response 87 | ipcRenderer.once('resin-update-lock', (event, error) => { 88 | if (error) { ... } 89 | }) 90 | 91 | // Send the 'unlock' command to release the lock 92 | ipcRenderer.send('resin-update-lock', 'unlock') 93 | ``` 94 | 95 | #### Checking the Lock 96 | 97 | ```js 98 | // Listen for a response 99 | ipcRenderer.once('resin-update-lock', (event, error, isLocked) => { 100 | console.log('Locked:', error || isLocked) 101 | }) 102 | 103 | // Send the 'check' command to check on the state of the lock 104 | ipcRenderer.send('resin-update-lock', 'check') 105 | ``` 106 | 107 | ### Related 108 | 109 | - [balena-electronjs vue boilerplate](https://github.com/imomaliev/balena-electron-vue) by [@imomaliev](https://github.com/imomaliev) 110 | - [balena-electronjs react boilerplate](https://github.com/balena-io-playground/balena-electronjs-react) by [@craig-mulligan](https://github.com/craig-mulligan) 111 | -------------------------------------------------------------------------------- /app/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | charset = utf-8 7 | trim_trailing_whitespace = true 8 | insert_final_newline = true 9 | end_of_line = lf 10 | # editorconfig-tools is unable to ignore longs strings or urls 11 | max_line_length = null 12 | -------------------------------------------------------------------------------- /app/.eslintrc: -------------------------------------------------------------------------------- 1 | // Use this file as a starting point for your project's .eslintrc. 2 | // Copy this file, and add rule overrides as needed. 3 | { 4 | "extends": "airbnb-base" 5 | } 6 | -------------------------------------------------------------------------------- /app/bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "balena-electronjs", 3 | "description": "electronJS-based rpi2 balena application", 4 | "main": "main.js", 5 | "authors": [ 6 | "Carlo Maria Curinga" 7 | ], 8 | "license": "Apache-2.0", 9 | "keywords": [ 10 | "balena", 11 | "io", 12 | "electron", 13 | "js" 14 | ], 15 | "homepage": "https://github.com/balena-io-playground/balena-electronjs-react", 16 | "moduleType": [], 17 | "private": true, 18 | "ignore": [ 19 | "**/.*", 20 | "node_modules", 21 | "bower_components", 22 | "test", 23 | "tests" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /app/build/asset-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "main.css": "static/css/main.9a0fe4f1.css", 3 | "main.css.map": "static/css/main.9a0fe4f1.css.map", 4 | "main.js": "static/js/main.9c4d2d61.js", 5 | "main.js.map": "static/js/main.9c4d2d61.js.map", 6 | "static/media/logo.svg": "static/media/logo.2abd9687.svg" 7 | } -------------------------------------------------------------------------------- /app/build/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/balena-io-experimental/balena-electronjs-react/4c290ba54745fbb16461b6b89bf0bbcab53ab245/app/build/favicon.ico -------------------------------------------------------------------------------- /app/build/index.html: -------------------------------------------------------------------------------- 1 | Hello resin-electronjs-react
-------------------------------------------------------------------------------- /app/build/static/css/main.9a0fe4f1.css: -------------------------------------------------------------------------------- 1 | .App{text-align:center}.App-logo{-webkit-animation:App-logo-spin infinite 20s linear;animation:App-logo-spin infinite 20s linear;height:80px}.App-header{background-color:#222;height:150px;padding:20px;color:#fff}.App-intro{font-size:large}@-webkit-keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}body{margin:0;padding:0;font-family:sans-serif} 2 | /*# sourceMappingURL=main.9a0fe4f1.css.map*/ -------------------------------------------------------------------------------- /app/build/static/css/main.9a0fe4f1.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":[],"names":[],"mappings":"","file":"static/css/main.9a0fe4f1.css","sourceRoot":""} -------------------------------------------------------------------------------- /app/build/static/media/logo.2abd9687.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /app/main.js: -------------------------------------------------------------------------------- 1 | const electron = require('electron'); 2 | const path = require('path'); 3 | // Keep a global reference of the window object, if you don't, the window will 4 | // be closed automatically when the JavaScript object is garbage collected. 5 | let mainWindow; 6 | 7 | const { 8 | app, 9 | BrowserWindow, 10 | } = electron; 11 | 12 | // simple parameters initialization 13 | const electronConfig = { 14 | URL_LAUNCHER_TOUCH: process.env.URL_LAUNCHER_TOUCH === '1' ? 1 : 0, 15 | URL_LAUNCHER_TOUCH_SIMULATE: process.env.URL_LAUNCHER_TOUCH_SIMULATE === '1' ? 1 : 0, 16 | URL_LAUNCHER_FRAME: process.env.URL_LAUNCHER_FRAME === '1' ? 1 : 0, 17 | URL_LAUNCHER_KIOSK: process.env.URL_LAUNCHER_KIOSK === '1' ? 1 : 0, 18 | URL_LAUNCHER_NODE: process.env.URL_LAUNCHER_NODE === '1' ? 1 : 0, 19 | URL_LAUNCHER_WIDTH: parseInt(process.env.URL_LAUNCHER_WIDTH || 1920, 10), 20 | URL_LAUNCHER_HEIGHT: parseInt(process.env.URL_LAUNCHER_HEIGHT || 1080, 10), 21 | URL_LAUNCHER_TITLE: process.env.URL_LAUNCHER_TITLE || 'RESIN.IO', 22 | URL_LAUNCHER_CONSOLE: process.env.URL_LAUNCHER_CONSOLE === '1' ? 1 : 0, 23 | URL_LAUNCHER_URL: process.env.URL_LAUNCHER_URL || `file:///${path.join(__dirname, 'build', 'index.html')}`, 24 | URL_LAUNCHER_ZOOM: parseFloat(process.env.URL_LAUNCHER_ZOOM || 1.0), 25 | URL_LAUNCHER_OVERLAY_SCROLLBARS: process.env.URL_LAUNCHER_OVERLAY_SCROLLBARS === '1' ? 1 : 0, 26 | ELECTRON_ENABLE_HW_ACCELERATION: process.env.ELECTRON_ENABLE_HW_ACCELERATION === '1', 27 | ELECTRON_RESIN_UPDATE_LOCK: process.env.ELECTRON_RESIN_UPDATE_LOCK === '1', 28 | ELECTRON_APP_DATA_DIR: process.env.ELECTRON_APP_DATA_DIR, 29 | ELECTRON_USER_DATA_DIR: process.env.ELECTRON_USER_DATA_DIR, 30 | }; 31 | 32 | // Enable / disable hardware acceleration 33 | if (!electronConfig.ELECTRON_ENABLE_HW_ACCELERATION) { 34 | app.disableHardwareAcceleration(); 35 | } 36 | 37 | // enable touch events if your device supports them 38 | if (electronConfig.URL_LAUNCHER_TOUCH) { 39 | app.commandLine.appendSwitch('--touch-devices'); 40 | } 41 | // simulate touch events - might be useful for touchscreen with partial driver support 42 | if (electronConfig.URL_LAUNCHER_TOUCH_SIMULATE) { 43 | app.commandLine.appendSwitch('--simulate-touch-screen-with-mouse'); 44 | } 45 | 46 | // Override the appData directory 47 | // See https://electronjs.org/docs/api/app#appgetpathname 48 | if (electronConfig.ELECTRON_APP_DATA_DIR) { 49 | electron.app.setPath('appData', electronConfig.ELECTRON_APP_DATA_DIR) 50 | } 51 | 52 | // Override the userData directory 53 | // NOTE: `userData` defaults to the `appData` directory appended with the app's name 54 | if (electronConfig.ELECTRON_USER_DATA_DIR) { 55 | electron.app.setPath('userData', electronConfig.ELECTRON_USER_DATA_DIR) 56 | } 57 | 58 | if (process.env.NODE_ENV === 'development') { 59 | console.log('Running in development mode'); 60 | Object.assign(electronConfig, { 61 | URL_LAUNCHER_HEIGHT: 600, 62 | URL_LAUNCHER_WIDTH: 800, 63 | URL_LAUNCHER_KIOSK: 0, 64 | URL_LAUNCHER_CONSOLE: 1, 65 | URL_LAUNCHER_FRAME: 1, 66 | }); 67 | } 68 | 69 | // Listen for a 'resin-update-lock' to either enable, disable or check 70 | // the update lock from the renderer process (i.e. the app) 71 | if (electronConfig.ELECTRON_RESIN_UPDATE_LOCK) { 72 | const lockFile = require('lockfile'); 73 | electron.ipcMain.on('resin-update-lock', (event, command) => { 74 | switch (command) { 75 | case 'lock': 76 | lockFile.lock('/tmp/resin/resin-updates.lock', (error) => { 77 | event.sender.send('resin-update-lock', error); 78 | }); 79 | break; 80 | case 'unlock': 81 | lockFile.unlock('/tmp/resin/resin-updates.lock', (error) => { 82 | event.sender.send('resin-update-lock', error); 83 | }); 84 | break; 85 | case 'check': 86 | lockFile.check('/tmp/resin/resin-updates.lock', (error, isLocked) => { 87 | event.sender.send('resin-update-lock', error, isLocked); 88 | }); 89 | break; 90 | default: 91 | event.sender.send('resin-update-lock', new Error(`Unknown command "${command}"`)); 92 | break; 93 | } 94 | }); 95 | } 96 | 97 | /* 98 | we initialize our application display as a callback of the electronJS "ready" event 99 | */ 100 | app.on('ready', () => { 101 | // here we actually configure the behavour of electronJS 102 | mainWindow = new BrowserWindow({ 103 | width: electronConfig.URL_LAUNCHER_WIDTH, 104 | height: electronConfig.URL_LAUNCHER_HEIGHT, 105 | frame: !!(electronConfig.URL_LAUNCHER_FRAME), 106 | title: electronConfig.URL_LAUNCHER_TITLE, 107 | kiosk: !!(electronConfig.URL_LAUNCHER_KIOSK), 108 | webPreferences: { 109 | sandbox: false, 110 | nodeIntegration: !!(electronConfig.URL_LAUNCHER_NODE), 111 | zoomFactor: electronConfig.URL_LAUNCHER_ZOOM, 112 | overlayScrollbars: !!(electronConfig.URL_LAUNCHER_OVERLAY_SCROLLBARS), 113 | }, 114 | }); 115 | 116 | mainWindow.webContents.on('did-finish-load', () => { 117 | setTimeout(() => { 118 | mainWindow.show(); 119 | }, 300); 120 | }); 121 | 122 | // if the env-var is set to true, 123 | // a portion of the screen will be dedicated to the chrome-dev-tools 124 | if (electronConfig.URL_LAUNCHER_CONSOLE) { 125 | mainWindow.webContents.openDevTools(); 126 | } 127 | 128 | process.on('uncaughtException', (err) => { 129 | console.log(err); 130 | }); 131 | 132 | // the big red button, here we go 133 | mainWindow.loadURL(electronConfig.URL_LAUNCHER_URL); 134 | }); 135 | -------------------------------------------------------------------------------- /app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "balena-electronjs", 3 | "version": "1.0.2", 4 | "description": "electronJS-based balena application", 5 | "main": "main.js", 6 | "homepage": "./", 7 | "scripts": { 8 | "dev": "BROWSER=none react-scripts start & URL_LAUNCHER_NODE=1 URL_LAUNCHER_URL=http://localhost:3000 NODE_ENV=development electron .", 9 | "lint": "eslint .", 10 | "start": "URL_LAUNCHER_NODE=1 NODE_ENV=production startx ./node_modules/electron/dist/electron .", 11 | "local": "NODE_ENV=production electron .", 12 | "build": "react-scripts build", 13 | "test": "react-scripts test --env=jsdom", 14 | "eject": "react-scripts eject", 15 | "electron": "URL_LAUNCHER_NODE=1 electron ." 16 | }, 17 | "repository": { 18 | "type": "git", 19 | "url": "git+https://github.com/balena-io-playground/balena-electronjs-react.git" 20 | }, 21 | "keywords": [ 22 | "balena", 23 | "io", 24 | "electron", 25 | "js" 26 | ], 27 | "dependencies": { 28 | "electron": "1.7.13", 29 | "electron-rebuild": "^1.7.2", 30 | "eslint-config-airbnb-base": "^11.0.1", 31 | "eslint-plugin-import": "^2.2.0", 32 | "eslint": "^3.14.1", 33 | "lockfile": "^1.0.4", 34 | "react": "16.5.2", 35 | "react-dom": "16.5.2", 36 | "react-scripts": "0.8.5" 37 | }, 38 | "author": "Carlo Maria Curinga", 39 | "license": "Apache-2.0", 40 | "bugs": { 41 | "url": "https://github.com/balena-io-playground/balena-electronjs-react/issues" 42 | }, 43 | "jshintConfig": { 44 | "esversion": 6, 45 | "strict": true 46 | }, 47 | "devDependencies": { 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/balena-io-experimental/balena-electronjs-react/4c290ba54745fbb16461b6b89bf0bbcab53ab245/app/public/favicon.ico -------------------------------------------------------------------------------- /app/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | balena-electronjs-react 6 | 7 | 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /app/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-intro { 18 | font-size: large; 19 | } 20 | 21 | @keyframes App-logo-spin { 22 | from { transform: rotate(0deg); } 23 | to { transform: rotate(360deg); } 24 | } 25 | -------------------------------------------------------------------------------- /app/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import logo from './balena_icon.svg'; 3 | import './App.css'; 4 | 5 | // https://github.com/electron/electron/issues/7300 6 | // We don't want to bundle electron in the webpack process so we use it's globally exposed require method. 7 | const electron = window.require('electron'); 8 | const fs = electron.remote.require('fs'); 9 | var files = fs.readdirSync('./'); 10 | 11 | class App extends Component { 12 | render() { 13 | return ( 14 |
15 |
16 | logo 17 |

Welcome to balena-electronjs-react

18 |
19 |
20 |

21 | To get started, edit src/App.js and save to reload. You have access to all node apis. Here is a list of files in this directory. 22 |

23 | { 24 | files.map((file, key) => { 25 | return 
{file}
; 26 | }) 27 | } 28 |
29 |
30 | ); 31 | } 32 | } 33 | 34 | export default App; 35 | -------------------------------------------------------------------------------- /app/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | }); 9 | -------------------------------------------------------------------------------- /app/src/balena_icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 13 | 14 | 16 | 18 | 20 | 22 | 24 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /app/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /app/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | import './index.css'; 5 | 6 | ReactDOM.render( 7 | , 8 | document.getElementById('root') 9 | ); 10 | -------------------------------------------------------------------------------- /app/start.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | export URL_LAUNCHER_NODE=1 3 | export NODE_ENV=production 4 | # By default docker gives us 64MB of shared memory size but to display heavy 5 | # pages we need more. 6 | umount /dev/shm && mount -t tmpfs shm /dev/shm 7 | 8 | # using local electron module instead of the global electron lets you 9 | # easily control specific version dependency between your app and electron itself. 10 | # the syntax below starts an X istance with ONLY our electronJS fired up, 11 | # it saves you a LOT of resources avoiding full-desktops envs 12 | 13 | rm /tmp/.X0-lock &>/dev/null || true 14 | 15 | if [ ! -c /dev/fb1 ] && [ "$TFT" = "1" ]; then 16 | modprobe spi-bcm2708 || true 17 | modprobe fbtft_device name=pitft verbose=0 rotate=${TFT_ROTATE:-0} || true 18 | sleep 1 19 | mknod /dev/fb1 c $(cat /sys/class/graphics/fb1/dev | tr ':' ' ') || true 20 | FRAMEBUFFER=/dev/fb1 startx /usr/src/app/node_modules/electron/dist/electron /usr/src/app --enable-logging 21 | else 22 | startx /usr/src/app/node_modules/electron/dist/electron /usr/src/app --enable-logging 23 | fi 24 | -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/balena-io-experimental/balena-electronjs-react/4c290ba54745fbb16461b6b89bf0bbcab53ab245/screenshot.png --------------------------------------------------------------------------------