Back to Blog Archive

Serving a React app with Mule

Posted on: July 22, 2020
Author:
Mario

In the world of Single Page Applications (SPA), React.js (created and maintained by Facebook) has become the most popular framework, adopted by many companies for many reasons.

In this article, we will show how to serve a React app over Mule while allowing the app to use Mule itself as a backend. This can be extremely useful if we want to expose a user-friendly UI for managing our application during runtime without the need for performing manual API calls.

The final example is available here.

Preparing the React SPA

For this demo, be sure to install the latest node.js libraries:  https://nodejs.org/en/

Let’s start by downloading our front-end project – a simple page that provides welcome messages in multiple languages.

Navigate to the root folder and execute npm install. Once completed, we can start the tool by running npm start. This should initialize our development server listening at http://localhost:3000/.

Once our app is ready and we are happy with the result, it’s time to create our production build running npm run build. The result is our ready to use SPA inside the folder “~/mule-welcomer/build/web/”.

The final build will have the following important characteristics:

  • The projects contain an “index.html” that needs to be served by the Mule application once the page is requested.
  • React generates bundles for the Javascript and CSS files.
  • The “package.json” defines the homepage URL. In this example, our web page will be listening under the “/ui” resource. We will come back to this later on.

Including our front-end into Mule

Any resources within the “src/main/resources/” are included in the final Mule artifact (classpath).

Just to keep it simple in this blog post, let’s copy the “~/mule-welcomer/build/web/” folder into “src/main/resources/”.

Later on, I will publish another blog post, in which we will learn how to include the packaging of the react application during the Mule packaging lifecycle.

Working with the Mule app

API Endpoints

Let’s now define the endpoints which will serve as a backend to our react app:

  • “/api/*” → which will be defined by a RAML spec and exposed as a standard Mule API.
  • “/ui/*” → returning our “index.html” file and any subsequent files required by the web application, such as Javascript, CSS, etc.

Additionally, due to browser security restrictions, let’s include CORS support in our HTTP listener:

Providing the web app

Mulesoft provides an out-of-the-box component, the “HTTP load static resource”. This component accepts 3 parameters:

  • The base path pointing to the location of the “web” folder (“/~app.home/web/”).
  • Default file to provide in case no resource is found (“index.html”).
  • Additional attributes.

Internally, the component translates the requested path to a file location and assigns the correct content-type.

Time for some action!

Let’s run our example.

Navigate to http://localhost:8081/ui#/. Notice the front-end being provided though our mule app!

Let’s navigate to the messages section, at the top right of the page. The “Load messages” button makes a call to the “/api/messages”, retrieving messages from our API resource. 

That’s it, hope that you all enjoyed it! In the next blog post, we will cover how to include the front-end building step as part of the Mule packaging process.

Author:
Mario

Comments

Contact Us

Ricston Ltd.
Triq G.F. Agius De Soldanis,
Birkirkara, BKR 4850,
Malta
MT: +356 2133 4457
UK: +44 (0)2071935107

Send our experts a message

Need Help?
Ask our Experts!