Code Monkey home page Code Monkey logo

expo-nextjs-monorepo's Introduction

Expo, Next.js & shared packages Monorepo Example

This is an example showing how to create Expo and Next.js apps in a monorepo.

New to Expo ? Follow Expo installation guide


Architecture

root package.json

I choose to use workspace nohoist because Expo and Next.JS crash on startup, due to different react-* versions.

Hoisting creates package resolution errors.

In this demo, every project has their own node_modules. The disk space lost is minor.


packages

Code shared between Expo and Next.js

You can create all custom packages you want

Here an example :

cd packages/app-ui

BONUS : You can add dependencies to your shared packages. Metro and Webpack config will take care of it.

If your shared packages have react-* dependencies, add resolutions option in your apps package.json to force yarn resolves your app react-* dependencies


apps

Expo

cd apps/expo-app

yarn start-expo to start expo-app from root directory

Next.js

cd apps/next-app

yarn start-next to start next-app from root directory

Tips

Root package.json

  • Add common dev dependencies (prettier, eslint)

apps/expo-app package.json

  • Add all your Expo dependencies
  • Add resolutions option in your package.json to force yarn resolves your app react-* dependencies
  • Run all your Expo Cli commands from here or create a script entry in root package.json
  • If your shared packages are not in packages folder, update your metro.config.js :
    • const sharedPackagesFolder = "MY_PACKAGE_FOLDER_NAME";

apps/next-app package.json

  • Add all your Next.js dependencies
  • Add resolutions option in your package.json to force yarn resolves your app react-* dependencies
  • Run all your Next.js Cli commands from here or create a script entry in root package.json

packages/[myPackage] package.json

  • Add all your [myPackage] dependencies

License

MIT

Inspiration

Thanks to https://github.com/axeldelafosse/expo-next-monorepo-example

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.