Skip to content

quickstart monorepo example for react projects and vanillajs projects

License

Notifications You must be signed in to change notification settings

examples-hub/react-monorepo-starter-ts

Repository files navigation

react-monorepo-starter-ts

  • quickstart monorepo example for react projects and vanillajs projects

overview

  • tech-stack

    • react 17
    • typescript 4
    • monorepo
      • A mix of TypeScript and Javascript packages
      • npm workspaces only, no lerna
      • yarn workspace should work too, but not tested here
    • webpack 5
      • webpack config shared at top level with webpack-merge
      • hot reloading with react-refresh-webpack-plugin
    • babel
      • react components lib is compiled with babel
      • react app is compiled with webpack and babel-loader
    • jest for testing
    • styling
      • support scss, css
    • other dev tools
      • eslint
      • prettier
  • project-structure

    • package-a: simple utils
    • packages
      • sample-app: simple react app
      • sample-components: simple react components
  • all dependencies are hoisted to top-level node_modules using npm workspaces(require npm 7+)

    • put all your deps of dev/build/test/engineering at top level

usage

  • requirements
    • npm 7+
# npm install --legacy-peer-deps
npm i
npm start

notes and issues

  • npm 7 workspaces limitations

    • no equivalent of yarn workspaces run cmd
    • no equivalent of yarn workspace workspaceName cmd
  • The main field of all package.jsons points to src for easier development

    • imports in jest testing use main
    • imports in vscode ide use main for code jumping
    • imports in webpack use module
  • If you want to publish a package, it's better to point main to dist in the package.json

  • APP_ENV environment variable

    • if no value is set, building es6 and ts is supported, but not react
    • if react* is set, building react is supported
    • if reacthot is set, react hot reloading is supported
    • see babel.config.js file for details and package.json scripts for examples

roadmap

  • new demo page

  • css url

    • image url
  • storybook(too many breaking changes recently, not planned until stable)

    • support component story format
    • support mdx docs

license

MIT