A Docker image is provided with this project:

docker run --rm -p 3000:3000 -v chr-ide-build:/build -v /var/run/docker.sock:/var/run/docker.sock ghcr.io/ttcchhmm/chr-ide:latest

Then open http://localhost:3000 in your web browser.

If you're only using it on your local machine, the Docker image is plug-and-play, no additional configuration is required.

However, if you're hosting it over the network some configuration is required:

• The application should be hosted over an HTTPS connection.
  • This is due to browsers limiting APIs when sites are accessed in an insecure way.
• The allowed origins should be configured in the server configuration.
  • See documentation about CHR_IDE_ALLOWED_ORIGINS in the backend README file.

For a better experience, a browser that supports the File System Access API is recommended. As of writing, only Chromium-based browsers running on a desktop OS are supported.

Browsers without this API will fallback to downloading the current workspace every time the user wants to save.

• An UNIX-based system: Linux (Arch, Ubuntu) and macOS were tested as development targets
  • Windows users are encouraged to use WSL
• Node.js: At least version 22
• CHR++
• A C++ compiler: Both GCC and LLVM should work
  • GCC is used when running CHR IDE with Docker
• Git
• Docker: Optional, only when testing the final production image

Visual Studio Code is the recommended editor when working on this project, but any code editor will do.

The following npm scripts are available across the entire project structure:

• build: Rebuild every workspace from scratch
• clean: Delete build output
• lint: Run ESLint
• dev:backend: Start the backend on port 3000
• dev:frontend: Start the frontend on port 4000
• dev:simple-client: Start the simple client

This project is written using TypeScript and the frontend uses Nuxt with Vue Single-File Components (SFC).

The CHR IDE source is composed of a single monorepo:

• /: Global configuration.
  • /packages: Contains different npm workspaces.
    • /core: Elements shared across every workspace, such as Socket.io typing information.
    • /backend: Server-side software that handle code compilation, execution and the parsing of the generated CHR++ output.
    • /frontend: A Nuxt project for the web interface. See the Nuxt documentation about directory structure to learn more.
    • /simple-client: A basic client to test the backend without having to run the full web interface.
  • /.github/workflows: CI/CD pipelines.
  • /.husky: Git pre-commit hooks, configured using Husky.
  • /.vscode: Recommended Visual Studio Code configuration and extensions.

CHR IDE relies on Socket.io for an asynchronous, event-driven and reliable communication between the backend and the frontend.

sequenceDiagram

loop While the user is on the application
  User ->> Backend: Send a CHR program
  Backend --> Backend: Generate a chrpp file
  Backend ->> User: Inform the user that chrppc is about to run
  Backend --> Backend: Run chrrpc
  break If chrppc fails
    Backend ->> User: Inform the user that chrppc failed
  end
  Backend ->> User: Inform the user that the C++ compiler is about to run
  Backend --> Backend: Run a C++ compiler
  break If the C++ compiler fails
    Backend ->> User: Inform the user that the C++ compiler failed
  end
  Backend ->> User: Inform the user that the program is about to run
  Backend ->> Program: Start
  loop While the program is running
      break If the process ends unexpectedly
        Backend ->> User: Inform the user that the program failed
      end
      Program ->> Backend: Send a CHR trace
      Backend --> Backend: Parse the trace
      Backend ->> User: Send the parsed result
      User --> User: Update the interface
  end
  Program ->> Backend: End
  Backend ->> User: Inform the user that the execution finished
end

To build the Docker image from sources, run:

docker build -t chr-ide:latest .

And to run it:

docker run --rm -p 3000:3000 chr-ide:latest

This project was made under the supervision of Vincent Barichard, associate professor at LERIA (University of Angers) and the author of the CHR++ project.

CHR IDE was written by:

• Quentin Raimbault
• Victor Loiseau
• Tom Chedmail