Just the other day I sat at a customer, and they wanted a web application to present data, from there Mule integration application. The data should be presented to some users that should be able to update a few fields in the dataset. The Customer wanted a simple solution, and not any new servers such as tomcat or apache to run the web application because they don’t have personal to run and maintain these servers.

So I thought it must be possible to use Mule ESB, to deliver some simple HTML, Javascript, CSS pages and then use AJAX to acquire the necessary data through a call to an HTTP connector in a Mule application. So here is what I did. First I created the flow to supply the static pages HTML, JavaScript, CSS and images here I used a simple “HTTP Connector” as an inbound endpoint and an “HTTP Static Resource Handler” as a processor.

Processing requests for static content

Here is the XML for the flow.

<?xml version="1.0" encoding="UTF-8"?>
<mule xmlns:context="http://www.springframework.org/schema/context" 
      xmlns:http="http://www.mulesoft.org/schema/mule/http" 
      xmlns="http://www.mulesoft.org/schema/mule/core" 
      xmlns:doc="http://www.mulesoft.org/schema/mule/documentation" 
      xmlns:spring="http://www.springframework.org/schema/beans" 
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
      xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-current.xsd http://www.mulesoft.org/schema/mule/core http://www.mulesoft.org/schema/mule/core/current/mule.xsd http://www.mulesoft.org/schema/mule/http http://www.mulesoft.org/schema/mule/http/current/mule-http.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-current.xsd">
    <http:listener-config name="HTTP_Listener_Configuration" host="0.0.0.0" port="8081" doc:name="HTTP Listener Configuration"/>
    <context:property-placeholder location="dev.properties"/>
    <flow name="muleaswebserverFlow">
        <http:listener config-ref="HTTP_Listener_Configuration" path="/*" allowedMethods="GET" doc:name="HTTP"/>
        <http:static-resource-handler resourceBase="${app.path}/web" defaultFile="index.html" doc:name="HTTP Static Resource Handler"/>
    </flow>
</mule>

As you can see in the flow diagram above, first we make a new Connector Configurations, where we just use the default values for port: 8081 and Host: All Interfaces [0.0.0.0] (Default) then we specify the path: /* and Allowed Methods: GET We now configure the “HTTP Static Ressource Handler” by setting the Ressource Base and the default file name; I made a folder called the web under the main/resources folder. And in the HTTP Static Resource Handler under Ressource Base: set the path to the new web folder, and as default file name I called my file index.html, but you can call it anything. (see screen dump below for my structure)

Website file structure

If you have trouble getting other files than the index.html (or default file name) you have properly forgotten to set the * in the path in the HTTP connector. Now your are set to go displaying static content from your Mule ESB, but we can make it a little more exciting, in the same Mule application as the one who delivers the static content we can make one or more flows there can be called with some AJAX. There are many sites online there explain how to use AJAX from at Javascript Framework as JQuery or where you implement it in plain javascript code, just google it. Here is an example link for a JQuery example, or if you want to write it yourself an example in plain javascript Here is my AJAX Flow implemented with an ordinary HTTP Connector.

Processing AJAX requests
<?xml version="1.0" encoding="UTF-8"?>
<mule xmlns:file="http://www.mulesoft.org/schema/mule/file" 
      xmlns:db="http://www.mulesoft.org/schema/mule/db" 
      xmlns:json="http://www.mulesoft.org/schema/mule/json" 
      xmlns:tracking="http://www.mulesoft.org/schema/mule/ee/tracking" 
      xmlns:context="http://www.springframework.org/schema/context" 
      xmlns:http="http://www.mulesoft.org/schema/mule/http" 
      xmlns="http://www.mulesoft.org/schema/mule/core" 
      xmlns:doc="http://www.mulesoft.org/schema/mule/documentation" 
      xmlns:spring="http://www.springframework.org/schema/beans" 
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
      xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-current.xsd http://www.mulesoft.org/schema/mule/core http://www.mulesoft.org/schema/mule/core/current/mule.xsd http://www.mulesoft.org/schema/mule/http http://www.mulesoft.org/schema/mule/http/current/mule-http.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-current.xsd http://www.mulesoft.org/schema/mule/db http://www.mulesoft.org/schema/mule/db/current/mule-db.xsd http://www.mulesoft.org/schema/mule/ee/tracking http://www.mulesoft.org/schema/mule/ee/tracking/current/mule-tracking-ee.xsd http://www.mulesoft.org/schema/mule/file http://www.mulesoft.org/schema/mule/file/current/mule-file.xsd http://www.mulesoft.org/schema/mule/json http://www.mulesoft.org/schema/mule/json/current/mule-json.xsd">
    <http:listener-config name="HTTP_Listener_Configuration" host="0.0.0.0" port="8081" doc:name="HTTP Listener Configuration"/>
    <context:property-placeholder location="dev.properties"/>
    <file:connector name="File" outputPattern="test.json" readFromDirectory="/home/jack/tools/anypoint/workspace/muleaswebserver/muleaswebserver/src/main/resources/web" autoDelete="false" streaming="true" validateConnections="true" doc:name="File"/>
    <file:file-to-string-transformer name="File_to_String" doc:name="File to String"/>
    <flow name="StaticFilesFlow">
        <http:listener config-ref="HTTP_Listener_Configuration" path="/*" allowedMethods="GET" doc:name="HTTP"/>
        <http:static-resource-handler resourceBase="${app.path}/web" defaultFile="index.html" doc:name="HTTP Static Resource Handler"/>
    </flow>
    <flow name="AjaxGetProcessor">
        <http:listener config-ref="HTTP_Listener_Configuration" path="/ajaxprocessor/" allowedMethods="GET" doc:name="HTTP"/>
        <set-payload value="#[Thread.currentThread().getContextClassLoader().getResourceAsStream('test.json')]" encoding="UTF-8" mimeType="application/json" doc:name="Set Payload"/>
        <object-to-string-transformer doc:name="Object to String"/>
    </flow>
</mule>

You just make a normal HTTP connector as inbound endpoint then I use a set payload to read a JSON file from the resource folder. The file is converted from bufferedinputStream to a string by using the “Object to String” converter then you send it back as a response to the AJAX call.

That’s pretty much what there is to it if you want to download the whole Anypoint project then download it from GitHub. The project contains mule flows, HTML, CSS, Javascript files - all there should be for you to start it and in a browser go to localhost:8081.

Jack Petersen

Integration Consultant at Redpill Linpro

Jack Petersen works as an integration specialist and Java developer, from our office in Copenhagen, creating integrations in Mule and Camel for various customers.

How to use encryption in Mule

In this example we will use Jasypt in mule to encrypt clear text passwords in property files. But you could use Jasypt to encrypt all sorts of things e.g. ... [continue reading]

Norwegian IPv6 year in review

Published on January 24, 2017

OCSP: What, why, how?

Published on January 11, 2017