Coding labs is a powerful feature of Fermion. Using coding labs in your platform, you can increase user retention, provide hands-on experience to them, and make them learn-by-doing. Let’s take a look at how you can setup a Node.js interactive coding lab in this guide.

​
Step 1 - Creating the Lab

  • Add a new item lab in your course curriculum page
  • A new lab item gets added. Edit the lab using the controls:
  • A lab item in a course can be attached to an existing lab you created in the past. If not, you can create a new lab with this Edit interface:
  • You should now be able to write a quick lab name and press on “Create Lab” button. Once you do, press on Attach to course item button. Once that is done, click the three dots again and click on “Edit” to edit the lab.

​
Step 2 - Lab Instructions

Once you click on Edit button a new page will open. On this page you need to setup instructions for lab. These instructions would be visible to the user when they’re attempting the lab. Therefore, include all the helper material, lab setup instructions here.

​
Step 3 - Lab Defaults

Lab defaults section include how your lab environment boots. It is one of the most important parts because a wrong default environment might confuse your students. Therefore it is important to set it up properly.
We recommend forking this repository: Node.js playground starter.
The repository also includes a .cdmrc file, a critical configuration file for Fermion labs. Familiarize yourself with the .cdmrc guide to understand how it works before proceeding.

​
Step 4 - Evaluation Script

Evaluation script is actually what runs when the user on the playground clicks on “Run Tests” button. Since we’re going to test this lab using Vitest, we’ll setup the Vitest testing environment. This is what your evaluation script would look like: 
#!/bin/bash
set -e 1

# Install vitest and testing util
cd /home/damner/code
bun add vitest@0.32.2 jsdom@22.1.0 @testing-library/jest-dom@5.16.5 --dev
mkdir -p /home/damner/code/.labtests

# Move test file
mv $TEST_FILE_NAME /home/damner/code/.labtests/nodecheck.test.js

# setup file
cat > /home/damner/code/.labtests/setup.js << EOF
import '@testing-library/jest-dom'
EOF

# vitest config file
cat > /home/damner/code/.labtests/config.js << EOF
import { defineConfig } from 'vite'

// https://vitejs.dev/config/
export default defineConfig({
	plugins: [],
    test: {
        globals: true,
		environment: 'jsdom',
		setupFiles: '/home/damner/code/.labtests/setup.js',
    }
})
EOF

# process.js file
cat > /home/damner/code/.labtests/process.js << EOF
import fs from 'node:fs'
const payload = JSON.parse(fs.readFileSync('./payload.json', 'utf8'))
const answers = payload.testResults[0].assertionResults.map(test => test.status === 'passed')

fs.writeFileSync(process.env.UNIT_TEST_OUTPUT_FILE, JSON.stringify(answers))
EOF

# package.json
cat > /home/damner/code/.labtests/package.json << EOF
{
    "type": "module"
}
EOF

# run test
(bun vitest run --config=/home/damner/code/.labtests/config.js --threads=false --reporter=json --outputFile=/home/damner/code/.labtests/payload.json || true)  | tee /home/damner/code/.labtests/evaluationscript.log

# Write results to UNIT_TEST_OUTPUT_FILE to communicate to frontend
cd /home/damner/code/.labtests
node process.js
This will make sure we run the full Node.js script and write the results properly for the playground IDE to read. It would look like the following: Note: You can setup a full testing environment in this block of evaluation script (installing more packages, etc. if you want). However, your test file will be timed out after 60 seconds. Therefore, make sure, all of your testing can happen within 60 seconds.

​
Step 5 - Test file

In the same Evaluation tab, you’ll see another section called “Custom test file”. You can use this test file to add custom code for testing user work. When you click on it, a new window will open. This is a test file area. You can write anything here. Whatever script you write here, can be executed from the Test command to run section inside the evaluation tab we were in earlier. The point of having a file like this to provide you with a place where you can write your evaluation script. For Node.js labs tested with Vitest, you can use the default test file: 
describe('Test runner suite', () => {
	test('Variable should be exported', async () => {
		const userVariable = await import('/home/damner/code/index.js').then(
			(t) => t.default
		)

		expect(typeof userVariable === 'undefined').to.be.false
	})

	test('Variable should have correct value', async () => {
		const userVariable = await import('/home/damner/code/index.js').then(
			(t) => t.default
		)
		expect(userVariable === 'Hello World').to.be.true
	})
})
This completes your evaluation script for the lab. Your lab is now almost ready for users.

​
Step 6 - Add challenges

Finally, in the UI below, add friendly name of challenges that must be visible to the user. Note that the order of challenges is important here and must match the boolean array you write using the bash script + test file above.