A micro frontends sample implementation of The Tractor Store built with Preact, ESI and Web Components. It's based on the Blueprint.

Live Demo: tractor-store-preact-production.up.railway.app

List of techniques used in this implementation.

This implementation is deliberately kept simple to focus on the micro frontends aspects. URLs are hardcoded, components could be more DRY and no linting, testing or type-safety is implemented. In a real-world scenario, these aspects should be addressed properly.

• Web performance optimizations (e.g. on-demand loading, proper chunking, best practices, ...)
• Improve DX (linting, HMR, error handling)
• Show selected store on checkout page
• Migrate last lighthouse score changes

Clone this repository and run the following commands:

git clone https://github.com/neuland/tractor-store-preact.git tractor-store-preact
cd tractor-store-preact

Install dependencies:

# install root dependencies (local only)
npm install
# install dependencies in all projects
npm run install:all

Start the development server:

npm start

Open http://localhost:3000 in your browser to see the integrated application.

Server- and client-side code is rebuilt automatically when you make changes. The servers restart automatically as well. You have to reload the browser manually.

The application runs in a single Docker container with all 4 services. Only port 3000 (integration/gateway) is exposed.

docker buildx build --platform linux/amd64,linux/arm64 -t ghcr.io/neuland/tractor-store-preact:latest --push .

Image: ghcr.io/neuland/tractor-store-preact:latest

neuland Büro für Informatik is a software development company based in Germany. We have a strong e-commerce background and experience in building verticalized software solutions.