CamundaCon 2023 ― The Process Orchestration Conference of the Year on Sep 27-28

Save your Seat

Setting up a Development Environment for Camunda HTML Forms

  • Blog
  • >
  • Setting up a Development Environment for Camunda HTML Forms
TOPICS

30 Day Free Trial

Bring together legacy systems, RPA bots, microservices and more with Camunda Platform 8

Join the Camunda Developer Newsletter

Get the latest events, release notes, and product updates straight to your mailbox.

TRENDING CONTENT
Are you developing HTML forms for Camunda Tasklist? Are you re-packaging your application with maven and re-deploying it to Tomcat or WildFly for each HMTL form change? Are you annoyed by this? 🙂

There is hope: this post explains how to setup a development environment which allows you to develop forms inside Camunda Tasklist and refresh your changes without re-packaging and re-deploying your application.

We use this kind of setup ourselves when working on the Invoice Example which is provided with the Camunda Distribution.

In the following I am assuming that you have setup an application according to the blueprint provided by our Getting Started Guide.

Step 1: Adding a Maven Profile for development

First you need to add a Maven profile for development:

<profiles>
  <profile>
    <id>develop</id>
    <dependencies>
      <dependency>
        <groupId>org.camunda.bpm.webapp</groupId>
        <artifactId>camunda-webapp-tomcat-standalone</artifactId>
        <version>${project.version}</version>
        <type>war</type>
      </dependency>
    </dependencies>
    <build>
      <resources>
        <resource>
          <!-- override processes.xml, providing custom process engine -->
          <directory>src/develop/resources</directory>
          <resource>
            <directory>src/main/resources</directory>
          </resource>
        </resource>
      </resources>
      <plugins>
        <plugin>
          <groupId>org.mortbay.jetty</groupId>
          <artifactId>jetty-maven-plugin</artifactId>
          <version>8.1.14.v20131031</version>
          <configuration>
            <webAppConfig>
              <contextPath>/camunda</contextPath>
              <resourceBases>
                <resourceBase>${project.basedir}/src/develop/webapp</resourceBase>
                <resourceBase>${project.basedir}/src/main/webapp</resourceBase>
              </resourceBases>
            </webAppConfig>
          </configuration>
        </plugin>
      </plugins>
    </build>
  </profile>
</profiles>

The profile includes the Camunda Standalone Webapplication as well as the Jetty Maven plugin for starting it as part of the Maven build.

Step 2: Override some Configuration

Next we need to override some configuration. The maven profile references two resource locations to which we need to add a configuration file.

Place the following xml content into src/develop/resources/META-INF/processes.xml:

<?xml version="1.0" encoding="UTF-8" ?>

<process-application
  xmlns="https://www.camunda.org/schema/1.0/ProcessApplication"
  xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance">

  <process-engine name="default">
    <configuration>org.camunda.bpm.engine.impl.cfg.StandaloneInMemProcessEngineConfiguration</configuration>
    <properties>
      <property name="jobExecutorActivate">true</property>
      <property name="authorizationEnabled">true</property>
    </properties>
  </process-engine>

  <process-archive>
    <process-engine>default</process-engine>
    <properties>
      <property name="isDeleteUponUndeploy">false</property>
      <property name="isScanForProcessDefinitions">true</property>
    </properties>
  </process-archive>

</process-application>

This ensures that an in-memory process engine is started and that the processes located in the classpath of the maven build are deployed to it.

Next, place the following XML content into src/develop/webapp/WEB-INF/applicationContext.xml:

<beans xmlns="https://www.springframework.org/schema/beans"
       xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"
       xmlns:activiti="https://www.activiti.org/schema/spring/components"
       xsi:schemaLocation="https://www.springframework.org/schema/beans
                           https://www.springframework.org/schema/beans/spring-beans.xsd">

</beans>

This overrides the Spring Configuration shipped with the Standalone Web Application and makes sure the process engine is not also started using Spring.

Step 3: Start the Application and work on Embedded Forms

You can now start your application by typing

mvn clean jetty:run -Pdevelop

And opening Camunda Tasklist at https://localhost:8080/camunda/app/tasklist/.

If you now change your HTML forms or JavaScript resources, you can simply refresh the page in the Browser and the changes will be visible.

Enjoy!

Try All Features of Camunda Platform

Related Content

Why Camunda Platform 8? Learn how real estate invester Heimstaden utilizes Camunda 8 to orchestrate their tenant support ticketing system.
We've relaunched our Professional plan as the Starter plan with an updated offering and a new monthly price to help you get started faster.
Did you know that you can keep your process instances moving with Operate? Learn how in this tutorial.