Turn your full-stack NodeJS application into a downloadable cross-platform binary. Also works for SPAs, or regular web-sites.
- Create a downloadable binary for any platform ✔️
- NodeJS ✔️
- Chrome DevTools API ✔️
- GUI in HTML/JavaScript/CSS ✔️
- BYO front-end framework ✔️
- BYO back-end framework ✔️
- A GUI window with OS-default topbar controls that can be dragged, maximized, minimized, resized ✔️
- A simple API for controlling windows, and interacting with DevTools ✔️
- GUI window has app title and can have app icon. ✔️
- ES6 all the latest features (that work in the latest Chrome). ✔️
- Cross-platform builds (build for everywhere on Linux, or Mac or Windows). ✔️
- App binary icons (it's just the NodeJS icon) 💀
- App system tray icons (on Mac, tray icons work on Windows) 💀
- Code signing and associated bona fides that give apps a "passport for safe and unimpeded passage" through your system (it's not built in, but you can sign your own binary, if you have the right setup). 💀
A GraderJS app is just a full-stack application written in NodeJS that runs locally on your client's machine. It achieves this by:
- bundling a NodeJS (for the target platform) and your back-end and front-end source code into the binary.
- on execution the binary:
- starts the back-end service
- unzips the front-end to a temporary directory
- probes the screen to find its dimensions using a silently launched chrome window (and downloads and installs chrome if it is not)
- opens an "app view" chrome UI window to display the front-end
GraderJS apps are un-opinionated. You can code the front and back-end however you like, and all details like persisting state to the client's machine, and other useful things, are left to the app author to figure out themselves, and decide which way they want to go.
Unlike a regular full-stack app, GraderJS apps:
- Look like a native app and run on the desktop.
- Have full access to the system.
- Have full access to the Chrome DevTools API to be able to fully utilize the great browser APIs, enabling you to incorporate "browser power" (think, automation of browsers, but that's just a fraction of what's possible) into your app experiences
Minimal binary is 50MB (Macos, Hello World App, using node v16.16.0, with executable built by pkg).
- Overview
- Getting Started
- Step by step guide
- API
- Then build it
- Configuration
- Screenshots
- More
- Licensing
- Related projects
- Simplicity. Grader is just a web server running on localhost viewed with the user's browser. If they have Chrome installed then you get a proper looking desktop app (thanks to the --app flag), and access to a bunch of cool APIs to control the browser (thanks to remote DevToosl protocol).
- Extensive APIs. Because you have access to Node.JS and, with Chrome, DevTools APIs there's so many things you can do. You can do almost anything.
- New. Undeveloped. Embryonic. Fragile. Untested. Unknown (relatively).
- Requires Chrome to be installed for a great experience (some people don't have it).
- Bundles Node.JS (and packs using upx but the binaries are still bigger than using Tauri or Neutralino).
- API still undeveloped and likely to change.
- Icons (for the binary) don't work (and it's a hard problem).
- Create a new Grader app
- Fill out the sections with your business logic and app specific node
- Compile to get cross-platform binaries
- Code-sign your binaries and upload them to app stores or GitHub releases or your own website.
- Use
impossible non-existant(future?)packaging tool to bundle each binary in a soothing bath of platform specific app metadata that includes icons and associated weird OS specific coolness to make things truly awesome.
Copyright (c) 2020, Dosyago and/or its affiliates. All rights reserved.
This is a release of Grader, an cross-platform app builder.
License information can be found in the LICENSE file.
This software is dual-licensed. For information about commercial licensing, see Dosyago Commercial License for OEMs, ISVs and VARs.
- wingrader - windows 95 cross platform
- jspaint.exe - classic paint cross platform
npx graderjs my-appOnly a couple of API calls, classed into four categories: Protocol, NodeJS, App, Window.
Read the API docs for a detailed usage or see below for an overview.
Instrument the browser directly with DevTools*.
- constrol.send(command, params)
- control.on(eventName, handlerFunction) (also off)
*See commands available at DevTools protocol homepage
As normal just use npm to add dependencies and import to use them
- launch:
go() - shutdown:
stop()
- ui.open
- ui.close
- ui.move
- ui.size
- ui.minimize
- ui.maximize
- ui.restore
- ui.fullscreen
- ui.partscreen
- ui.getLayout
- ui.openBlank (not yet implemented)
- ui.writePage (not yet implemented)
- ui.getScreen
Then, read the API docs or see below for the Getting Started Goose Guide.
Open an issue!
Use npm to get the Grader.JS tool to automatically populate your new grader app.
$ npm i -g graderjs@latest
$ graderjs my-new-appThen, read the API docs or see below for the Getting Started Goose Guide.
Or...
Click "Use This Template" on the base-repo and you will have a new repo, then clone it to your workspace and cd into it, and run:
npm iThen...
Read the API docs, or create yer binaries right away:
./scripts/compile.shYou now have a GUI app in Node.JS and JavaScript/HTML/CSS.
And you will have cross-platform binaries available in /bin
(and also for download from the computer you're on at port 8080.)
Put your own code into, src/app.js:
E.g:
import Grader from './index.js';
start();
async function start() {
await Grader.go();
}And put your JS/HTML/CSS into, src/public/index.html:
<meta charset=utf-8>
<title>Your Cross-Platform App</title>
<style>
:root {
font-family: sans-serif;
background: lavenderblush;
}
body {
display: table;
margin: 0 auto;
background: silver;
padding: 0.5em;
box-shadow: 0 1px 1px purple;
}
h1 {
margin: 0;
}
h2 {
margin-top: 0;
}
</style>
<h1>Hello World!</h1>
<h2>Meet <i>Grader</i></h2>
<p>
<button onclick="grader.ui.minimize();">_</button>
<button onclick="grader.ui.restore();">⬜</button>
<button onclick="grader.ui.close();">x</button>
<script>
(async () => {
await graderReady();
const [title, favicon, startURL] = (await Promise.allSettled([
grader.meta.getTitle(),
grader.meta.getFavicon(),
grader.meta.getStartURL()
])).map(({status, value, reason}) => {
if ( status == 'fulfilled' ) return value;
return reason;
});
console.log({title, favicon, startURL});
document.title = title;
})();
</script>Read the API docs!
./scripts/compile.shYou now have a GUI app in Node.JS and JavaScript/HTML/CSS.
And you will have cross-platform binaries available in /bin
and also for download from the computer you're on at port 8080.
For more demos see the demos in src/demos.
You can configure some options, via the configuration located in src/config.js:
module.exports = {
name: "MyGraderApp",
entry: "./app.js",
author: {
name: "my name",
url: "https://github.com/my-github-username",
},
desiredPort: 49666,
version: "0.0.1",
description: "A Beautiful Demonstration",
source: "https://github.com/my-github-username/MyGraderApp",
organization: {
name: "My Org",
url: "https://github.com/my-github-org-name"
},
apiOrigins: [], // origins allowed to call API from UI (not implemented)
DEBUG: false // switch on debug output when you're ready to debug
}
See the API docs for more. Or just read the README.md of the grader app you've just created, it contains the full API docs. You can also take a look at the API code in src/index.js.
You're free to use this so long as you abide by AGPL-3.0. If you want to use it commercially or don't want this license, you can purchase an exemption.
See this list of Electron alternatives for more options for cross-platform desktop app developement using web technologies.
WARNING: This project uses Google Chrome to display the UI. Running this will download and install Google Chrome if you don't already have it installed. If you are allergic to Google Chrome, please avoid running or ingesting this coode.