Skip to main content

Block validation and warnings

2. Setup​

Create the application​

Use the npx @blockly/create-package app command to create a standalone application that contains a sample setup of Blockly, including custom blocks and a display of the generated code and output.

  1. Run npx @blockly/create-package app validation-and-warnings-codelab in your terminal. This will create a Blockly application in the folder validation-and-warnings-codelab.
  2. Use cd to move into the new directory: cd validation-and-warnings-codelab.
  3. Run npm start to start the server and run the sample application.
  4. The sample app will automatically run in the browser window that opens.

The local address in the address bar of your browser starting with http://localhost: shows where your app is. If you accidentally close this window or tab, you can re-open this local address to view the app as long as npm start is still running.

Change the storage key​

Before setting up the rest of the application, change the storage key used for this codelab application. This will ensure that the workspace is saved in its own storage, separate from the regular sample app, so that it doesn't interfere with other demos.

In src/serialization.js, change the value of storageKey to some unique string. validationWorkspace will work:

// Use a unique storage key for this codelab
const storageKey = 'validationWorkspace';

Explore the starter code​

Take a moment to explore the code you just created in the validation-and-warnings-codelab folder. If you'd like a more in-depth explanation of all of the code in the sample app, check out the getting started codelab which goes through creating this sample app from scratch.

For a briefer outline of the code, visit the sample app overview page for an overview of the included files and tooling.

The pieces that matter most for this codelab are:

  • src/blocks/text.js - defines the app's custom blocks using Blockly's JSON API. This is where we'll add our new block.
  • src/generators/javascript.js - defines how to generate JavaScript code from the custom blocks.
  • src/toolbox.js - defines which blocks are available in the toolbox.
  • src/index.js - registers the blocks and generators, injects the workspace, and re-runs the generated code whenever the workspace changes.