Skip to content

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

License

Notifications You must be signed in to change notification settings

amaankulshreshtha/marshal

Repository files navigation

Commitizen friendly

Monorepo template

Table of Contents

Todo List

Prerequisites

yarn global add git-cz

Or

npm i -g git-cz

Getting Started

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

yarn
yarn core: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

For web

yarn web:dev

For iOS

# to run the metro server
yarn metro # after this, we build the application
yarn pod-install
yarn ios

For Android

# to run the metro server
yarn metro # after this, we build the application
yarn android

Changing the display name and bundle IDs of the application

For Andoid

  • Change the applicationId property of defaultConfig inside android/app/build.gradle.

  • As per convention, the package name inside app/src/java should match the applicationId. In order to achieve that, do the following:

    1. Open the android folder inside android studio.
    2. Expand app/src.

    For main inside app/src

    1. Expand main.
    2. Right click on java and choose New > Package.
    3. Enter the applicationId and press .
    4. Select all the java files under the previous applicationId package and drag them under the newly created package.

    For debug inside app/src

    1. Expand debug.
    2. Repeat steps 4-6.
  • Open android/app/src/main/AndroidManifest.xml.

  • Change the package attribute on line 2 to the new applicationId.

  • Open android/app/src/main/res/values/strings.xml.

  • Change the app_name string value to the desired name.

For iOS

  • Open mobile.xcworkspace inside XCode.
  • Press the project navigator icon.
  • Click on the General tab.
  • Change the display name to the desired name in the Display Name input field.
  • Change the bundleID to the desired id in the Bundle Identifier input field.
  • Click on the Build Settings tab.
  • Search for PRODUCT_NAME.
  • Double click on the value to start editing.
  • Type the value of the display name and press .

Building the application

For Android

cd packages/mobile/android
./gradlew assembleRelease

The generated APK will be at packages/mobile/android/app/build/outputs/apk/release/app-release.apk

Commiting the code

This repository follows commit guidelines provided by commitizen. To verify the installation of commitizen, you can run git cz.

After staging the files that you have changed, instead of using git commit, use git cz. This will give you an interactive shell with the help of which you can draft your commit message.

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
  • tried to synchronously call function from a different thread
  • config["reactNativePath"] not working
  • Emulator process not killed (Windows)
  • Application Building Issues for android
  • Release build application crash on iOS

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
  • Refer to yarn-workspaces-reanimated repository for the setup
  • Follow this solution
  • taskkill /F /IM "qemu-system-x86_64.exe" /T
  • Fix node_modules paths in project.ext.rect inside app/build.gradle
  • Add #ifdef DEBUG before #ifdef FB_SONARKIT_ENABLED on line 7 and 30.

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

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published