Part 2: Building the statistics micro frontend using React and Tailwind
Tags: tailwindcss, react, beginners, microfrontend
Published: 2022-06-03 07:39:36

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](https://developer.entando.com/v6.3.2/tutorials/create/mfe/react.html) 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>
 );
}
```

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;
```

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;
```

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

```
import './index.css';
import './WidgetElement';
```

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

```
<body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <stats-widget />
</body>
```

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qb0gin5cytvoa1eczmpa.png)

We build the app using this command:

`npm run build`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1bag2ar8nwqtcda0ppno.png)

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. 

2. Initialize the project: `ent prj init`
3. 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0qt7r8x7k07gkc8b9agy.png)

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


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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vvcxoymk9y0dj3zxx4qb.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/boicj8e49orwju1g0jan.png)

6. 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zvjln8kc6szd93sf4851.png)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ufhaavj7017q2beie73.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/04k16zufbetgy74zmqp1.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1j5tjlsy1icr4qb7ezif.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s8wjqd9p5llbve4whdxv.png)

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](https://github.com/rimmi21/statistics) 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](https://discord.gg/N64a3QMd9X) to learn more about it. Thank you!