Tutorial for yarn workspaces with cra + crna / expo

Playing around with yarn workspaces, cra, crna, expo - based on Ben Awad's video tutorial and this Medium article.

!! Make sure you go over security warnings if basing a new project on this code !!

Changes from Ben Awad's tutorial

create-react-native-app is now completely replaced by expo - so I just use it.
I made ./packages/web/config-overrides.js more lean.
I make my own change to App.js in the web and app (because the template has changed with react-scripts@2.0.0).
I change the "main" entery in ./packages/app/package.json.
I do not change app.json at all.

Create the packages directory (mkdir packages).
In the directory, create the web and app packages:
- cd packages
- npx create-react-app web
- yarn global add expo-cli && expo init
  - I chose to name the project app to fit with the tutorial video.
Create the root package.json with the content { "private": true, "workspaces": [ "packages/*" ] }.
Create a common folder in packages.
Add to common a package.json file: { "name": "@yarn-workspace-cra-crna-expo-tut/common", "version": "1.0.0", "main": "index.js", "license": "MIT" }.
Add to common a basic index.js file containing an exported function (export const add = (a,b) => a + b;).

Add to devDependencies to the web app:
- cd packages/web
- yarn add --dev react-app-rewire-yarn-workspaces react-app-rewired
In ./packges/web/packages.json change the four scripts using react-scripts to use react-app-rewired instead.
- - "start": "react-scripts start",
- + "start": "react-app-rewired start",
- - "build": "react-scripts build",
- + "build": "react-app-rewired build",
- - "test": "react-scripts test",
- + "test": "react-app-rewired test",
- - "eject": "react-scripts eject"
- + "eject": "react-app-rewired eject"
Add a file named ./packges/web/config-overrides.js file, containing the following code: module.exports = require("react-app-rewire-yarn-workspaces");
Add "@yarn-workspace-cra-crna-expo-tut/common": "1.0.0" to the dependencies in ./packges/web/packages.json.
Change ./packges/web/src/App.js to use the function from the common package.
- First, add import { add } from '@yarn-workspace-cra-crna-expo-tut/common'; to the file.
- Then change Learn React to Learning React is like learning 1 + 1 = {add(1, 1)}.
Run yarn start from within the web package to confirm this is working!

In ./packages/app/package.json add "name": "@yarn-workspace-cra-crna-expo-tut/app", "version": "1.0.0",.
In the app package directory, run yarn add --dev crna-make-symlinks-for-yarn-workspaces.
Add a file called ./packages/app/link-workspaces.js with this: require('crna-make-symlinks-for-yarn-workspaces')(__dirname);.
Add prestart script to ./packges/app/package.json: "prestart": "node link-workspaces.js",.
Add "@yarn-workspace-cra-crna-expo-tut/common": "1.0.0" to the app package dependencies.
Change App.js in the app package to use the function from the common package.
- First, add import { add } from '@yarn-workspace-cra-crna-expo-tut/common'; to the file.
- Then add <Text>TEST: 1 + 1 = {add(1,1)}</Text> to the App's View component.
In the root project, create a file named App.js with the contents
- import App from './packages/app/App';
- export default App;
Run yarn start from within the web package to confirm this is working!