Skip to main content

Getting Started

No-install quickstart​

Go to the m2c2kit playground to run assessments, examine code, and create new assessments in your web browser.

Local install​

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.

Prerequisites​

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
😕 Problems?

If you saw a message similar to Command 'npm' not found or 'npm' is not recognized as an internal or external command, operable program or batch file., make sure you installed Node.js. You may need administrator privileges to do this.

Second, create a new app. The executable name for the CLI is m2. We'll name this demo app myapp:

m2 new myapp
cd myapp
npm run serve

You can now browse to http://localhost:3000 to view the demo app.

😕 Problems?

If you saw error messages after you typed m2 new myapp, make sure you installed the CLI in the first step above. Then, make sure you are not in a special, protected directory. For example, on Windows, the command line prompt might start in c:\windows or c:\, which you may not be able to write to. Try this:

mkdir c:\m2c2kit

cd c:\m2c2kit

m2 new myapp

cd myapp

npm run serve

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):

cd myapp
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 type to msedge. For Firefox, install the Debugger for Firefox and follow the instructions to edit launch.json.

Watch mode​

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: