Go to the m2c2kit playground to run assessments, examine code, and create new assessments in your web browser.
Local install of a full m2c2kit development environment is recommended to create new assessments. A local install provides debugging, code bundling, TypeScript, and many other features that are not available in the playground. You can develop on Windows, Mac, or Linux.
- Node.js (version >=18; version 20 LTS recommended). Required.
- Visual Studio Code. Recommended.
- Google Chrome. Recommended.
- Git. Recommended.
Installing and Using the Command Line Interface (CLI)
The CLI quickly scaffolds a demo app and serves it on your local machine.
First, install the CLI globally. You need to do this only once. From your command line:
npm install -g @m2c2kit/cli
Second, create a new app. The executable name for the CLI is
m2. We'll name this demo app
m2 new myapp
npm run serve
You can now browse to
http://localhost:3000 to view the demo app.
Local Development with Visual Studio Code
Visual Studio Code (VS Code) is a great editor for local m2c2kit development, and the CLI configures your app code to work with it.
After creating your app with the CLI, open your app in VS Code (
code . opens the current folder in VS Code):
If you are asked, "Do you trust the authors of the files in this folder?", click "Yes."
You can run NPM scripts directly in VS Code if you show the NPM Scripts explorer. Click the three dots in the upper right of the file explorer, and select "NPM Scripts":
The NPM Scripts explorer is now visible.
Running your app
To build and serve the app, in the NPM Scripts explorer click the triangle in the "serve" script:
This serves the app locally on your computer. On Windows, the first time you do this, you may be asked to allow Node.js access to private and public networks. Enable both and click "Allow Access":
To run the app in debug mode, show the Debug panel by clicking on the triangle with a bug on it. Then, click the launch button (green triangle). This will open a new browser window with the app running in debug mode:
Note: the m2c2kit CLI configured VS Code to use the Chrome debugger. If Chrome is not installed, the launch will fail. To use a different browser, edit the
launch.json file in the
.vscode folder: For Edge, set the
msedge. For Firefox, install the Debugger for Firefox and follow the instructions to edit
The "serve" script automatically rebuilds your app when you save changes to your code ("watch mode").
In the example below, we launch the app. Then, in the file
index.ts we change the heading on the first instructions page from "myapp" to "myapp is great". As soon as the file is saved, the app is rebuilt and reloaded in the browser: