How to use MuleSoft as Web Server for deploying web application
There could be use case when you want to create a simple web application, but you do not want to use tomcat or any other web server due to some constraint. MuleSoft can come handy for these situations. In this tutorial we will talk about how to run a web application using MuleSoft. You can design a full-fledged web application using HTML, CSS, Java script and obviously MuleSoft.
Web application
- We will create a simple web application which will accept customer data as request and will return the customer’s orders details as response from the backend.
- The home page will have a form, which a user would be able to submit to get the data from back end.
- Create static, dynamic html pages, css, java script, images etc. You can use several online free html page generation tools.
MuleSoft application
- Create a Mulesoft application with a folder e.g. webapp to store all the web page related content. It would have static & dynamic html files, images, css, java scripts etc
- Use Http load static resource connector to load all the static resources as shown below. This will automatically load the required resources as an when the web pages are called.
Create the html pages and render them using parse template connector for displaying dynamic content of the html page as below.
Snippet for Order.html page. Replace the dynamic content (table or any content with variables) as below with variable for html table header and variable for html body
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<h1 style="text-align: center;">
<span style="background-color: #ffffff; color: #000000;">
<strong>Mulesy Orders web Application</strong>
</span>
</h1>
<p> </p>
<hr />
<h2>
<span style="color: #000000;">
<strong>Customer Order details</strong>
</span>
</h2>
<hr />
<table style="width: 636px; height: 109px; float: left;" border="3">
<thead>
<tr>#[vars.header]</tr>
</thead>
<tbody>#[vars.body]</tbody>
</table>
<p> </p>
<p> </p>
</html>
Create a http listener for your web application
You can then have conditional logic to respond the HTML pages accordingly. However the MIME type should be set as “text/html” to display the content as HTML in browser
Start your Mulesoft application and test the same as below using http://localhost:8081/webapp
Fill the form as below and click on Submit button
You should see the response as below
And we are done here! Here is attached Mulesoft application. Please comment if you need any help with above or in creating complex web application using MuleSoft.
Sample mule application –mulesoft-as-webapp
Very useful post . By implementing this use case , lot of learning happened with respect to complex DW, HTML , parse template .
how can we do this implementation using api kit router, i tried implementing same using raml but then when it tries to load css file it fails to route anywhere to load resources.
Can anyone help here , what resource needs to be created in raml so that it can cater the request for loading static files
We want to get static input from html , while using parse templete we are getting output in html format we want in json