Star Wars API web Client

Welcome to the STRAPI Web Client made by Romulo Bordezani.

Features

Mono-repo made with Module Federation, based on Yarn and Webpack
The page Films is a completely isolated package, to demonstrate the integration between packages
Modern Redux - Using Slices, RTK for Data Fetching with Cache implemmented
Popular Views persistence on Local Storage made using redux-persist
Integration with the Image Bank - https://starwars-visualguide.com/ to provide accurate pictures for all resource types
Animation library framer set on
Remote Type script definitions between packages, generated using FederatedTypesPlugin
Styles using Emotion and BEM
Supports Jest and Cypress

Next steps

Add more unit and Cypress tests
Internationalization with i18n
Provide PWA settings with service worker and manifest
Add GitHub actions/Husky controls to prevent broken deploys

Demo

Available at: swapi-client-alpha.vercel.app

Installation

npm install --global yarn
yarn

Running

Execute the following at the root to get a brand new .env file:

yarn generate-env-file

Run yarn start in the root folder. This will build and serve these Federate Modules host,design-system, and films on ports 3000, 4000 and 4001 respectively.

Tip: the very first run needs to generate @mf-types, so probably you need to re-run

Tip 2: while adding new Federated components, close your browser's tab running the app before reload the command yarn start - seems that the hot updates are trying to get the bundle before it is generated, causing issues

Linting

yarn lint

Will ONLY check for eslint and prettier issues

yarn prettier-format

Automatically fixes code formatting, when possible

Cleaning up

Removes all node_modules, dist and @mf-types folders, to start a clean rebuild

yarn clean

Testing

yarn test

yarn test:coverage

Generates a test coverage report

React Testing Library tests through Jest and Module Federation

This is achieved using jest's moduleNameMapper by telling it how to resolve remote imports. Add Design System components at the list following the pattern bellow in the file jest.config.js:

  moduleNameMapper: {
    'DesignSystem/Components': '<rootDir>/packages/design-system/src/components',
  }

Same aplies for Cypress

On file packages/host/configs/webpack.cypress.js, add new componets like:

'DesignSystem/Components': path.resolve(__dirname, '../../design-system/src/components'),

Running Host Cypress Component test

Go to host service folder and run yarn cypress
This is achieved using webpack's resolve.alias by telling it how to resolve remote imports.

yarn workspace host cypress

FederationConfig

For more settings, you can access federationConfig from path packages/[host|films|design-system]/configs/federationConfig.js

Initial Bootstrap

Bootstraped from module-federation-examples/typescript-react-monorepo-test

romulobordezani / swapi-client