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 !!
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[email protected]
). - 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 usingreact-scripts
to usereact-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 thecommon
package.- First, add
import { add } from '@yarn-workspace-cra-crna-expo-tut/common';
to the file. - Then change
Learn React
toLearning React is like learning 1 + 1 = {add(1, 1)}
.
- First, add
- 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, runyarn 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 thecommon
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'sView
component.
- First, add
- In the root project, create a file named
App.js
with the contentsimport App from './packages/app/App';
export default App;
- Run
yarn start
from within the web package to confirm this is working!