Camunda React

This project contains a simple UI written in ReactJs that can be used to demonstrate how to start a Camunda Process Instance and how to view User Tasks.

Quick Start

See the camunda-demo-starter project to quickly start a fully functional Camunda 7 or 8 demo environment that includes this project.

Development

This project is a Spring Boot Java Application that runs a ReactJs web application. This makes it possible to take advantage of Spring Security and other Spring goodies.

Clone this project (the camunda-demo-ui project) to your local machine

git clone https://github.com/camunda-consulting/camunda-demo-ui

The camunda-demo-ui directory contains the relevant files for this project.

Once you have the code, use maven to compile both the ReactJs App and Spring Boot

cd camunda-demo-ui
mvn clean spring-boot:run

Note	The app will be available on port 8080

http://localhost:8080

The Maven build will perform the following:

• Install the correct versions of NPM and Node

• Create the node_modules directory with the necessary dependencies

• Use Webpack to build/transpile the JSX files into a bundle.js javascript file

• Copy bundle.js into src/main/resources/static/built

• Build the Spring Boot Application that uses Thymeleaf to serve the ReactJS UI

More Details about the Spring Boot Project

• Thymeleaf is a spring project for UI templating. It looks in the src/main/resources/templates directory for a .html file to serve.

• A Spring Controller is configured to serve the HTML on a specific context path. See the controller src/main/java/com/camunda/poc/starter/controller/ui/UiApplicationController.java

Configure the camunda-data-api endpoint

This project relies on the camunda-data-api project to provide a backend api where the React app gets data.

In the .env file in the project home directory change the environment variables to match the spring-boot server context for the data-api.

Note	The connection to the demo data api is configured in .env

DATA_API=http://127.0.0.1:9000/api

Warning

CORS is disabled by default with SimpleSecurityFilter.java

Docker Compose

When demoing or distributing it makes sense to build this project with docker-compose. When you follow the "Quick Start" steps in the camunda-demo-starter project, the docker image is already built and deployed as a GitHub Package. But, if you are customizing this project, you can also run the docker-compose command like so:

 docker-compose -f docker-compose.ui.yml up -d --build reactjs

Developing with NodeJs

Even though everything can be built using mvn, it’s often convenient to use npm and webpack to run the ReactJs webapp so that it’s possible to update react javascript files and then refresh the browser to see the changes in real time.

• Run or just build the spring-boot project with either command. This will install all node, npm and the dependencies

  mvn clean spring-boot:run

  or

  mvn clean install -DskipTests

• Start a node server process

  npm run live

• Start another terminal and start a webpack process

  npm run watch

• Confirm the node and webpack processes are up and running.

  • Browse to http://localhost:3000/app.html and ensure that the form is displayed.

  • Make a change to /src/main/js/reactjs/app.jsx. Wait for webpack to build the new bundle.js, then refresh the browser and make sure you see your changes.

More Details about Javascript Environment

• The Javascript/JSX files of interest are in the src/main/js folder.

• The files in src/main/js/reactjs/application/components are reusable components.

• The files in src/main/js/reactjs/application/usecase are use case specific components

• The file src/main/js/reactjs/application/app.jsx is the entry point to the application.

Add new single page app

This project is organized to make it easy to add new single page web apps. Each app can reuse shared components as needed. Create a new app in 3 steps:

1. Create a new "entrypoint" jsx file. Entry point components typically render a main React component into a html page. For example, src/main/js/reactjs/application/login.jsx mounts a <Login/> react component.

2. Update the webpack.config.js to produce a bundle js file for the entrypoint. For example, the following snippet tells webpack to transpile login.jsx (and all of it’s transitive dependencies). The result will be a javascript file named login.bundle.js inside the src/main/resources/static/built directory.

  entry: {
    ...
    login: path.resolve(__dirname, 'src/main/js/reactjs/application/login.jsx'),
    ...
  },

1. Use the javascript file from an html file. For example, src/main/resources/templates/login.html simply includes the login.bundle.js file like so:

    <div id="react"></div>
    <script src="built/login.bundle.js"></script>