DEV Community: Entando

Composable Apps security practices with Entando on Kubernetes, featuring Ippon expert

Anthony Viard — Fri, 27 Jan 2023 14:23:36 +0000

Building composable apps means, without a doubt, understanding how it manages security and reliability. Composable apps offer a lot of advantages to streamline applications, provided by the modularity and reusability of Packaged Business Capabilities. Individual modules and PBCs help isolate problems and security design, separate frontend and backend concerns and allow patching at the component level. At the company level, and with a good hub policy, it turns into “patch once, secure all” because you can easily leverage security fixes if they are applied to centralized modules in a store that all your applications rely on.

However, security strategies should not be applied at the code or module level only. The infrastructure has to be fully resilient and secure. No one can imagine using a car with seat belts within an insecure chassis. It doesn't make sense. Security is everyone’s business.

Fortunately, solutions exist to help us design at all levels with security as one of the top priorities.

"Shift security left". It is more than a buzzword, It is good advice according to Lucas Ward in a recent article called Hardening Kubernetes and What That Entails With Entando. There, Ward describes how building applications with Kubernetes is challenging.

I agree, building a fully secured application with Kubernetes is a real adventure. If there is something we can't live without, it is security. Whatever business domain we work in, security should be at the center of the design and production processes.

Delaying its implementation is risky; executing it is time consuming.

As Ward spells out, we can rely on frameworks to bring a smooth and dependable way to secure applications, especially with Kubernetes. He says that using a platform such as Entando provides simplicity and a solid base with best practices you can count on to promote security from the ground up.

From solid structures and base setup with code generation to a well documented CI/CD process, and opinionated build pipelines, Ward asserts that "using Entando as your platform of choice covers a lot of ground in the Development, Build, and Infrastructure scape."

Saying more without spoiling it is just impossible, just read it! This is my only advice.

Explore Docker-based bundles with JHipster and Entando 7.1

Anthony Viard — Tue, 10 Jan 2023 10:08:27 +0000

At Entando we define a bundle as a package that contains one or more components. A bundle can be a single component, component collection, PBC, or solution template, based on the level of granularity. Any bundle built with Entando is an Entando Bundle.

Entando 7.1 introduces a major new change for bundles with a Docker-based structure. This article explores all the things you need to know about that feature.

A shift from Git-based bundles

If you’ve already built or used bundles with Entando, you should know that before v7.1, the bundles were Git-based. That means the source code (called project) and the built artifact (the deployable bundle) were stored under two different Git repositories.

Traditionally, the source code repository is used by the Creators team for coding and building components with development tooling. The coding flow is similar to what we find in any development team, pushing and merging branches to share and review the code within the team.

The second repository stores the result of the compiling process, the artifact, that Curators can register in a hub, and Composers can install on their Application Composition Platform.

The Docker-based bundle is a total shift from that point. The source repository is still present but, all the artifacts are now sent to a Docker registry using Docker images.

A structure modification

The publishing process was improved with the tool change, so we took the opportunity to streamline the bundle structure itself.

We have a more readable and consistent bunch of folders with the Docker-based bundles.

Git-based	Docker-based
bundle/descriptor.yaml The main bundle descriptor	entando.json The main Entando file that contains components definition and metadata
ui/ The micro frontends sources folder	microfrontends/ Centralized micro frontends folder
src/ The backend sources folder	microservices/ The microservices folder, one per component
src/main/docker The auxiliary service folder such as Docker compose files and Keycloack configuration for local usages	svc/ The auxiliary service folder such as Dockercompose files and Keycloack configuration for local usage
*.sh Shell script used by the CLI to compile and build the bundle
	platform/ The folder for any Entando related component such as pages, content, page templates… One sub-folder per component type

If you like to make a deep comparison between these implementations, our documentation provides a table here.

This means that the cli and commands are now following that structure and you can easily run them to create a new one.

Let’s start a new project to discover this

Create a new 7.1 bundle with the ent CLI

Prerequisites

Before moving forward, you have to ensure that your Entando CLI is up to date. If not, please run the following command:

