💦 GRaderJS

Turn your full-stack NodeJS application into a downloadable cross-platform binary. Also works for SPAs, or regular web-sites.

Features that work right out of the box

• 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). ✔️

Features that don't (yet?) work

• 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). 💀

What are apps built with GraderJS, technically?

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:
  1. starts the back-end service
  2. unzips the front-end to a temporary directory
  3. probes the screen to find its dimensions using a silently launched chrome window (and downloads and installs chrome if it is not)
  4. 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:

1. Look like a native app and run on the desktop.
2. Have full access to the system.
3. 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

Details

Minimal binary is 50MB (Macos, Hello World App, using node v16.16.0, with executable built by pkg).

• Overview
  • Details
  • Advantages
  • Disadvantages
  • Grader workflow
  • Extended Workflow
  • Ultimate Workflow
  • License
  • Built with Grader
• Getting Started
  • API & Documentation
  • Extraordinary Control
  • NodeJS related
  • App lifecycle
  • Window related
  • Docketty Docs
  • Questions
• Step by step guide
  • Get Started from the Command line
  • Get Started from GitHub
  • Start Building!
  • Start Coding
• API
• Then build it
• Configuration
• Screenshots
• More
• Licensing
• Related projects

Advantages

• 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.

Top

Disadvantages (...or, Opportunities, and Opportunities for Improvement? Yes)

• 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).

Top

Grader Workflow

1. Create a new Grader app
2. Fill out the sections with your business logic and app specific node
3. Compile to get cross-platform binaries

Top

Extended Workflow

4. Code-sign your binaries and upload them to app stores or GitHub releases or your own website.

Top

Ultimate Workflow (still impossible)

5. 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.

Top

License

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.

Top

Built with Grader

• wingrader - windows 95 cross platform
• jspaint.exe - classic paint cross platform

Top

Getting Started

npx graderjs my-app

Top

API & Documentation

Only 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.

Top

Protocol Control

Instrument the browser directly with DevTools*.

• constrol.send(command, params)
• control.on(eventName, handlerFunction) (also off)

*See commands available at DevTools protocol homepage

Top

NodeJS related

As normal just use npm to add dependencies and import to use them

App Lifecycle

• launch: go()
• shutdown: stop()

Top

Window Related

• 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

Top

Docketty Docs

Then, read the API docs or see below for the Getting Started Goose Guide.

Top

Questions

Open an issue!

Top

Step By Step Guide

Get Started from the Command line

Use npm to get the Grader.JS tool to automatically populate your new grader app.

  $ npm i -g graderjs@latest
  $ graderjs my-new-app

Then, read the API docs or see below for the Getting Started Goose Guide.

Or...

Top

Get Started from GitHub

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 i

Then...

Top

Start Building!

Read the API docs, or create yer binaries right away:

./scripts/compile.sh

You 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.)

Top

Start Coding

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();">&#11036;</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>

API

Read the API docs!

Top

Build it

./scripts/compile.sh

You 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.

Configuration

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
}

Top

Screenshots

Top

More

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.

Top

Licensing

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.

Top

Related projects

See this list of Electron alternatives for more options for cross-platform desktop app developement using web technologies.

Top

nerding warnung

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.

Top

Grader.JS!