DEV Community

Cover image for Part 2: Building the statistics micro frontend using React and Tailwind
Sohini Pattanayak for Entando

Posted on

Part 2: Building the statistics micro frontend using React and Tailwind

In the previous part of this blog series, we set up our React micro frontend, made it ready for bundling, and installed and set up Tailwind. In this blog, we will do the following:

  • Write code to create our stats component.
  • Build the React app.
  • Wrap our micro frontend inside a custom UI element. (If you’re curious about it, you can check out this documentation till the time the blog is Live.)
  • Prepare our project directory for the Ent cli to bundle it.
  • Build, Push and Deploy the bundle to the Entando Component Repository (ECR)
  • Drag and drop the stats widget on a page.

We begin by navigating to our stats-widget directory.

Here we’ll write a few lines of code to build our stats widget. We create a new file inside src and name it stats.js. Then add the following content:

export default function Stats() {
 return (
   <div class="bg-gray-50 pt-12 sm:pt-16">
     <div class="mt-10 pb-12 bg-white sm:pb-16">
       <div class="relative">
         <div class="absolute inset-0 h-1/2 bg-gray-50"></div>
         <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div class="max-w-4xl mx-auto">
             <dl class="rounded-lg bg-white shadow-lg sm:grid sm:grid-cols-3">
               <div class="flex flex-col border-b border-gray-100 p-6 text-center sm:border-0 sm:border-r">
                 <dt class="order-2 mt-2 text-lg leading-6 font-medium text-gray-500">
                   Original
                 </dt>
                 <dd class="order-1 text-5xl font-extrabold text-green-600">
                   100%
                 </dd>
               </div>
               <div class="flex flex-col border-t border-b border-gray-100 p-6 text-center sm:border-0 sm:border-l sm:border-r">
                 <dt class="order-2 mt-2 text-lg leading-6 font-medium text-gray-500">
                   Service
                 </dt>
                 <dd class="order-1 text-5xl font-extrabold text-green-600">
                   24/7
                 </dd>
               </div>
               <div class="flex flex-col border-t border-gray-100 p-6 text-center sm:border-0 sm:border-l">
                 <dt class="order-2 mt-2 text-lg leading-6 font-medium text-gray-500">
                   86%
                 </dt>
                 <dd class="order-1 text-5xl font-extrabold text-green-600">
                   Users
                 </dd>
               </div>
             </dl>
           </div>
         </div>
       </div>
     </div>
   </div>
 );
}
Enter fullscreen mode Exit fullscreen mode

And in our app.js file, we replace the existing content with the following:

import Statistics from "./stats";
function App() {
 return (
   <div>
     <Statistics />
   </div>
 );
}
export default App;
Enter fullscreen mode Exit fullscreen mode

Now that we have created our application, we need to wrap the entire React app into a custom element. We do this by adding a new file src/WidgetElement.js with the following custom element:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

class WidgetElement extends HTMLElement {
 connectedCallback() {
   this.mountPoint = document.createElement("div");
   this.appendChild(this.mountPoint);
   ReactDOM.render(<App />, this.mountPoint);
 }
}

customElements.define("stats-widget", WidgetElement);

export default WidgetElement;
Enter fullscreen mode Exit fullscreen mode

Then, open src/index.js and replace the entire file with these two lines:

import './index.css';
import './WidgetElement';
Enter fullscreen mode Exit fullscreen mode

Lastly, we go to public/index.html and replace <div id="root"></div> with the custom element <stats-widget />:

<body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <stats-widget />
</body>
Enter fullscreen mode Exit fullscreen mode

Perfect! Now,we need to build our React app before we build the entire bundle. Let’s take a look at our Tailwind dashboard:

Image description

We build the app using this command:

npm run build

Image description

Now it’s time we deploy this widget to our Entando Component Repository, which is accessed from the dashboard of our Entando App Builder. This requires a couple of steps.

First, we need to set up the project directory. We do this from our terminal by running the following commands from the root directory:

  1. Prepare the bundle directory: cp -r bundle_src bundle

Here, the descriptor.yaml file gets copied to the bundle folder, where all our static resources will be created when we build the bundle. In a sense, we are preparing the bundle folder.

  1. Initialize the project: ent prj init
  2. Initialize publication: ent prj pbs-init

We need to push our bundled code to an empty GitHub repository and link that here:

This repository should be named something like statistics-bundle.

Image description

Now, we publish the bundle to the Entando App Builder:

  1. Build: ent prj fe-build -a (to just build the frontend, including changes from bundle_src)

Image description

  1. Publish: ent prj fe-push (publish just the frontend)

Image description

  1. Deploy (after connecting to k8s above): ent prj deploy

At this point, we are pushing everything to the Entando Component Repository.

That’s all. Congratulations! You just built the stats micro frontend, bundled it and deployed it.

Now it’s time we compose the application from the Entando Component Repository.

First, we login to our Entando App Builder:

Image description

Which takes us to our dashboard. From there, we click on “Repository” on the bottom left side of the page.

Image description

We can see our statistics bundle here. We click on install to install it.

Next, we go to “Pages” in the left sidebar and click on “Management” to see a list of pages. Here, we can create a simple page by clicking on the three dots next to a folder. We need to click on “Add” to create a new page. Make sure to fill all the sections with an asterisk just as I have done. Take a look at this screenshot to follow along.

Image description

After this, go to the bottom of this page to click on “Save and Design”.

Image description

Under “Users” we see a list of widgets on the right sidebar. We drag and drop the “Sample Stats Dashboard Template” to any part of our page frame and click “Publish.” Finally, we click on “View Published Page.”

Image description

Congratulations again! You did it!

Let’s wrap up here. To summarize, we learned how to use Tailwind CSS in a React App. We created our app, deployed it to the Entando Component Repository, and used it on one of our pages. Soon, this will be the way developers build and work on applications. Here is the bundle source code for your reference.

If you found this interesting, don’t forget to like this blog and share it with your network! We are building a community that welcomes a composable approach to building applications. You can join us on our Discord server to learn more about it. Thank you!

Discussion (0)