Packaging a Course as an Application

Packaging an Adapt Course as a Stand-alone Desktop Application

Web technology—HTML, JavaScript, Backbone—is at the heart of Adapt. Adapt courses are naturally at home on a web server. But there are times when a web server is not available when and where your content needs to be accessed. Node.js and other node-like runtimes provide the ability to present web applications as stand-alone desktop applications. The basic technique is outlined below for two such runtimes. This information is provided to jump-start your efforts. Due to the rapid nature of software development, please reference the websites of your chosen framework for the latest binaries, APIs, and techniques.

Using electron and electron-packager

• electron (http://electron.atom.io/): electron can be downloaded as a project and compiled locally. It can be installed on a computer.
• electron-prebuilt (https://github.com/electron-userland/electron-prebuilt): electron-prebuilt provides pre-compiled binaries to be included in applications that are run on computers that don't have electron installed.
• electron-packager (https://github.com/electron-userland/electron-packager): electron-packager bundles your app (your Adapt course) with the binaries for easy distribution.
• electron-builder (https://github.com/electron-userland/electron-builder): electron-builder installs the application on the end-user's computer. This is not addressed below.

Summary of steps:

1. Prepare a build of your Adapt course.
2. Modify the contents of the build to make it compatible with electron.
3. Add the pre-built electron runtime to our app.
4. Package the app while specifying the operating systems for which it will be built.

Note: All instructions assume that npm has been installed globally.

###Steps:

1. Install the electron-packager globally. (You may need to do this with advanced permissions.)
   npm install electron-packager -g

2. Prepare a build of your Adapt project. Either publish a SCO zip and extract it or copy and relocate your project's build folder.

3. Copy package.json from electron-quick-start (https://github.com/electron/electron-quick-start/blob/master/package.json) and paste into the root of your app (your build folder).

4. Modify package.json to reflect your app: “name”, “version”, “description”, etc.

5. Copy main.js from electron-quick-start (https://github.com/electron/electron-quick-start/blob/master/main.js) and paste into the root of your app.

6. Modify main.js as you see fit. Some modifications to consider:

   • Are the window dimensions found within the createWindow function appropriate?
   • Is your root HTML page named index.html as it is in the createWindow function?
   • If you don't want the DevTools frame to be seen as soon as the window opens, comment out the openDevTools line.

7. Ensure that the file name of main.js matches the value in package.json for “main” and “scripts.start”. (You can change the name of main.js as long as the values in package.json are changed to match.)

8. The following code eliminates conflicts between “require” symbols. Paste it into the head of index.html:

   <script>
       window.nodeRequire = require;
       delete window.require;
       delete window.exports;
       delete window.module;
   </script>

9. Navigate into the root of the app and run
   npm install electron-prebuilt --save

10. Again from within the root of your app, run
    electron-packager . --all
    or create a package for a desired operating system by specifying options, like this:
    electron-packager . --platform=win32 --arch=ia32 --overwrite
    Note: The options in the above command line can be changed to meet your needs. Reference https://github.com/electron-userland/electron-packager or https://github.com/electron-userland/electron-packager/blob/master/usage.txt.

11. Optional. Rebrand the packages using information from: http://electron.atom.io/docs/v0.37.5/tutorial/application-distribution/#rebranding-with-downloaded-binaries

Back to Top

Using NW.js

Issues to watch for:

• code signing on Mac
• Videos may require extra attention. Test to ensure the component chosen to handle your video is compatible.

Summary of steps:

1. Prepare a build of your Adapt course.
2. Modify the contents of the build to make it compatible with NW.js.
3. Add the NW runtime to our app.

Steps:

1. Create a new folder to serve as the root of your app; name it as you'd like.

2. Prepare a build of your Adapt project. Either publish a SCO zip and extract it, or copy your project's build folder. Move the build into you app folder.

3. Rename the build folder package.nw.

4. Create a package.json in the root of your application (not inside package.nw). Add the following base code:

   {
       "main": "package.nw/index.html",
       "name": "nw-app",
       "description": "my app that does this and that",
       "version": "0.1.0",
       "keywords": [ "demo", "this", "that" ],
       "nodejs": false,
       "window": {
           "title": "myapp demo",
           "frame": true,
           "width": 800,
           "height": 500,
           "position": "center",
           "min_width": 900,
           "min_height": 400,
           "resizable": true,
           "icon": null
       }
   }

5. Modify package.json to reflect your app and its needs. Reference http://docs.nwjs.io/en/latest/References/Manifest%20Format. Ensure the value of “main” accurately reflects the path to index.html.

6. Download the pre-built zip of nwjs from http://nwjs.io/downloads/ (not from the standard Github 'Download ZIP' button). Select stable, then normal for your computer's operating system (not your end-user's). Of course, you can use the latest release candidate if you are so inclined.

7. Unzip the downloaded archive. Copy and paste the files (omit the surrounding folder) into the root of your app (not inside package.nw).

8. Verify that the root of your app now contains all the extracted nwjs files, a folder named package.nw containing your course, and a package.json whose “main” accurately reflects the path to index.html.

9. To launch, click nw.exe (or nwjs.app).

10. Optional. Rebrand using information from the documentation: http://docs.nwjs.io/en/latest/

Back to Top