Giter VIP home page Giter VIP logo

control-app's Introduction

React.js + Camunda BPM 7 + REST API (Node.js) Integration POC

This repository contains a proof of concept (POC) demonstrating the integration of React.js, Camunda BPM, and a REST API built with Node.js. The POC showcases a containerized application using Docker, combining frontend, backend, and process orchestration capabilities.

About

The purpose of this POC is to showcase how React.js, Camunda BPM, and a Node.js REST API can be seamlessly integrated to build a full-stack application. It demonstrates the coordination between the user interface, backend services, and process orchestration using BPMN workflows. The combination of these technologies enables efficient business process automation, task management, and data storage.

Key Features

  • React.js Frontend: The frontend is built using React.js, a popular JavaScript library for building user interfaces. It provides a responsive and interactive user interface for interacting with the application.

  • Camunda BPM: Camunda BPM is an open-source platform for workflow and decision automation. It offers a robust process engine capable of executing BPMN workflows, managing process instances, and handling user tasks.

  • Node.js REST API: The backend REST API is implemented using Node.js and Express.js. It provides endpoints for data retrieval, storage, and interaction with the Camunda BPM engine.

  • MongoDB: MongoDB is used as the database to store process-related data. It provides a flexible and scalable solution for persisting process instances and associated information.

Quick start

Note: Make sure you have the following dependencies installed: git, docker, docker-compose.

To start the application, follow these steps::

  1. Clone the repository:

    git clone https://github.com/AlexSKuznetsov/control-app.git
    
  2. Navigate to the project directory:

    cd control-app
    
  3. Run the application using Docker Compose:

    docker-compose up

    To run the application in detached mode, use the following command instead:

    docker-compose up -d
  4. Upload the BPMN model from the camunda directory to the Camunda Engine using the Camunda Modeler. You can download the modeler from here

Links to different parts:

Here are the links to access different parts of the application:

Tech stack

1. Frontend:

  • React
  • Typescript
  • Vite
  • React Router
  • React Query
  • Material UI

2. Backend Rest API:

  • Node.js
  • Express.js

3. Mongo DB:

  • Storing Process Data correlated with Process ID

4. Camunda BPM 7:

  • Process Orchestrator with BPMN support

That's it! You now have the application up and running with the various components integrated.

control-app's People

Contributors

alexskuznetsov avatar

Stargazers

 avatar

Watchers

 avatar  avatar

control-app's Issues

Could not upload BPMN from Modeler app

I attempted to quickly start this project but encountered difficulty accessing the Zeebe endpoint from the Camunda Modeler. It shows an error: "Should point to a zeebe cluster".
Screenshot 2023-07-06 at 16 09 35

I am currently using the latest version of the Modeler app and attempting to access Zeebe through http://localhost:8080/engine-rest.
There is no errors in log, I can access camunda endpoints such as http://localhost:8080/camunda

Here is what I get from zeebe expected endpoints

➜  control-app git:(main) curl http://localhost:8080/engine-rest
{"type":"NotFoundException","message":"RESTEASY003210: Could not find resource for full path: http://localhost:8080/engine-rest","code":null}% 
➜  control-app git:(main) curl http://localhost:8080/engine-rest/engine
[{"name":"default"}]

Do I need to have an extra setup? What can cause the problem?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.