Code FREAK ships with an online IDE that can be used by students to edit their answers without leaving the browser. The current IDE is based on Microsoft’s Visual Studio Code (VSCode) that has been ported to the browser by the "Coder" Team and the Community. VSCode does not only allow editing source code files but also makes it possible to compile and debug a full application. Because you cannot run arbitrary programming languages in your browser the IDE use a backend service running inside a Docker container which does the actual work, like modifying files, compiling code and executing programs. The UI in the browser will delegate all tasks to the server. Thus, it is currently not possible to communicate with local hardware like USB devices (microcontrollers, …).
Basically, the Online IDE has the same features as VSCode. Here are some highlights:
Supports every major programming language. See VSCode’s official documentation for a full list of supported languages.
Compatible with VSCode Extensions
Smart Auto-Completion (IntelliSense)
Supports drag&drop for files from the local machine into the browser
If you need a different version of extensions and/or compilers you have to create a custom version of the IDE image manually.
To modify only some settings of VSCode you can make use of the
.vscode workspace directory and place a
As a starting point you can use the
Dockerfile of our IDE repository.
Customize the Dockerfile for your needs and publish it to Docker Hub.
Docker provides an official documentation how to get started with Docker and how to create, run and share images here.
IDE images have to fulfill the following requirements:
It publishes a webserver on port
3000(on all IP addresses!)
The containers runs with the user
Project files are stored at
Each task may use a custom IDE image.
You can either configure this via
codefreak.yml or in the UI.
The following is a
codefreak.yml with the default settings:
# ... ide: enabled: true (1) image: cfreak/ide (2)
|1||For new tasks the IDE is enabled by default. The IDE can be disabled by setting
|2||Optionally, you can provide a custom Docker image like described in the previous section.|
You can configure the same settings in the UI at
Task > Edit Details > Online IDE.
The default IDE Docker image based on VSCode ist published as
cfreak/ide on Docker Hub.
Check out our official source repository on GitHub to find out which extensions come preinstalled with this image.
Based on this image you can create your own customized IDE with additional plugins or other default settings. The following example Dockerfile installs an additional Extension
TSLint from the VSCode Marketplace.
FROM cfreak/ide:1 RUN code-server --install-extension ms-vscode.vscode-typescript-tslint-plugin (1)
|1||You will find the unique identifier of your desired extension on the VSCode Marketplace|
Place you custom
Dockerfile in a dedicated directory on your machine and build it. Please check out the official Docker documentation on how to create, build and publish your first image here.
If you build your image successfully, e.g. with the tag
my-ide-image, you can try it out locally with the following command. This will launch a VSCode instance on port 3000 that you can open in your browser via
docker run --rm -itv$PWD:/home/coder/project -p3000:3000 my-ide-image