“”
Monorepo share library with CRA and React Native with Lerna 101

Progressive Web Apps and Service Workers

View more techs

Monorepo share library with CRA, React Native with Lerna 101

 

Gabriel Rodríguez

Gabriel Rodríguez

July 16, 2020


This is a simple step-by-step manual on how to share logic between a React app created by CRA and a React Native app. In order to do this, we are going to use a tool for managing multiple JavaScript packages called Lerna.

1- Install the Lerna 2.0 package globally

$ npm install --global lerna

2- Create a project repository

$ git init lerna-react-repo && cd lerna-react-repo

3- Set this folder as a Lerna workspace


$ lerna init

We should have this structure in the folder:

>packages
lerna.json
package.json

4- Create the web app in the package folder (we need create-react-app installed globally)

$ cd package && npx create-react-app web-app

5- Install dependencies.

You have to run the command "yarn" in the root file, Lerna will install all the dependencies for the project in the folder packages

$ cd .. && yarn

6- Create the React Native app (if you don’t know how to start working with React Native, you can check out this post)

$ cd package && npx react-native init NativeApp
$ cd .. && yarn
$ cd packages && cd NativeApp && cd ios && pod install

7- To test if the installation works, run this in the root folder

To test in web:

$ lerna --scope=web-app run start

To test mobile app in Android:

$ lerna --scope=NativeApp run android

To test mobile app in iOS:

$ lerna --scope=NativeApp run ios

8- Create my shared library - this is the package where the project’s shared code lives

lerna create library

9- Setup Babel in my library

$ lerna add babel-loader packages/library —-dev
$ lerna add @babel/core packages/library —-dev
$ lerna add @babel/cli packages/library —- dev
$ lerna add @babel/preset-env packages/library —- dev
$ lerna add @babel/preset-react packages/library —- dev

10- Add a name to my shared library in the package.json

In this example, my shared library is going to be referenced by the name "@root/shared"

{
  "name": "@root/shared",
  "version": "0.0.0",
  "description": "shared library",
  "keywords": [
    "test"
  ],
  "author": "Gabriel Rodriguez <grodriguez@vairix.com>",
  "homepage": "https://www.vairix.com/",
  "license": "ISC",
  "main": "lib/library.js",
  "directories": {
    "lib": "lib",
    "test": "__tests__"
  },
  "files": [
    "lib"
  ],
  "scripts": {
    "test": "echo \"Error: run tests from root\" && exit 1"
  },
  "dependencies": {
    "@babel/cli": "^7.10.4",
    "@babel/core": "^7.10.4",
    "@babel/preset-env": "^7.10.4",
    "@babel/preset-react": "^7.10.4",
    "babel-loader": "^8.1.0"
  }
}


11- Sharing my library with my web and mobile app

To do this, I have to add this dependency in the "package.json"

"@root/shared": "*"

12- Link my local package to to the dependencies using Lerna Bootstrap

$ lerna bootstrap

13- Adding metro configuration for React Native. We have to update the Watch Folder in the file metro.config.js to include packages directory

Create "packages/NativeApp/metro.config.js" with the following contents:

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

const path = require('path');
const watchFolders = [
  //Relative path to packages directory
  path.resolve(__dirname + '/..'),
];

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
  watchFolders,
};

Gabriel Rodríguez

Gabriel Rodríguez

Gabriel, CTO at VAIRIX, is a senior full-stack developer with more than ten years experience. He is currently working with the latest technologies, such as Ruby on Rails, React, React Native, Node, Firebase, and Truevault. Gabriel has been working with GIT and Scrum Agile methodologies for more than five years and has worked with teams of all sizes. Passionate about projects that involve technical challenges, he enjoys sharing his knowledge and learning about new technologies.

Contact us

Ready to get started? Use the form below or give us a call to meet our team and discuss your project and business goals.
We can’t wait to meet you!


Follow Us
See our client reviews