MfeAmplitudeIntegration POC

✨ This workspace has been generated by Nx ✨

Introduction

This is a POC to demonstrate how to integrate Amplitude into a micro frontend architecture. The POC is based on the following documentation: https://www.notion.so/jtproduct/Amplitude-integration-in-Module-Federation-micro-frontend-architecture-6eef5f757cf340f9901178bdc5c96ebb?pvs=4

Getting Started

0. Project structure

In this Nx generated MFE boilerplate, we have 3 apps:

• host: the host app
• remote1-app: a micro frontend
• remote2-app: a micro frontend

All apps are:

• using React.js.
• utilizing Webpack 5 Module Federation to share code between apps. All libraries NPM are shared singletons by default (default settings in nx.json).

1. Requirements & install dependencies in the root folder

You need to have a minimum Node.js version >= 16 installed on your machine.

npm install

or with Yarn

   yarn install

It is prerequisite to have Nx CLI installed on your machine

npm install -g nx

or with Yarn

yarn global add nx

2. Running in local (development mode)

In project root folder run the following command to start all apps:

nx run-many --parallel --target=serve --projects=host,remote1-app,remote2-app

Navigate to http://localhost:4200/ to open the host app. For remote1 and remote2 use ports 4201 and 4202 respectively. The app will automatically reload if you change any of the source files.

3. Running in production mode

In project root folder run the following command to build all apps:

nx run-many --parallel --target=build  -c=production --projects=host,remote1-app,remote2-app

The run the following command to serve in production mode:

nx run-many --parallel --target=serve  -c=production --projects=host,remote1-app,remote2-app

Further help

Visit the Nx Documentation to learn more.

Zoltan Rakottyai zoltan.rakottyai@jobandtalent.com Via Slack: @Zoltan Rakottyai