I’m working on automating a small bicycle factory model and I am looking to start my process from a front-end VueJS application. The single page front-end app is ready:
But, I am having troubles triggering Zeebe REST API endpoint from the front-end side. Below is my process diagram of how I’m trying to start the process by placing an order from the front-end:
I’m using Camunda 8 self-managed environment for developing purposes. I have the basic (Operate, Zeebe, Tasklist, Connectors, Elasticsearch) containers up and running. Also I’m using zeebe-node library for the implementation.
If anyone can help me with starting the process from the front-end, I would be highly grateful for your input. Thank you in advance!
Zeebe uses a gRPC API. There is no gRPC on the frontend. You need to create a middle layer REST endpoint to call, and in the route handler use zeebe-node to create a process instance. See the README and docs for details.
I am totally new to this gRPC API, have been working on REST API always. I have tried to implement but couldn’t do so. Could you please share a concrete example for creating a middle layer REST endpoint that can communicate with the front-end app and uses gRPC? I have implemented a process instance using zeebe-node and the example was quite helpful, thank you for that.
One more question please, does the customer order also has to be a service task in my process model? I mean, something like this:
Still no answer. Anyone who could answer to this thread please would be really great.
I don’t know why would Camunda use gRPC instead of the traditional REST API, making things much more complicated. It was released back in 2016 and it’s funny that the browsers still do not support this framework. Even if it is implemented, there should be a concrete example or a video tutorial by the Camunda devs so people could understand much more about it. Thanks!
Well, answering to my own thread after spending days in figuring out a way of starting process flow from the VueJS front-end application. So, I created a middle layer REST endpoint using ExpressJS server that listens to the request from the front-end and then POST’s to the zeebe broker to start the process instance. Thought it might help someone trying to implement something similar , here is the solution:
Method for the submission of your form:
async submitForm() {
try {
const response = await fetch('http://localhost:3000/start-process-server', //route of your REST endpoint
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
workflowKey: 'Process_1gu1lel', // Process ID of the pool you want to start the process from
variables: {
customerName: this.customerName, //example process variable
},
}),
});
const data = await response.json();
console.log(data);
} catch (error) {
console.error('Error:', error);
}
},
Middle layer REST endpoint using ExpressJS:
(I am using basic camunda-platform components as docker containers which includes Zeebe running on 26500 port)
const express = require('express');
const { ZBClient } = require('zeebe-node');
const cors = require('cors');
const bodyParser = require('body-parser');
const app = express();
const port = 3000;
// Create a Zeebe client
const zbc = new ZBClient({
// Specify your Zeebe broker contact point(s)
brokerContactPoint: 'localhost:26500',
});
// Use middleware to parse JSON in the request body
app.use(bodyParser.json());
// Use the cors middleware to enable CORS for all routes
app.use(cors());
// Define an endpoint to start a process instance
app.post('/start-process-server', async (req, res) => {
try {
const { workflowKey, variables } = req.body;
// Use createProcessInstance method
const response = await zbc.createProcessInstanceWithResult({
bpmnProcessId: workflowKey,
variables,
});
res.json({ success: true, response });
} catch (error) {
console.error('Error starting process instance:', error);
res.status(500).json({ success: false, error: error.message });
}
});
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
