Website Hosting with MuleSoft API

Introduction

One of the interesting features of MuleSoft is that we can use a MuleSoft application to package and host website content. We package our website pages inside a MuleSoft application and deploy it to Anypoint Platform or Cloudhub and our website is published and accessible to the end-users. In this article, I will give you an example scenario of how it’s done so, you can use it for your own needs.

Imagine you are doing file transfers with MuleSoft and your target location is not always accessible. You have an option to move files in a temporary location and retry at a later point in time. While you can automate all of this, sometimes your customers would like a little bit more flexibility and control around retrying and clear visibility into what has not been yet transferred successfully.

You can create a simple web page that lists all of the files that are not transferred successfully with details such as name, size, date, etc. You can then be creative with your HTML and features to give your customer the best experience. For example: option to retry one, multiple, or all of the files from the temporary location through this web page.

This will be really useful for customers who want a simple solution without maintaining servers such as tomcat or apache to run the web application, who want a web application to present data from Mule integration application. The data could be presented to some users that should be able to get or update a few fields in their datasets.

MULE COVID-19 -API  front end page 

To create a web page with bootstrap css template below steps has been followed

prerequisite:-

• Mule 4
• Java 1.8
• Any point Studio 7.xx
• Any bootstrap template

Step 1:- 

Create a new Mulesoft application in Anypoint Studio. Then, create new folders under src/main/resources
and call it for example “web.css”,"web.js" etc. Drop all your website files in there: HTML, js, CSS as shown below.

Step 2:- 

Get live data from other source Google, any covid website etc.

In the main flow XML  you need to load your static resources. For this, we need one HTTP Listener and one HTTP Load Static Resource handler, file writer for write .html file. 

The flow reference is used to get some html payload from other resource of this api, which is merged into main page at the transform Message-HTML-PAGE to display the live data in the main page.

Please note:- In this website, I am having multiple multiple pages/css resources  are loaded into main page, so the HTTP listener has to be resources the path  /*

Main Flow

<div class="centered">

  <div>

    <table>

      <tr>

        <td style="color:Red;">WORLD-LIVE</td>

      </tr>

      <tr>

        <th>Total</th>

        <th>22,865,932 </th>

      </tr>

      <tr>

        <td>Death</td>

        <td>797,158</td>

      </tr>

      <tr>

        <td>Recover</td>

        <td>15,520,570</td>

      </tr>

    </table>

  </div>

  <div>

    <table>

      <tr>

        <td style="color:Red;">INDIA LIVE</td>

      </tr>

      <tr>

        <th>Total</th>

        <th>2,906,584 </th>

      </tr>

      <tr>

        <td>Death</td>

        <td>54,987</td>

      </tr>

      <tr>

        <td>Recover</td>

        <td>2,159,808</td>

      </tr>

    </table>

  </div>

</div>

Step 3:-

Write The above payload into  html file

Step 4:-

Finally loading http static page using Http Static resource

Here is my COVID-19 API with all navigation to other web pages:

Breaking news page after navigation:-

ABOUT THIS APPLICATION

This APP is MuleSoft API, which is running on mulesoft cloudhub  platform which is working as web server, to provide all COVID-19 updates on single point by using 16 mulesoft restful APIs internally.

Vaccine News api:- This API used to get latest breaking news about covid-19 vaccinations, which is a search api, using few predefined and uuid key words searching on different webs, and giving response in html page with Headlines Tab and Reported By tab in a table format.