bash <(curl -sfL https://get.entando.org/cli) --update

Don’t forget to activate it with the following command

source "$HOME/.entando/activate"

Initialize the project

From your favorite folder, run the following command to initialize the project.

ent bundle init my-bundle

Please note you can replace “my-bundle” according to your project name.

A new folder is created with this project name; open it as a project with your favorite IDE to check the new structure.

You can check the entando.json file content, and the metadata:

{
   "microservices": [],
   "microfrontends": [],
   "svc": [],
   "name": "my-bundle",
   "version": "0.0.1",
   "description": "my-bundle description",
   "type": "bundle"
}

Add a microservice

In the project folder, run the following command to add a new microservice.

ent bundle ms add sample-ms --stack=spring-boot

We specify the stack because of the dedicated metadata we may need with some stack types. This command creates a new folder, sample-ms, in microservices and adds an entry in the entando.json.

{
   "microservices": [
       {
           "name": "sample-ms",
           "stack": "spring-boot",
           "healthCheckPath": "/api/health"
       }
   ],
   "microfrontends": [],
   "svc": [],
   "name": "my-bundle",
   "version": "0.0.1",
   "description": "my-bundle description",
   "type": "bundle"
}

Please note this new folder is empty and you have to add your own code. We provide an easy way to start; let’s do it with JHipster.

Call JHipster with the following commands

cd microservices/sample-ms
ent jhipster --blueprints=entando

Then, select only the default values.

When the generation is done, the sample-ms folder contains all the files provided by JHipster.

Customize the bundle for JHipster

You just need to tweak a couple of things to make it work properly.

Edit the entando.json and update microservices/sample-ms to set the healthCheckPath and dbms properties:

   "healthCheckPath":"/management/health",
   "dbms":"postgresql"

Move the Blueprint-provided auxiliary service definitions into the svc directory in the bundle project:

mv microservices/sample-ms/src/main/docker/* svc/

This enables the ent CLI to start Keycloak:

ent bundle svc enable keycloak

For advanced use cases, you can add MFEs with this tutorial. Please note that for microservices, you have to execute some extra steps.

Discover the new publishing process

This new bundle structure comes with a simpler publishing process provided by new streamlined CLI commands.

You can find a graphic of the different steps below. It describes the overall process and helps you to understand the details involved in every step.

Let's follow it for our new 7.1 bundle.

Build

From the root project folder, run the following command:

ent bundle pack

Please note, you need to have Maven installed for this to execute. You also need Docker installed; you can check the installation procedure here regarding your environment.

You can run the docker image ls command to see your available images.

Publish

Once it’s finished, run the next command to publish the bundle to a Docker repository.

ent bundle publish

In this step, you need to be logged into the Docker hub, ensure you have an account or create a new one on this website: https://hub.docker.com

_Please note, you can decide to publish the images to another registry by providing the URL with the --registry parameter.

Deploy

This step is the same as the previous Entando version, even if the commands have been modified to keep the consistency. Here, you need to have an available running instance of Entando. Visit https://developer.entando.com to install a local one.

Please note that you need your ent CLI profile to be connected to your Entando instance. If you followed the previous steps and installed a local multipass VM, you might have to run this command:ent attach-vm entando where “entando” is the virtual machine name.

Otherwise, it is possible to attach a kubeconfig file with this: ent attach-kubeconfig {kubeconfig-file}.

From your bundle root folder, run the following command:

When the deploying process is finished, you can navigate to your Local Hub by clicking on the “Hub” menu.

Then, you should see your bundle.

Install

As you can see, the bundle is available in your Local Hub but not installed yet. That means nothing is running on your cluster from that bundle and the components are not available for composition.

To install them, you can use the UI and click on the install button in the Local Hub or, you can run the following command from your bundle root folder: ent bundle install

The micro frontends are now available in the App Builder to compose new pages. the microservices as pods and you can check them with ent kubectl get pods -n entando.

Conclusion

In this article, we discovered a few new features provided by Entando 7.1. The bundle structure has been rebuilt; they are now docker-based and the publishing process has been optimized with the ent CLI commands. The JHipster blueprint has been optimized to match this new paradigm.

You can find explanations of these features during our 7.1 live with Sohini.

Did you know the bundle we just created can be used like a template to create a new one? Maybe not, because it’s also a new feature on 7.1 and this is the topic of the next blog post in this series. Stay tuned.

Entando 7.1 Release Overview

Sohini Pattanayak — Tue, 08 Nov 2022 09:48:48 +0000

Entando Application Composition Platform Version 7.1 is now available to support enterprises who are modernizing applications to accelerate development, reduce runtime costs, and streamline maintenance through the use of a composable application architecture. Entando brings developer joy to the creation, curation, and composition of modular enterprise applications.

Background:

Even before the 21st century, enterprises have been advancing infrastructure and strategies to solve business problems. From the development of web applications on-prem, to their subsequent move to the cloud, and now, modularization in the cloud, each move has accelerated development, lowered cost and streamlined maintenance.

This new phase of modularity focused on decoupling (or breaking up) both the backend code and the monolithic frontend by bundling microservices and micro frontends into Packaged Business Capabilities (PBCs). These PBCs could be shared across development teams and projects within an Enterprise Hub and assembled into applications via a low-code Application Builder, all within a unified Application Composition Platform.

The updates available in Entando Application Composition Platform v7.1 are focused on the pro-code creators. It provides many new capabilities to support the development of modern composable applications, which include:

New: Entando Platform Capability (EPC)

To accelerate application development, Entando 7.1 now supports a pluggable framework to allow Creators and Composers to easily expand the functionality of the Entando App Builder, add external services. Like the PBC, an EPC is a packaged capability and it adds functionality to the platform like menu options or an API management page. An EPC can be a headless CMS like Strapi, that is bundled, stored on Entando Cloud Hub, and implemented in the App Builder.

A sample configuration is shown below:

The headless system (e.g., Strapi) uses the Entando App Builder as a templating mechanism to create and manage pages, content layout, and content versioning.

1) An EPC can be deployed to the Entando Hub (or Entando Cloud Hub, the publically accessible version of the hub),

2) Composers can access and install EPCs into the Entando App Builder, adding a new menu item to the builder, which

3) when accessed, opens the headless interface, where content can be managed and you can return to the App Builder at any time.

4) Users can access the external system’s APIs and resources, deploying them into applications using the page designer. Many types of EPCs can be built for Entando 7.1, including Headless CMS (Strapi.io is coming soon), Workflow, AI/ML, API Mgmt, and more.

New: Pro-code bundle Templates

v7.1 introduces Pro-code Bundle Templates to enable developers, system integrators, and enterprises to create new Packaged Business Capabilities by reusing existing micro frontends and microservices allowing consistency and acceleration from a core PBC library.

New: Service Discovery

With v7.1, communication between micro frontends and microservices is decoupled and service discovery is made simpler with the API claims mechanism orchestrated by the ent CLI. It eliminates the need to define and manage API endpoints, both in local development and within a running instance.

Updated: Create Tooling

v7.1 mainly focuses on developers. The local development process was improved and now developers can easily initialize a bundle from scratch or download one from a hub. They can add components and populate the bundle descriptor with micro frontends, microservices, and platform components with the ent CLI. They can run, build, and install with only a few commands. Bundles that have worked on 7.0 will work on 7.1 as well. More details can be found here: https://developer.entando.com/v7.1/docs/getting-started/ent-bundle.html#entando-7-1-bundle-development

Updated: Docker Image Specification

Previously, developers used Git repositories to manage both code sources and bundle versioning. Now bundle packaging and publishing has moved to Docker which handle the image specifications. With this, one can still manage code sources on their preferred Git provider but each release will be done through an image registry.

Updated: Entando Command Line Interface (CLI)

We have enhanced the Entando CLI for Mac and Windows. The CLI can now create new bundles from templates downloaded from the Hub, providing a wider range of commands to perform various actions. Some examples:

Create a Docker Image of the Bundle
Docker-based bundle management commands
Easily Publish a bundle inside Docker Hub
API management

Updated: Entando Hub

The Entando Hub was introduced in v7.0 and provides a repository for PBCs, solution templates, components, and/or component collections. Enterprises, Development Teams, System Integrators and others can implement an Entando Hub as a central repository from which the Entando App Builder can discover and quickly access entries. Entando Hub updates include:

Docker bundle name generation update
Added security check on bundleGroupVersion details page
Update install instructions to use ent ecr deploy
Refined AppBuilder BundleGroups retrieval to sort if no pageSize provided.

Summary

To learn more about Entando 7.1, or to get started with Composable Applications, see:

A complete look at the 7.1 release notes
Docs - https://developer.entando.com/v7.1/docs/
Tutorials - https://developer.entando.com/v7.1/docs/
Base install guide (manual, not the one liner until official launch): https://developer.entando.com/v7.1/docs/getting-started/#install-kubernetes
Platform install guides: https://developer.entando.com/v7.1/tutorials/#operations
Watch a video with industry experts
Download the “What is an Application Composition Platform" whitepaper
Book a guided demo

Using Vue.js to create a Micro Frontend

Anthony Viard — Mon, 27 Jun 2022 13:15:56 +0000

Disclaimer

This article has been written with the help of the ModSquad Community. The related live session is available here:

Introduction

Hi, fellow developers!

After learning how to create micro frontends with Angular and React, we’re jumping into another world with Vue.js. Remember, we’re trying to create a micro frontend using the web component specifications for each of the following frameworks: Angular, React, and Vue.js.

Does Vue provide the best developer experience when creating a micro frontend social card? Let’s try it!

Create the Vue.js app

First, ensure that you have installed Node with npm (you can use Yarn instead) and Vue CLI.

npm install -g @vue/cli

Then you can create the application by running the following command in your target folder. I suggest using the default option Default ([Vue 3] babel, eslint).

vue create vue-social-card

That should create a folder named vue-social-card that contains a fresh Vue.js project.

Please note that by default the application is configured to include certain features, such as npm scripts to start your app and eslint to help you code.

Discover your application

Before making any changes and creating a micro frontend, let’s run the application locally using the command npm run serve. Your application should then be available at the following URL: http://localhost:8080/.

Create the social card component

Vue.js helps you organize yourcode with components. That means we need to create a file to contain all the card code. You can delete the default file called HelloWorld.vue.

Once you’ve created a new file named SocialCard.vue in the components folder, copy the following code into it:

<script>
export default {
  props: {
    card: {
      type: Object,
      required: true
    }
  },
};
</script>

<template>
 <div class="card">
  <h2>{{ card.name }}</h2>
     <span>{{ card.description }}</span>
  <img :src="card.image" :alt="card.image_alt"/>
 </div>
</template>

<style>
.card {
width: 320px;
height: auto;
min-height: 450px;
background: rgb(60, 62, 68);
border-radius: 20px;
overflow: hidden;
padding: 10px 15px;
margin-bottom: 24px;
margin-right: 10px;
transition: all 0.2s linear;
cursor: pointer;
color: white;
}
img {
margin-top: 5%;
 max-width: 100%;
 height: auto;
}
.card:hover {
transform: scale(1.01);
box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.2),
 0 1px 15px 0 rgba(0, 0, 0, 0.19);
}
.card > .title {
margin: 0;
}
</style>

Our component is just a simple piece of HTML/CSS code that requires an entry object named card and defines the following properties: name, description, image and image_alt.

As it is, your application might be broken due to an error in the app.vue file. It’s time to update it.

Update App.vue

The reason your app doesn’t work is that the main component still includes the default component. To fix it, replace the file contents with the following code:

<script>
import SocialCard from "@/components/SocialCard";

export default {
  components: {
    SocialCard
  },
  data() {
    return {
      shiba_card: {
        id: 1,
        name: 'Shiba Inu',
        description: 'The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.\n' +
            '      A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally\n' +
            '      bred for hunting.',
        image: 'https://material.angular.io/assets/img/examples/shiba2.jpg',
        image_alt: 'The Shiba Inu image'
      },
    }
  }
};
</script>

<template>
  <SocialCard :card=shiba_card></SocialCard>
</template>

This imports our social card component, defines a card object shiba_card in the data() function to store the different properties, then passes the card object to the social card component in the template section.

The application is working again and the default Vue landing page is replaced with the Shiba Inu social card.

However, we only built a classic single page application and need to migrate it to a micro frontend.

Define the custom element

In order to reuse this app as a web component, we need to define a custom element, which is a typical step we discovered when using Angular and React.

Replace the content of the main.js file with the following:

import App from './App.vue'

import { defineCustomElement } from 'vue'

const SocialCardElement = defineCustomElement(App)

customElements.define('social-card-element', SocialCardElement)

This code defines the social-card-element custom element and wraps the Vue app. As we saw before, this app is now rendering the card as expected.

Next, replace <div id="app"></div> in the public/index.html file with the custom element:

<body>
 <noscript>
   <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
 </noscript>
 <social-card-element></social-card-element>
 <!-- built files will be auto injected -->
</body>

Congratulations! You have just built a Vue.js micro frontend using a custom element.

Please note, as I’m writing this article there is an issue with styling and custom elements that is discussed in detail here: https://github.com/vuejs/core/issues/4662. Please follow this ticket to know when it will be fixed or for current workarounds.

Resources

The code above is available on GitHub: https://github.com/avdev4j/vue-social-card

Thanks to this repo for the card example: https://github.com/AlanPenaRuiz/vue-rick-and-morty

Are you already using Entando and looking for Vue.js components? Take a look at this sample: https://github.com/entando-samples/ent-project-template-vue

Watch micro frontend videos on our YouTube channel: https://www.youtube.com/c/EntandoVideos

Join us on Discord to share and learn about composable apps: https://discord.gg/SdMCvyzzHm

Using React to create a Micro Frontend

Anthony Viard — Mon, 20 Jun 2022 09:26:06 +0000

Disclaimer

This article has been written with the help of the ModSquad Community. The related live session is available here:

Introduction

Hi, fellow developers!

Having discovered micro frontend creation with Angular, we jump into another world with React. Remember, I’m trying to create a micro frontend using the web component specifications foreach of the following frameworks: Angular, React, and Vue.js.

Does React provide the best developer experience when creating a micro frontend social card? Let’s try it!

Create the React app

React offers a simple way to create React applications using the Create React App.

As seen in the previous blog, you need to have npm installed. You can then run the following command to create the application skeleton:

npx create-react-app react-social-card

Once complete, you should have a new React project available in the react-social-card folder.

Start it using the command npm start.

The default React page is reachable at http://localhost:3000.

Add the social card code

Before configuring the custom-element, we have to create the React social card component. After some research, here is an example of code we can use: https://codepen.io/leoraw/pen/ZjvRpL. Thanks to @leoraw for sharing this example.

Create the React components

The social card is split into two different React components: a button box and the card itself.

First, we create a new file for the button box in the components folder, name it ButtonBox.js and copy this code:

import React from "react";

const UiButton = props => {
   const classes = (props.isClicked) ?
     "ui-button clicked" : "ui-button";
   const number = (props.isClicked) ?
         (props.number + 1) : props.number;

   return (
     <button className={classes} id={props.text}
       onClick={() => props.onClick()}>
       <span className="ui-icon">{props.icon} </span>
       {number}
     </button>
   );
};

class ButtonBox extends React.Component {
   constructor(props) {
     super(props);
     console.log(props.likeIsClicked);
     this.state = {
       likeIsClicked: props.likeIsClicked

     };
   }

   toggle(index) {
     let state = {};
     state[index] = !this.state[index];
     this.setState(state);
   }

   render() {
     return (
       <div>
         <UiButton icon='♥' text='likes'
           number={this.props.likes}
           onClick={() =>
             this.toggle('likeIsClicked')}
           isClicked={this.state.likeIsClicked}/>
       </div>
     );
   }
}

export default ButtonBox;

Then, in the same folder, we create the SocialCard.js file and copy the following content.

Please note that this new component imports and use the previous one. Effectively, the internal architecture in the micro frontend allows us to use multiple components, and all the components are built into one custom element.

import React from "react";
import ButtonBox from "./ButtonBox";

const UiCard = props => {
 let {image, title, content} = props.content;
 return (
   <div class="card-wrapper">
     <div className='card-img'>
       <img src={image} />
     </div>
     <div className='card-content'>
       <h3>{title}</h3>
       <div>{content}</div>
     </div>
     </div>
 );
}

class SocialCard extends React.Component {
   render() {
     return (
       <div className='card-body'>
         <UiCard content={this.props.content}/>
         <div className='line'></div>
          <div style={{textAlign: 'right'}}>
             <ButtonBox
             likeIsClicked={this.props.likeIsClicked}
             likes={this.props.likes}/>
         </div>
       </div>

     );
   }
}

export default SocialCard;

Use the new components in the main App.js file

Once these two components are available, we can update the main App.js file and remove the old React demo code.

Update the App.js file by replacing the existing code with this:

import React from 'react';
import './App.css';
import SocialCard from "./components/SocialCard";

const cardDetails = {
   id: 0,
   content: {
       title: 'Shiba Inu',
       image: 'https://material.angular.io/assets/img/examples/shiba2.jpg',
       content: 'The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan. A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally bred for hunting.',
   },
   likeIsClicked: true,
   likes: 5
}

function App() {
 return (
   <SocialCard
     key={cardDetails.id}
     content={cardDetails.content}
     likes={cardDetails.likes}
     likeIsClicked={cardDetails.likeIsClicked}
     />
 );
}

export default App;

You can see here that we are instantiating a new social card component and giving it some data to display.

Now you can restart the application or refresh the page to see our social card appear. However, this is still a raw React application and we need to define the custom-element to finish our task.

Switch the app to a custom element

In the src folder, at the same level as the components folder, we create a new folder named custom-element.

Next, let’s create a new file named social-card-app.js to define the custom-element using the related API.

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

class SocialCardApp extends HTMLElement {
   connectedCallback() {
       this.mountPoint = document.createElement('span')
       this.render()
   }

   render() {
       ReactDOM.render(<React.StrictMode>
                   <App/>
           </React.StrictMode>,
           this.appendChild(this.mountPoint))
   }
}

customElements.get('react-social-card') || customElements.define("react-social-card", SocialCardApp)

The string “react-social-card” is used to define the custom-element tag and renders the React app using: <App/>.It’s analogous to Russian dolls: custom-element > React app > social card component > buttonbox component.

Then, in the file index.js import the custom-element and replace all the previous content with this code:

import './custom-element/social-card-app';
```



Then, in the following `public/index.html` file, replace the body with this:




```html
<body>
 <noscript>You need to enable JavaScript to run this app.</noscript>
 <react-social-card></react-social-card>
</body>
```




Reload your browser and check the HTML content:



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


The `react-social-card` custom element is used and loads the React app content.

**Congratulations! You’ve just created your first micro frontend using React!**


## Resources:

The code above is available on GitHub: [https://github.com/avdev4j/react-social-card](https://github.com/avdev4j/react-social-card)

Watch micro frontend videos on our YouTube channel: [https://www.youtube.com/c/EntandoVideos](https://www.youtube.com/c/EntandoVideos)

Join us on Discord to share and learn about composable apps: [https://discord.gg/SdMCvyzzHm](https://discord.gg/SdMCvyzzHm)

What is the Entando Hub?

Sohini Pattanayak — Thu, 16 Jun 2022 10:33:50 +0000

What do you imagine when someone says Hub?

It's a center or place to hold a collection of things, or several kinds of things. And an Entando Hub is a repository (local, remote, public, or private), that contains components. To be more specific, the App Builder, the UI of the Entando Platform, can connect to one or more Entando Hub.

In my recent blog on Entando 7.0 release, I wrote a bit about the Entando Hub. You can check that out here. But, in this blog, I’ll give a technical overview of the Hub.

Before I start, let’s find out why we needed a Hub.

In the previous blogs, we learned about the 4Cs. If you don’t know about that, you can take a look at this blog. from the 4 essential roles of application composition, one thing is clear: the set of components built by creators are reusable and absolutely flexible. But, to make them easy to reuse, there was a need to create a Hub, where they could reside and be available to a larger audience.

Now, the question is, what are some of the capabilities of the Hub?

The Hub lets you share Single Components, Component Collections, Solution Templates, Packaged Business Capabilities (PBCs) that creators build.

Single components are a building block for apps. It can be a page template, content template, micro frontend, microservice, UX Fragment,content type…

Component collections are a packaged set of single components. They are assembled components that are in some way functionally unrelated but useful to a Composer. (e.g. a set of Page Templates, a set of content templates or content types + widgets + MFE or a mix of them)

Solution templates are a pre-packaged set of PBCs, component collections, and single components providing full-featured, domain-specific solutions. (eg: Task Tracker, Supplier Portal, Customer Portal, Partner Portal, E-commerce, …)

And PBCs are encapsulated software components that represent a well-defined business capability, recognizable as such by a business user, and packaged for programmatic access.

Any and all of these can be assembled in the Hub, where new items and new versions are continuously made available. But to avoid errors or issues, we should follow some best practices.

The PBCs and/or components we build as a creator must be well sized. It shouldn’t either be too small or too big. It should be business-driven with a definite business value. There are several scenarios in this case. For example, a PBC can have many components which can make it large, or it can have fewer components, making the size smaller. But in this case, a Composer may need to install several items to get what they need. It is a tradeoff between functionality and ease of use. Hence, we must judge wisely, making sure the component isn’t too large or too small.
Our Components and PBCs should be easily configurable. By this I mean, we must avoid hard-coded stuff. It is preferable to use separate configuration files or database tables to store any value that’s needed in your component.
It is best to use a package manager as it can help us with the right dependency versioning strategy. A package manager helps us by updating all the packages and/or software frequently. These packages run tests to check security and other things. It also saves us a lot of time.
While we discuss these best practices, we must know that the Curator oversees the Hub, managing the components available there for the organization. Hence, the Curator should do a Security Analysis. They should perform a thorough analysis of the dependencies, security alert or code vulnerabilities.
Use code quality metrics to measure and determine if the code we have written for the PBC is of high quality. Certain variables are checked under this quality analysis, like code complexity, portability, reusability, etc.
And finally, we should add proper documentation for our PBC. It’s the first thing that provides clarity about our PBC. This documentation should be made in such a manner that it is well understood by both business and technical people. Also, it is a good coding practice!

Now, it’s time we take a look at the Hub.

As you see here, there are many PBCs, Component Collections, Solution Templates, and Single Components under “Catalog”. After the Curator performs the validation checks, these building blocks made by Creators are published in the Hub.

How can we use the Hub?

This Hub can be used with Entando 7.0. This documentation can help us get started after installing the Hub on Entando 7.0. But in the upcoming blogs, I’ll definitely share how it can be installed in our App Builder.

Is the Hub open source?

The Entando Hub is under the LGPL-3.0 license and is open source. We can easily contribute to it by referring to this repository.

Lastly, before we wrap up, I’d like to explain the Entando Cloud Hub.

The Entando Cloud Hub is a SaaS instance of an Entando Hub that contains a public and private collection of components.

Well, that’s all about the Hub for now. We are in the process of creating more tutorials around the Hub and those will be released over the next few weeks.

But, for now, I would love to see you all try out the Hub for yourselves and send in your feedback to the comment section below!

Lastly, we at Entando are building an exciting community that spreads awareness of composability and modular applications. We call it the Modular Squad, and we’d love to invite you to join us and be part of this journey!

Thank you!

Using Angular to create a Micro Frontend

Anthony Viard — Tue, 14 Jun 2022 12:10:59 +0000

Disclaimer

This article has been written with the help of the ModSquad Community. The related live session is available here:

Introduction to Web Components

Web components are a set of technologies, a meta- specification, with reusable isolated elements that make up a web application.

Basically, Web Components need 4 specifications:

Custom Elements: A set of Javascript APIs to define the components and their behaviors.
Shadow DOM: A set of APIs to render the element into a dedicated and isolated DOM.
HTML Templates: Allows you to use <template> and <slot> tags to define a portion of HTML to reuse in which slots could be filled with variable content.
ES Modules: A specification to import and use Javascript Modules to create an agnostic modular approach.

Modern Javascript frameworks offer some solutions to easily create a web component, using a custom element, leveraging all the framework features, and creating small business-oriented apps. This is what we call micro frontends.

Let’s see how to proceed using Angular and let’s see how to create our first micro frontend.

To continue, you need to have installed NodeJS (including npm) and the Angular CLI

npm install -g @angular/cli

Initiate the Project

Here we go. We are going to create our first web component using Angular. For this first exercise, let’s create a card to describe people in our community. We call it “social card”.

With your favorite terminal, create a new Angular project

ng new social-card

Create an Angular Component

Add Angular material

Because we want to use the Angular Material library to create our component, we need to add it as a dependency on our project. During the installation, I select the default values.

ng add @angular/material

Create the Material Card Component

From the example section of the Card component, I choose to implement the “Card with multiple sections” one. https://material.angular.io/components/card/examples

First, I create a new Angular component. Please note “components” here refer to the Angular Component, not Web Components defined in the introduction.

ng generate component card

The Angular CLI automatically creates all the needed files and updates the different files to make the application work out of the box.

In the src/app/card/ folder, open the HTML file and copy the following code into it:

<mat-card class="example-card">
   <mat-card-header>
     <div mat-card-avatar class="example-header-image"></div>
     <mat-card-title>John Doe</mat-card-title>
     <mat-card-subtitle>Dev Adcovate</mat-card-subtitle>
   </mat-card-header>
   <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
   <mat-card-content>
     <p>
       The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
       A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
       bred for hunting.
     </p>
   </mat-card-content>
   <mat-card-actions>
     <button mat-button>LIKE</button>
     <button mat-button>SHARE</button>
   </mat-card-actions>
 </mat-card>

Then, open the CSS file and copy the following code:

.example-card {
   max-width: 400px;
}
 .example-header-image {
   background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');
   background-size: cover;
}

Import Angular Material Modules in your App Module

Then, open the src/app/app.module.ts to import the MatCardModule and the MatButtonModule.

import {MatCardModule} from '@angular/material/card';
import {MatButtonModule} from '@angular/material/button';

imports: [
 MatCardModule,
 MatButtonModule

Run your application

Edit the app.component.html file from the src/app folder and replace the existing with the following:

<app-card></app-card>

You can start your application by running the following command at the project root level:

ng serve

So far, so good, but the following application is not yet a Web Component and we need to make some changes to transform it.

Transform the Application into a Web Component

Add Angular elements dependency

Angular elements is the name in the Angular ecosystem for custom elements. This dependency allows us to easily create a custom element from our existing application.

ng add @angular/elements

Update the app.module.ts

From the src/app/app.module.ts file, update the constructor, call the createCustomElement() method, and define the custom element tag, ng-social-card.

import {createCustomElement} from '@angular/elements';

export class AppModule {
 constructor(private injector: Injector) {
   const el = createCustomElement(AppComponent, { injector });
   customElements.define('ng-social-card', el);
 }

 ngDoBootstrap() {
 }
}

Remove the AppComponent in the bootstrap array. we don’t need it anymore and it could generate errors in the console log.

Update the index.html

Open the src/.html file and change the content to use the custom-element instead of the initial value. \

<body>
 <ng-social-card></ng-social-card>
</body>

We have now instantiated the application, using a custom element instead of the regular app-root tag.

Start the application again using ng serve and check that the application is still working.

Build and Run Your Web Component

Build it!

To build your component you have to run the following command:

ng build

A dist folder is now created containing an HTML file and all the Javascript and CSS files.

If you open the index.html, you can see it contains the custom elements previously defined.

<head>
 <meta charset="utf-8">
 <title>NgSocialCard</title>
</head>
<body>
 <ng-social-card></ng-social-card>
<script src="runtime.6ef72ee47cb5bc7a.js" type="module"></script>
<script src="polyfills.41cc36d27639541d.js" type="module"></script>
<script src="main.8609c098aeba9ec8.js" type="module"></script>
</body>

Run it!

To run it, you can install serve through npm to start a lightweight web server.

npm install -g serve

And from the dist/ng-social-card folder, run the following command:

serve

Congratulations! You’ve just created your first micro frontend using Angular.

Resources

All the code is available at the repository: https://github.com/avdev4j/ng-social-card

Find more micro frontends videos on our YouTube channel: https://www.youtube.com/c/EntandoVideos

Join us on Discord to share and learn about Composable apps: https://discord.gg/SdMCvyzzHm

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

Sohini Pattanayak — Fri, 03 Jun 2022 07:39:36 +0000

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>
 );
}

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

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

We build the app using this command:

npm run build

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:

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.

Initialize the project: ent prj init
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.

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

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

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

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:

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

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.

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

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.”

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!

Do you think Composable?

Sohini Pattanayak — Tue, 24 May 2022 20:13:54 +0000

What is the first thing you imagine when you hear “composable”?

I think it is something that can be easily modified, built, configured, and integrated. What are your thoughts on this? (Let me know in the comments below!)

Enterprises aiming to be more adaptive to their customer needs while staying resilient wish to be composable!

The question is, are you someone who believes in the simplification of design modules and leveraging modules from other resources? That to quickly adapt you should be able to seamlessly swap those same modules in and out? Are you someone who is open to innovation and exploring new capabilities? Do you believe in cost reduction (for instance, with reusable modules)?

If you answered “yes” to any of the above, then building applications in a composable way is the solution for you!

But how do you begin “thinking composable”?

It isn’t hard! You can start by focusing on which parts of your enterprise change quickly and frequently, such as customer/marketing segments or products, as they are most likely to benefit from composability.

This is not going to happen overnight. It takes time to understand and adapt to composability, but gradually it becomes useful

First we need to understand the advantages of composability and how to “think composable” in a constructive way. But then how and where can we experiment with our composable thoughts?

I’ve got an answer for that, too! Entando has built an Application Composition Platform (ACP) that you and your organization can use to experiment with the idea of composability. You can start building composable applications with the Entando ACP.

Entando’s mission is to standardize and orchestrate the composable approach and the composition process. It is the leading open-source Application Composition Platform for building cloud-native, composable applications on top of Kubernetes.

To give you a little more insight, the ACP is a set of technologies that enables teams to build, deploy, run and manage applications developed by composing and integrating components and business capabilities.

If this interests you, here is a series of blogs and video tutorials to help you get started.

We at Entando are also working to build a community to create awareness about composable applications. If you’d like to learn along with us and contribute to our community, then Modular Squad is the perfect place for you! This is our Discord Link. Come join us, and let’s build a composable future!

Why is Technical Blogging so important?

Sohini Pattanayak — Wed, 18 May 2022 07:11:31 +0000

All the learning that we gather together defines our knowledge. And when we put this knowledge into writing, by providing direction, instruction, explanation, and empathy, we call it Technical Blogging.

But, why do we have to do this?

If we look at it from our own perspective, it’s really helpful for us to grow as an individual. Because documenting our learning process for a particular subject, in one place, in a complete manner is, first of all, self-help! There are two benefits in it:

Our storytelling capability develops and improves with time.
When we need to work on that particular subject even after 5 years the blog written by us helps us stay up to date on the subject.

What, apart from these?

If you are someone who wishes to be around a technical community or a network of people, technical blogging is so your thing!

One technical blog can help many learn and grow, just as you grow personally. After all, we look for blogs when we try to learn something new. So, we can definitely be one of those bloggers whose writings are read by others as they try to learn something new.

But what if you suffer from imposter syndrome?

“What if I am not proficient enough to write a blog? What if I don’t have the skills to do it? What if I am not knowledgeable enough?”

Well, you don’t need to be a pro in order to write a blog. If you’re a very keen learner, you can always use your learnings to start writing blogs.

And whatever we learn is our knowledge. Hence, each one of us is absolutely eligible for writing technical blogs.

Let’s explore a few things we can use as best practices while writing blogs.

Always define key points before starting a blog. (It can be a goal statement too)
Dedicate each paragraph to a particular topic/area
Make sure you are writing with your target audience in mind
Create engaging sentences at the beginning of each paragraph to develop interest
Break lengthy sentences into shorter ones
Break up big ideas into smaller sections, with short paragraphs
Use bullet points to explain agendas/steps
when working with an in-depth technical subject, use flow diagrams to explain processes
Be empathetic while you write. Express how you feel; don't be afraid to show your emotions in the writing. This will keep it from sounding like a dry step-by-step manual.
Use a tool to check spelling mistakes, nouns, pronouns, adjectives and etc

These are the steps I try to follow when I am writing blogs. The best thing about writing blogs continuously is that your writing improves every time. And that is learning too.

To wrap up, It is not really hard to write a technical blog. The very first thing you really need to do is get started. And slowly the quality of your writing and content will improve over time. Believe in your capabilities and write everything you can to explain your content at its best! The blogs you write can help many other people while satisfying your own curiosity/learning goals. It is mutually beneficial, for you and the audience you’re writing the blog for.

That’s all for this blog. I hope this was useful for you. Please feel free to drop your thoughts in the comment section below.

Thank you!

What’s new with the Entando 7.0 Release?

Sohini Pattanayak — Wed, 27 Apr 2022 04:24:08 +0000

Entando is all set with its new release! Would you like to learn more about it? If yes, then this blog would give you a perfect sneak peak of everything we released with version 7.0.

Entando 7 lets us build a composable business model using composable applications. Composable business allows enterprises to rapidly adapt to market shifts and opportunities by allowing rapid recomposition of services and products. Composable applications enable composable business by allowing the applications and infrastructure required to support the business to change quickly, at low cost, and at greatly reduced risk.

Apart from this, the new Hub supports code reuse for major enterprises and SI partners. It also aligns pro-code development with low-code composition. The question here is, do you really know what the Entando Hub is?

The Entando Hub enables a team to share components across Entando Applications. The Hub allows users to:

Centralize components and business capabilities for use across teams, groups, or clients
Publish, manage and communicate component features, versions and metadata
Perform business-level assessment of component readiness

The new Entando Hub provides a repository for application modules. Modules can be individual application components, collections of components called Packaged Business Capabilities (PBCs), or complete solutions or solution templates. The hub provides a simple interface, or marketplace, to store modules and make them discoverable across multiple development teams and applications. The hub works in conjunction with Git allowing development teams to work in the same way as they do today, but adding a web interface to simplify the interaction between creators of pro-code modules, and application composers assembling applications from the hub. The hub also enables module curators a location to enforce IT governance. The hub is available to developers, enterprises, and solution providers as a SaaS or for private installation on prem on in the cloud.

Our partner program is helping System Integrators (SIs) develop new customers and new revenue streams for customers adopting composable applications on kubernetes. If you are interested in learning more about our Partner Program, drop us a line at <partner@entando.com>.

Now, let’s also take a look at the Entando Component Generator (ECG). The ECG is a Jhipster blueprint that generates Entando compatible Java applications and micro frontends. With the new release of Entando 7, the ECG has now been upgraded to use Jhipster 7.2!

The Entando CLI has also been improved. The ent CLI provides a set of commands that accelerate the developer experience by assisting the developer with common tasks such as quickly installing a new copy of Entando, generating an Entando project via JHipster, deploying an Entando Bundle, etc. To learn more about the fixes and changes take a look at our release notes

Many interesting features right? Well, if you’re pretty new here, why don’t you get started? You can get started through our documentation.

While we are doing all these amazing things, we are also building a community that deeply focuses on Composability and Modularity. The goal of this community is to grow an awareness and culture about composable applications. And none of this would be possible without your support, love and contribution. If you are really interested to learn more and get started with us, join our discord server and drop us a hi!

Do let us know your feedback on Entando 7.0!

Thank you!

Part 1: Installing and setting up React and Tailwind

Sohini Pattanayak — Wed, 13 Apr 2022 09:14:56 +0000

In this blog series, we’ll build a micro frontend using React and Tailwind CSS. We’ll break the series into two parts. This being the first part, we’ll set up our React project here, and install Tailwind step by step. In the second part of this blog, we will write code to build our stats micro frontend. And later we will bundle, publish, deploy and use it from the Entando Component Repository (ECR) on a page, newly created by us. Just in case we don’t all know what a micro frontend is, here’s a little explanation.

Imagine an UI or a website, and what do you see? A big frontend, right? Well, this particular frontend application can be split up into several smaller pieces of a frontend we call micro frontends. We can deploy and manage each of them independently. We can use a variety of libraries and frameworks like React or Angular, etc., to build these micro frontends on a single page. Now the question is, how do we do this?

Before we get started, I’m assuming you’re familiar with what a bundle is. In case you’re pretty new to this, you can check out this blog!

To begin, we refer to this template. This is a simple React template that has all the files that we need to bundle and deploy our code. All you have to do is clone it on your local machine and open it in your favorite code editor!

For the next part, we need to navigate inside cd ui/widgets/widgets-dir and create our React app. Let’s name it stats-widget.

We run this command to create our react app:

npx create-react-app stats-widget

Once it’s created, we go inside it with cd stats-widget, and run npm start to check if the app was successfully created.

Now, before we install Tailwind we need to make sure our project is ready for Entando bundling. For that we create a bundle folder inside the stats-widget folder and create two files. The first one is stats-descriptor.yaml and the second is stats.ftl. This descriptor file contains some context about our widget and is also used to point to the ftl file. And the ftl file is a FreeMarker template used to render the final HTML code. It defines the "viewed" part while the descriptor defines the definition from a bundle point of view.

To get going, paste this code inside your stats-descriptor.yaml file.

code: stats-widget
titles:
 en: Sample Stats Template
 it: Sample Stats Template
group: free
customUiPath: stats.ftl

And, paste this code inside the stats.ftl file.

<#assign wp=JspTaglibs["/aps-core"]>
<#-- entando_resource_injection_point -->
<#-- Don't add anything above this line. The build scripts will automatically link the compiled JS and CSS for you and add them above this line so that the widget can be loaded-->

<@wp.info key="currentLang" var="currentLangVar" />
<stats-widget locale="${currentLangVar}"/>

Cool. We are now done setting up our bundle folder. But we still need to update the bundle_src folder that’s present inside the root directory of our project. Hence, we go back to the root directory and go inside our bundle_src folder. We open the descriptor.yaml file and update the code by replacing the name of our React app and widget descriptor. It should look like this:

code: tailwind-demo
description: Template for Tailwind Components
components:
 widgets:
   - ui/widgets/widgets-dir/stats-widget/stats-descriptor.yaml

Perfect, now we are a 100% done with setting up all the bundle folders. At this point, our project structure should look like this:

Now we can absolutely begin with installing Tailwind on our React app. So, let’s navigate to our React app’s directory cd ui/widgets/widgets-dir/stats-widget. Now, I have a question: Have you ever wondered why we use Tailwind?

Tailwind is a utility-first CSS framework that is packed with many classes which are easy to use in our HTML tags. These utility classes are named as per their function so that even a beginner can understand what a particular CSS class defines. The best part about Tailwind CSS is that it’s highly customizable! Plus, we don’t need to spend hours writing CSS chunks, as Tailwind makes them easier. Visit the Tailwind CSS website to learn more.

Let’s get started with the installation.

First, we enter the stats-widget folder, e.g. cd ui/widgets/widgets-dir/stats-widget from the root directory. We then install Tailwind from our terminal with the next few commands:

Install Tailwind CSS, Post CSS and Autoprefixer:

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Install CRACO. React doesn’t allow us to override Post CSS configuration by default, but we can use CRACO to configure Tailwind.

npm install @craco/craco

Create a config file for CRACO:

touch craco.config.js

Add the configurations below :

module.exports = {
  style: {
    postcssOptions: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
}

To tell our app to use CRACO, we configure our package.json file, and replace everything under scripts with the following:

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
}

Create the Tailwind configuration file, using the --full tag to generate all the default configurations.

npx tailwindcss init --full

Using the --full tag is optional. It involves a huge configuration you might not want to deal with.

Please do not forget to replace the existing purge[] entity (under module.exports ) with this:

purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],

Go to the src folder and replace the contents of the existing index.css file with the following:

@tailwind base;

@tailwind components;

@tailwind utilities;

This index.css file consists of all the Tailwind base styles.

Exit the src folder and open the package.json file to configure our app to use CRACO to build our styles every time we run our app using npm start or npm build. To do this, we insert the following syntax under the scripts section of the package.json file:

"build:style": "tailwind build src/styles/index.css -o src/styles/tailwind.css",

Import Tailwind CSS base styles to our index.js file:

import './index.css';

Delete the app.css file and change our app.js file to this:

function App() {
 return <div>Hi there!</div>;
}

export default App;

We have completed the Tailwind installation and configuration. We can test our React app by generating a page that says, “Hi there”. If it runs, then perfect. We are all set!

Attention!

If we get an error about PostCSS versioning or Autoprefixer versioning, we can use the following commands:

npm uninstall tailwindcss
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

You have now installed Tailwind correctly!!

Well, that’s all for this blog. In the next blog of this series, 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.

I hope that’s really exciting! Meanwhile, you’re here so I’d like to mention, we at Entando are building a community to spread awareness of Composable and Modular applications. There is a lot more we are trying to do with our community. If you feel like engaging or contributing to our community, please join our Discord Server, and let’s learn together! See you in the next blog. Thank you.