Website logoFermion

How to add IDE and coding labs to your website?

This article discusses integrating an IDE and including evaluative coding labs under your organization. Here are some key points before we jump in:

  • Team Fermion will provide you access to the Fermion dashboard as well as an API key which can be used to access all our services programmatically.
  • All labs will be created and managed from the Fermion dashboard.
  • Programmatic access will be provided to embed a lab in any page so the user can attempt it.
  • All reports will be available to download in the Fermion dashboard and through an API if required.

What is a coding lab?

A coding lab is an immersive experience where users learn by doing. We support every popular technology. Here’s a non-exhaustive (but popular) list:

  • Node.js
  • Bun
  • Python
  • Rust
  • C/C++
  • Java
  • C#
  • Solidity
  • Golang
  • PHP
  • Swift
  • SQLite
  • Every frontend framework

Note that once a compiler/programming language is supported, every associated framework with it is supported automatically.

For example, with Java, we automatically support Springboot. With Python, we automatically support Django, flask, etc. With Node.js, we automatically support Express, etc., and so on.

On top of this, you can add evaluation inside every lab. This means that you can check and grade the work done by user automatically, just like how you would do when working with them 1:1.

Here’s how a coding lab environment looks like:

How do you create a coding lab?

Complete documentation has been laid out at docs.fermion.app, where you can follow the instructions according to the technology you want to use, and create coding labs.

How do you use Fermion to embed coding labs in your LMS?

Fermion is a powerful system for hosting your full business – live classes, courses, bundles, 1:1 calls, coding labs, and more. Learn more about Fermion here. However, we understand that migrations from legacy systems are tough and can take time. If you wish to use coding labs from Fermion in your existing system, we support that. You can programmatically access Fermion playgrounds and embed everything in your existing solution.

Fermion is compatible with BYOL (Bring your own LMS). If you have an existing LMS, you can subscribe to coding labs on Fermion and start embedding labs inside your LMS. It works how you embed a YouTube video, but instead a much nicer experience overall.

How to embed a coding lab from Fermion?

Before starting the embed process, you need two things:

  1. A school on Fermion
  2. Fermion API key

Contact support to get both of these things set up for you.

After creating a lab from your Fermion Dashboard, you will get a unique identifier of the lab called labId. Here’s what it would look like:

Clicking the Embed coding lab button would give you access to the labId and other important parameters.

On any page in which you wish to let the user attempt the lab, you need to embed an iframe as follows:

<iframe
	width="1280"
	height="720"
	src="https://acme2.fermion.app/embed/lab?token=EMBED_TOKEN_HERE"
	title="Coding Lab"
	frameborder="0"
	allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope;
	picture-in-picture; web-share"
	referrerpolicy="strict-origin-when-cross-origin"
	allowfullscreen>
</iframe>

Here, the EMBED_URL needs to be securely generated on your backend as follows:

  1. The embed URL will always contain the following part: https://example.fermion.app/embed/lab?token=.
  2. After this, you need to generate a JWT (JSON Web Token) containing the following claims
    JWT token must be signed with your Fermion API Key. Example JWT: here
    1. labId (String) – This is the unique identifier of the lab as mentioned above.
    2. userId (String) – This is a string that you have stored in your database that can uniquely identify a given user. You have to ensure that you store this identifier properly in your database and reuse it every time a user tries to access any lab.
  3. Append this generated JWT token to the end to get the final embed URL.

To understand how to generate a JWT token, please refer to official documentation here: https://docs.fermion.app/docs/creating-coding-labs/embedding-lab

How can I access lab results?

Public API

We have an OpenAPI-spec compliant public API you can use, once you have access to FERMION_API_KEY. You can use this API to query multiple data points for your organization.

Please check the API documentation here.

window.postMessage results

Alongside this, when you embed the lab on your domain, we will also emit events in real time through window.postMessage API. You can read more about window.postMessage API here.

Note that you must not fully rely on events emitted by window.postMessage you because of security reasons. Please do a server-side validation with our real API endpoint to be sure of the final result. You can use messages from window.postMessage to optimistically display results, however, since it is a client-side API, it is possible to hijack the event data by the untrusted user.

You can listen to every postMessage like this:

window.addEventListener('message', event => {
	const payload = event.data

	if (payload == null || typeof payload !== 'object' || !('eventType' in payload)) {
		// not from fermion
		return
	}

	if (payload.eventType === 'fermion-lab-run-finished') {
		// do further processing
	}
})

We also recommend processing event.data with zod if you can. Our schemas are strictly typed and are zod-parseable.

For a list of events emitted by Fermion, please refer to official documentation: https://docs.fermion.app/docs/creating-coding-labs/embedding-lab

Have a doubt?

In case something doesn’t work right, or you have any doubt, please feel free to reach out to us at [email protected] with your query, we’d be happy to resolve it at the earliest.