Setting up a Development Environment for Camunda HTML Forms

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!