Contributing.md

Contributing

To the Operaton web apps aka. the front-end.

Getting started

1. Either create your own issue on GitHub or claim an existing one (for an easier start look for the good first issue tag)
2. Make sure to install all required tooling as stated in the Readme.md
3. Read the rest of this document
4. Read the Coding Conventions
5. If necessary, ask for help either
   • in the GitHub issue related to your contribution, or
   • in the Forum, or
   • in the Chat (TBD)

Using the old web apps as an example

You can access the old C7 (Camunda 7) web apps when starting the backend with the docker-compose file:

• Operaton: localhost:8084
• C7: localhost:8088

For both, the login information are:

• user: demo
• password: demo

Tools and their Documentation

This project uses:

• Preact
  • preact-iso (routing)
  • Preact Signals
• react-bpmn
• Vite
• Operaton API (currently C7 docs)

Directory Structure

Most important folders and files for getting started with development.

• docs: project related documentation and information
• src: code and resources
  • assets: resources
  • components: reusable Preact/JavaScript UI components
  • css: vanilla CSS for entire project (see below)
  • helper: reusable JavaScript code
  • pages: a dedicated page for every 'app'
  • engine_rest.jsx: all fetch requests to the Operaton REST API
  • index.js: Preact main, routing definitions and global app state
  • state.js: Global app state definition
• .env*: Environment variables

CSS structure

• components: Folder for separate component specific CSS files
• animation.css: Everything related to animations
• components.css: File for small component specific CSS (could be refactored into folder)
• fonts.css: Custom fonts and text styling
• form.css: Everything related to <form> elements and its children
• layout.css: General layout and generic layout helper classes
• normalize.css: Style overwrite for default HTML tags
• variables.css: Custom properties for reuse in other CSS classes