A monorepo boilerplate for react web and react native. Uses react-native-web to reduce time invested in making the same components for mobile and web

Last update: Jan 9, 2022

Monorepo template

Get Started

Run the following command to install all the dependencies in the right location

yarn lerna bootstrap
yarn workspace @marshal/core run build:w

This will build the files in the core directory and it will be ready to use. All changes to the files in the core directory will be "watched" and those changes will be reflected wherever these files are being consumed.

Running the application

There are 2 ways to run the application on your desired platform

  • Option 1(recommended): Using the feature of yarn workspaces, you can choose to run the workspace commands together or choose a particular workspace and run it's commands

For web

yarn workspace @marshal/web start

For mobile

# to run the metro server
yarn workspace @marshal/mobile start # after this, we build the application
yarn workspace @marshal/mobile ios
# OR
yarn workspace @marshal/mobile android

In event you want to run both the web and mobile servers together, you just need to run

yarn start

and this shall run yarn start in both the workspaces.

  • Option 2: Open the desired platform's directory and run the following command

    • For Web:
    cd packages/web
    yarn start
    • For Mobile:
    cd packages/mobile
    # to run the metro server
    yarn start # after this, we build the application
    yarn ios
    # OR
    yarn android

Creating new and independent packages

In order to create a new and independent package(NOT inside packages directory) which is managed inside the monorepo, do the following:

  • Add the name of the independent folder inside the workspaces field at the root level package.json and in the packages field in lerna.json.
  • To create module inside the new independent package, run the following command:
yarn lerna create <name-of-module> [name-of-independent-package]

Note: The independent packages in this folder are:

  • packages
  • linters

Check package.json and lerna.json for reference to the above.

Most common errors

  • version mistmatches in package.json in all the packages. All the dependencies should have the same verison
  • Wrong node modules path in the mobile app native ios and android configs.
  • while building ios, react-native directory won't be found in mobile/node_modules
  • android builds might fail because of gradle versions

Solutions

  • make all versions the same and use lerna to manage the installation of node_modules
  • rectify all node_module paths inside the native ios and android configs
  • make sure that all the paths for react native in the Podfile have been changed and then run npx pod-install
  • Do the following in case of failed builds:
    • Go to android/gradle/wrapper/gradle-wrapper.properties, and change the value of distributionUrl to https\://services.gradle.org/distributions/gradle-6.7.1-bin.zip like this distributionUrl=https\://services.gradle.org/distributions/gradle-6.7.1-bin.zip
    • Download JDK 11 and set your $JAVA_HOME variable to JDK 11

Tips

  • To get a list of emulators; run this command: emulator -list-avds
  • To increase performance of emulator; run this command:
emulator -gpu host -feature HVF -avd <name-of-avd-from-list>

References

GitHub

https://github.com/AmaanKulshreshtha/marshal
You might also like...

StackBlitz template for an Nx monorepo with React

StackBlitz template for an Nx monorepo with React

Stackblitz Nx React This project was generated using Nx. 🔎 Smart, Extensible Build Framework Adding capabilities to your workspace Nx supports many p

Oct 25, 2021

Clerk Fastify React Prisma fullstack monorepo starter

Clerk Fastify React Prisma fullstack monorepo starter

This repo shows an example use case for how you setup a fullstack monorepo starter with Clerk, Fastify, React and Prisma to achieve authenticated cross-domain user access.

Jun 13, 2022

Example of a simple Node Serva dn React app monorepo using git submodules

Example of a simple Node Serva dn React app monorepo using git submodules

All code from this tutorial as a complete package is available in this repositor

Jun 17, 2022

A fullstack monorepo template to develop ethereum dapps

A fullstack monorepo template to develop ethereum dapps

full-stack dApp starter for solidity smart contract development A monorepo boilerplate code for typesafe full-stack Solidity development based on temp

Jun 24, 2022

This starter template comes as a monorepo for your next fullstack dApp Development

This starter template comes as a monorepo for your next fullstack dApp Development

This starter template comes as a monorepo for your next fullstack dApp Development. This will be your tools: 📟 React + Vite + Typescript 📃 Solidity + Hardhat + Typescript

May 24, 2022

A simple notes making app made using Flask, React, Material-UI and MongoDB

Marx A simple notes making app made using Flask, React, Material-UI and MongoDB. Set up Guides After cloning the app locally, you will to follow the f

Feb 7, 2022

MERN Stack Boilerplate provides starter kits for building web, desktop and mobile apps

MERN Stack Boilerplate MERN Stack Boilerplate provides starter kits for building web, desktop and mobile apps in pure JavaScript. Create New MERN App

Nov 8, 2021

Buzzer Full Stack Development Assessment uses React and NodeJS to mimic social media functions

Buzzer-Full-Stack-Development-Assessment This project is a coding challange prov

Jan 16, 2022

Viact - a starter template for React TypeScript that uses Vitejs

Viact - a starter template for React TypeScript that uses Vitejs

Viact is a starter template for React TypeScript that uses Vitejs, which supports RTL for specific styles, proxy fetching API (to fix CORS errors) and a simple mock REST API server.

Jun 12, 2022
Related tags
⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.
⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.

Fast 3kB alternative to React with the same modern API. All the power of Virtual DOM components, without the overhead: Familiar React API & patterns:

Jun 22, 2022
Template combile React Native and react-native-web with same structure
Template combile React Native and react-native-web with same structure

React Native Web Template 同构react-native和react-native-web的一个template 为什么要用我 react-native-web官方没有集成react-native的正式方案 这个template是用react-native init创建的项目

May 17, 2022
A boilerplate template for making your awesome dApp on IoTeX and ETH, BSC, and other possible chains
A boilerplate template for making your awesome dApp on IoTeX and ETH, BSC, and other possible chains

Bounties ?? Please notice: If you have your own custom project and you want to r

May 13, 2022
A boilerplate template for making your awesome dApp on IoTeX and ETH, BSC
A boilerplate template for making your awesome dApp on IoTeX and ETH, BSC

IoTeX dApp Sample V2 This is a boilerplate template for making your awesome dApp on IoTeX and ETH, BSC, and other possible chains (request here) Techn

Nov 9, 2021
Electron React Boilerplate uses Electron, React, React Router, Webpack and React Fast Refresh.
 Electron React Boilerplate uses Electron, React, React Router, Webpack and React Fast Refresh.

Electron React Boilerplate uses Electron, React, React Router, Webpack and React Fast Refresh.

Oct 6, 2021
Boilerplate app for full-stack MERN app with Create React App client toolchain. Uses JWT for auth.

Boilerplate app for full-stack MERN app with Create React App client tool chain. Includes React, JWT authentication, Mongoose/MongoDB, Apollo Server/Client, and ExpressJS.

Feb 2, 2022
Eth-time - ETH Time - A new NFT collection created to explore new ways of generating NFTs on-chain

ETH Time ETH Time is a new NFT collection created to explore new ways of generat

Jan 25, 2022
A repo containing the same app built with different frameworks and integrated with CommandBar.
A repo containing the same app built with different frameworks and integrated with CommandBar.

Using CommandBar with frameworks This is a repo containing the same app built with different frameworks and integrated with CommandBar. The app used i

May 17, 2022
Electron-react-template - Electron React Template uses React Router and Styled Components
Electron-react-template - Electron React Template uses React Router and Styled Components

Electron React Template This template uses Create React App, Electron and Electr

May 17, 2022
Jun 25, 2022