Essence Code Editor

built on Blockly - a library from Google for building beginner-friendly block-based programming languages

README.md adapted from the README from the sample app.

Structure

• package.json contains basic information about the app. This is where the scripts to run, build, etc. are listed.
• package-lock.json is used by npm to manage dependencies
• webpack.config.js is the configuration for webpack. This handles bundling the application and running our development server.
• src/ contains the rest of the source code.
• dist/ contains the packaged output (that you could host on a server, for example). This is ignored by git and will only appear after you run npm run build or npm run start.

Source Code

• index.html contains the skeleton HTML for the page. This file is modified during the build to import the bundled source code output by webpack.
• index.js is the entry point of the app. It configures Blockly and sets up the page to show the blocks, the generated code, and the output of running the code in JavaScript.
• serialization.js has code to save and load the workspace using the browser's local storage. This is how your workspace is saved even after refreshing or leaving the page. You could replace this with code that saves the user's data to a cloud database instead.
• toolbox.js contains the toolbox definition for the app. The current toolbox contains nearly every block that Blockly provides out of the box. You probably want to replace this definition with your own toolbox that uses your custom blocks and only includes the default blocks that are relevant to your application.
• blocks/essence.js has code for custom Essence blocks
• generators/javascript.js contains the JavaScript generator for the custom text block. You'll need to include block generators for any custom blocks you create, in whatever programming language(s) your application will use.
• generators/essence.js contains Essence generator for Essence blocks.

Serving

To run your app locally, run npm run start to run the development server. This mode generates source maps and ingests the source maps created by Blockly, so that you can debug using unminified code.

To deploy your app so that others can use it, run npm run build to run a production build. This will bundle your code and minify it to reduce its size. You can then host the contents of the dist directory on a web server of your choosing.