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.

See wiki for helpful links, suggestions and further documentation.

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 essence blocks, data input window, generated essence code, and block solution
• 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 the original toolbox has been replaced by Essence-specific blocks
• blocks/essence.js has code for custom Essence blocks
• generators/json.js contains the JavaScript generator for block data input window
• 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.