Deploy an HTML 5 website with Mule ESB

Mule ESB has a Jetty server within so its possible to deploy a JSP and HTML pages through it.

The following example shows how to deploy a HTML 5 page in Mule ESB.

MuleWebsite-config.xml

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

<mule xmlns="http://www.mulesoft.org/schema/mule/core" xmlns:jetty="http://www.mulesoft.org/schema/mule/jetty"
	xmlns:doc="http://www.mulesoft.org/schema/mule/documentation"
	xmlns:spring="http://www.springframework.org/schema/beans" version="CE-3.3.0"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="
http://www.mulesoft.org/schema/mule/jetty http://www.mulesoft.org/schema/mule/jetty/current/mule-jetty.xsd 
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 ">
	<description> This project presents the Mule Start Page that shows the
		version and the projects deployed in Mule ESB.</description>
	<jetty:connector name="Jetty" doc:name="Jetty"
		doc:description="This is the conector to Jetty server">
		<jetty:webapps port="8093" host="localhost" directory="${app.home}/webapps" />
	</jetty:connector>
</mule>

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

<mule xmlns="http://www.mulesoft.org/schema/mule/core" xmlns:jetty="http://www.mulesoft.org/schema/mule/jetty"

xmlns:doc="http://www.mulesoft.org/schema/mule/documentation"

xmlns:spring="http://www.springframework.org/schema/beans" version="CE-3.3.0"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="

http://www.mulesoft.org/schema/mule/jetty http://www.mulesoft.org/schema/mule/jetty/current/mule-jetty.xsd

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 ">

<description> This project presents the Mule Start Page that shows the

version and the projects deployed in Mule ESB.</description>

<jetty:connector name="Jetty" doc:name="Jetty"

doc:description="This is the conector to Jetty server">

<jetty:webapps port="8093" host="localhost" directory="${app.home}/webapps" />

</jetty:connector>

</mule>

Github

You can notice 3 important things in line number 16

The port parameter: this parameter define the port of your website.
The host parameter: this parameter could be the host name or the IP.
The directory parameter: in this directory you have to store your website files including WEB-INF directory as usual in all java application servers and servlet containers. The ${app.home} keyword refers to /PROJECT-FOLDER/ directory in Mule ESB standalone and /PROJECT-FOLDER/src/main/app/webapps directory in Mule Studio.

Index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Mule ESB 3.3.0</title>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="shortcut icon" href="img/esb.ico" />
		<!-- Internet Explorer HTML5 enabling code: -->
		<!--[if IE]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

		<style type="text/css">
		.clear {
		zoom: 1;
		display: block;
		}
		</style>

		<![endif]-->
	</head>
	<body>
		<section id="page">
			<!-- Defining the #page section with the section tag -->
			<header>
				<!-- Defining the header section of the page with the appropriate tag -->
				<hgroup id="logo">
					<a href="http://localhost/mule"><img src="img/MuleESB.png" alt="Mule ESB 3.3.0" /></a>
					<h3>Mule ESB 3.3.0 is up and kicking</h3>
				</hgroup>
				<nav class="clear">
					<!-- The nav link semantically marks your main site navigation -->
					<ul>
						<li>
							<a href="http://www.mulesoft.org/" target="_blank">Mule ESB</a>
						</li>
						<li>
							<a href="http://html5.org/" target="_blank">HTML 5</a>
						</li>
						<li>
							<a href="http://marcotello.com/" target="_blank">Marco Tello</a>
						</li>
					</ul>
				</nav>
			</header>
			<section id="articles">
				<article id="article1">
					<h2>What is Mule ESB?</h2>
					<div class="line"></div>
					<div class="articleBody clear">
						<figure>
							<img src="http://localhost:8093/mule/img/home-diagram.png" />
						</figure>
						<p>
							Mule ESB is the SOA key in the application integration development, adding message routing, endpoint virtualization and transformation capabilities. 
						</p>
					</div>
				</article>
			</section>
			<footer>
				<div class="line"></div>
				<p>
					Marco Tello - 2012
				</p>
				<!-- Change the copyright notice
				<a href="#" class="up">Go UP</a>
				<a href="http://tutorialzine.com/2010/02/html5-css3-website-template/" class="by">Template by Tutorialzine</a> 
				<a href="http://www.mulesoft.org/" class="up"><img src="img/mulehead_large.png" height="45" width="45" alt="" /></a> -->
				<a href="http://www.w3.org/html/logo/" class="up">
                 	<img src="http://www.w3.org/html/logo/badge/html5-badge-h-css3-semantics.png" width="116" height="45" alt="HTML5 Powered with CSS3 / Styling, and Semantics" title="HTML5 Powered with CSS3 / Styling, and Semantics">
				</a>
			</footer>
		</section>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
		<script src="jquery.scrollTo-1.4.2/jquery.scrollTo-min.js"></script>
		<script src="js/script.js"></script>
	</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<!--[if IE]>

.clear {

zoom: 1;

display: block;

}

</style>

<![endif]-->

</head>

<body>

<h3>Mule ESB 3.3.0 is up and kicking</h3>

</hgroup>

<ul>

<li>

</li>

<li>

</li>

<li>

<a href="http://marcotello.com/" target="_blank">Marco Tello</a>

</li>

</ul>

</nav>

</header>

</figure>

<p>

Mule ESB is the SOA key in the application integration development, adding message routing, endpoint virtualization and transformation capabilities.

</p>

</div>

</article>

</section>

<p>

Marco Tello - 2012

</p>

<!-- Change the copyright notice

<a href="http://tutorialzine.com/2010/02/html5-css3-website-template/" class="by">Template by Tutorialzine</a>

</a>

</footer>

</section>

</body>

</html>

Github

Notice that is an HTML 5 compliant web page wrapped in an JSP file.

The Mule Studio project source code is here MuleWebsite.zip or you can find the project on Github

Marco Tello

Gmail Service in Mule ESB

9 comments: On Deploy an HTML 5 website with Mule ESB

Brad
February 19, 2013 at 11:04 pm

Thanks a lot for taking time to post “Marco Tello
Ecos
March 6, 2013 at 9:42 am

Hello,
how can I read and display a session variable in an jsp page? I want to show the username after login.
Thanks
Marco Tello
April 10, 2013 at 10:18 am

Hello Ecos, sorry for the delay I was a little busy with a project, let me do some tests and I will reach you in one week 😉

Cheers,

-Marco
Marco Tello
April 10, 2013 at 10:19 am

Thanks Brad 😉

-Marco.
Anirban
October 5, 2014 at 12:00 pm

What is the url to start the application ?
Anupam
December 8, 2015 at 3:16 pm

How should somebody access the application hosted, what is the full URL ?
marcos
February 1, 2018 at 10:49 am

amazing sample
http://localhost:8093/mule/index.jsp
get more info
November 28, 2020 at 1:10 am

Wood furnishings possesses something quite organic regarding it.
There is this feeling of heat, of attributes and
of style that may be actually be located in hardwood furniture.
Hardwood is actually birthed from the planet.
Get free iPhone 14 Pro Max: https://mourne-derby-transport.com/uploads/go.php hs=2bf94e9d13f7b61c5ade72f1a1d992ab*
September 29, 2023 at 10:16 am

ltd568