/swapi-client

Web client for SWAPI API as a training application

Primary LanguageTypeScript

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