Chapter 3 - Microfrontend1 Project (React)

IMPORTANT: This chapter assumes that you already have installed a recent version of Node.js on your computer. If you do not have it yet, you can download it here: https://nodejs.org/en/download/

Creating this application can be approached in various ways. Here, we will leverage TypeScript and need to set up a project with a build/transpile process that allows us to make changes and verify them in real time. While you could manually create this project, install all required npm packages, and create each file individually, it is much more efficient to use vite^[1]

Directory Structure

Before we proceed creating the individual apps, let's create a root directory called introduction-to-micro-frontends-project. Inside this directory we will create the individual microfrontends and the container-app. In the end, your directory structure should look similar to this:

Create Project Wizard

To set up the project, within the directory introduction-to-micro-frontends-project, open your terminal and execute the following Node.js command:

npm init vite@latest

If you do not have already installed the package create-vite@latest[^chap1-2], you will be prompted to install it. In this case, type y and then press enter to proceed:

Need to install the following packages:
  create-vite@latest
Ok to proceed? (y)

The create-vite wizard will then start and ask for the name of the project. The default is vite-project, so change this to microfrontend1 and press enter:

? Project name: › microfrontend1

Next, you will be asked to select a framework. Use the keyboard arrows to scroll down the list and stop at React, then press enter:

? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
    Vue
❯   React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others

Then, you will be asked which "variant" you want to use. Scroll down to TypeScript and press enter:

? Select a variant: › - Use arrow-keys. Return to submit.
❯   TypeScript
    TypeScript + SWC
    JavaScript
    JavaScript + SWC
    Remix ↗

This will create a folder named microfrontend1, which is also the name of our project. At the end, it should display a message similar to this:

Scaffolding project in /local-path-to/microfrontend1...

Done. Now run:

  cd microfrontend1
  npm install
  npm run dev

The first command navigates to the newly created sub-directory called microfrontend1, the second one installs all npm dependencies, and the third one serves the app locally. You'll see a message similar to this displayed:

  VITE v5.2.8  ready in 239 ms

  ➜  Local:   "http://localhost:5173/"
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

From your web browser, navigate to http://localhost:5173, and you'll see the application's homepage rendered.

Stop the application by pressing CTRL + C.

Proceed to delete the file public/vite.svg as it will not be needed. Also, move the file react.svg from src/assets/ to the public/ directory.

Then open the file index.html and modify the icon <link> like this:

<link rel="icon" type="image/svg+xml" href="/react.svg" />

and the <title> like this:

<title>Microfront1</title>

NOTE: This index.html will be served only when we run the microfrontend1 app standalone, not from within the container-app.

Replace the App.tsx code with this:

// file: App.tsx
import Counter from './components/Counter'

function App() {
  return (
    <>
      <Counter/>
    </>
  )
&#125;

export default App

Add a new file at the path microfrontend1/src/components/Counter.tsx with this code:

// file: introduction-to-micro-frontends-project/microfrontend1/src/components/Counter.tsx
import { useState } from 'react'

const buttonStyle = {
  display: 'flex',
  alignItems: 'center',
  borderRadius: '8px',
  padding: '0.6em 1.2em',
  background: '#ffffff',
  color: '#000000',
  cursor: 'pointer',
}

export default function Counter() {
  const [count, setCount] = useState(0)

  const onClick = () => {
    console.log('react: counter onClick')
    setCount((count) => count + 1)
  }

  return (
    <button className="react-button" style=&#123;buttonStyle&#125; onClick=&#123;onClick&#125;>
      <img src="http://localhost:5001/react.svg" style=&#123;&#123;width: '1.5rem'&#125;&#125;/>
      <span style=&#123;&#123;marginLeft: '0.25rem'&#125;&#125;>Microfrontend1: Count &#123;count&#125;</span>
    </button>
  )
&#125;

Replace the code inside src/style.css with this:

:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Finally, adjust the vite.config.ts file to customize the output directories and ensure the application runs on port 5001:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// This is a module app (to be consumed by the host app)
// This microfrontend uses the React framework

const port = 5001

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    port: port
  },
  plugins: [react()],
  build: {
    outDir: './microfrontend1',
    cssCodeSplit: false,
    sourcemap: false,
    minify: false,
    rollupOptions: {
      output: {
        entryFileNames: `assets/[name].js`,
        chunkFileNames: `assets/[name].js`,
        assetFileNames: `assets/[name].[ext]`
      }
    }
  }
})

Run the app again using npm run dev, and it will now be served on port 5001:

VITE v5.2.8  ready in 117 ms

  ➜  Local:   http://localhost:5001/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

From your web browser, navigate to http://localhost:5001, and the updated interface should be displayed as shown in the screenshot.

Chapter 3 Recap

In Chapter 3, we focused on setting up and configuring Microfrontend1 using React. This chapter was pivotal in demonstrating how React can be effectively utilized in a microfrontend architecture, ensuring that it integrates smoothly with the broader application ecosystem.

Key Developments

1. Project Setup: We initiated Microfrontend1 using Vite, selecting React as the framework due to its widespread popularity and robust ecosystem. The setup process involved:

• Utilizing npm init vite@latest to scaffold a new React project.
• Choosing TypeScript during the Vite setup to enhance the project with strong typing and modern JavaScript features.

2. Configuring the Development Environment: Adjustments to the project's configuration were made to optimize the development and build processes specifically for a React microfrontend:

• Modifying the vite.config.ts to handle React-specific settings, including JSX transformation and fast refresh capabilities.
• Structuring the project directory to clearly separate concerns, such as placing components, assets, and styles in designated folders.

3. Developing the React Application: The core of the chapter was focused on building a functional React application that could stand alone for development and testing but also be integrated within the container app:

• Implementing essential React components and utilizing hooks for state management to demonstrate typical React patterns within a microfrontend.
• Showing how React's component-based architecture is ideally suited for encapsulated features within microfrontends.

Integration with the Container App

A significant part of the chapter detailed how to ensure that Microfrontend1 could be dynamically loaded and managed by the container app:

• Exploring strategies for exposing the React app’s lifecycle methods to the container app, allowing for seamless integration and interaction.
• Discussing how to handle the mounting and unmounting processes within the container to prevent memory leaks and ensure clean transitions.

Testing and Validation

We implemented scripts and commands to build and serve Microfrontend1, verifying its functionality both as a standalone app and as part of the larger microfrontend system:

• Running the React app independently to ensure it functions correctly and meets the design requirements.
• Integrating the built React app within the container app and testing the dynamic loading process, validating the entire flow from loading to unmounting.

Conclusion

Chapter 3 provided a comprehensive guide to developing a React-based microfrontend, highlighting React’s strengths in a modular and decoupled architectural context. By the end of this chapter, Microfrontend1 was fully operational, capable of independent function as well as integration with the overarching container application, thus enhancing the modular nature of our project.

---

1. https://vitejs.dev ↩︎