A moderately opinionated monorepo template for launching an Expo mobile app and Next website w/ shared code and storybook powered design systems.
A moderately opinionated monorepo template for launching an Expo mobile app and Next website w/ shared code and storybook powered design systems.
Applications are clients intended for deployment - not to be imported by other packages/applications.
applications/mobile
: Expo deployed mobile application.applications/mobile-components-story
: Expo deployed application of packages/mobile-components
's Storybook.applications/website
: Next.js website.Packages are libraries of code which we can compose to help build our applications.
packages/brand
: demonstrating client-agnostic shared code.packages/eslint-plugin
: our various ESLint configs, kept here to enforce consistency between workspaces.packages/expo-monorepo-config
: various utility scripts to make things easier when working with monorepos.packages/jest-config
: our various Jest configs, kept here to enforce consistency between workspaces.packages/mobile-components
: design system targeting React Native (via Expo).packages/brand
, via Styled Components.packages/web-components
: design system targeting the web/DOM.packages/brand
, via Styled Components.Below are some fairly loose instructions on where to get started with this template.
@monorepo-template
to your chosen name (remember @
prefix).yarn install
Set the following secrets in your GitHub repository:
EXPO_TOKEN
: token to authenticate with your Expo organization and projects.EXPO_ORGANIZATION
: the Expo organization which your mobile-components
and mobile-components-storybook
exist on.CHROMATIC_PROJECT_TOKEN
: your Chromatic project token we deploy your web-components Storybook to.packages/monorepo-helpers/getWorkspaceAliasFixes.js
).
babel-plugin-module-resolver
.config.resolve.alias
.react-native
in the root node_modules
. We force this by defining it as a dependency
in the root package.json
.babel.config.js
- seemingly regardless of content. To bypass this, @monorepo-template/webpack-config-expo
intercepts the Babel loader and disables use of the config file. We then reapply babel-preset-expo
- as in @expo/webpack-config/webpack/loaders/createBabelLoader.js
.