This repository is an example application using the Mosaic frontend microservices architecture.

It makes use of Tailor only, so it is a pretty basic example.

Since the idea is that a separate team would be in charge of each of the fragments, there is some duplicate code within each of the fragments such as the Webpack configuration.

Tailor is a layout service. It is able to parse HTML templates and replace <fragment> tags for their respective bundles.

Tailor also injects a RequireJS bundle to your template so you're able to use Webpack Externals to share dependencies across fragments (such as react).

Fragments are small applications.

They might be React applications, or any other implementation.

Fragments do not need to necessarily render something.

This app consists basically in a couple of fragments:

• fragment-common
• fragment-header
• fragment-contacts
• fragment-chat

Each fragment contains it's own webpack.config.js that specifies how to build it.

Fragments have several cross-dependencies that need to be shared:

• react
• react-dom
• prop-types
• classnames
• proppy
• proppy-react

In order to handle this, there is one fragment called fragment-common.

This is the fragment that exports common dependencies across fragments. It is the only one of the fragments who is actually built using umd as a libraryTarget.

This fragment is mostly necessary in order for you not to share react and other cross-fragment dependencies inside of each fragment bundle, making the bundle smaller for each fragment.

All the other fragments are parts of this application.

Those shared dependencies are listed as externals in their respective webpack configurations.

All of them are built using amd as a libraryTarget in their Webpack configuration files.

The dependency management is handled with RequireJS on runtime.

1. Clone this repository using git clone https://github.com/armand1m/mosaic-tailor-react-example.git
2. Install all of the base dependencies with npm install
3. Install all of the fragment dependencies with npm run install-fragment-dependencies
4. Build the fragments with npm run build-fragments

1. In one terminal, start the fragments servers with npm run start-fragments
2. In another terminal, start the Tailor service with npm start
3. Navigate to http://localhost:8080

1. In one terminal, start the fragments watchers with npm run watch-fragments
2. In another terminal, start the fragments servers with npm run start-fragments
3. In another terminal, start the Tailor service with npm start
4. Navigate to http://localhost:8080

• Mosaic9
• Tailor Repository
• The Recipe For Scalable Frontends (Zalando)
• Slides