Hosting React Apps in MuleSoft

MuleSoft is best known for APIs. But we can also use it as a normal web server serving HTML pages. In this tutorial, I will cover the way to host React applications in MuleSoft.


Creating a simple react app

Here, I will create a very simple React app showing an image

  • npx create-react-app simple-page-app
    Use this command to create the a simple react app skeleton which can be modified as per wish
  • Update the App.js to show image
  • And you are done! 😄

Didn’t I say simple? Yes!


Hosting this app in MuleSoft

Create a mule app “mulesoft-web-server”

  • Drag a HTTP Listener
  • Drag a Load static Resource with below config
  • Your flow should look like below
  • We will now create a folder called public in src/main/resources and put the react app files
  • Content should look like below

Now we can start the application and see the output!


Hope you liked it. Cheers 🍻

GitHub link to the repo is here!

 

Leave a Reply

Your email address will not be published. Required fields are marked *