- Business logic<\/li>
- Communication with API<\/li>
- State management classes: Stores, Reducers, Actions<\/li>
- Helpers<\/li>
- Constants<\/li>
- Storage Services<\/li>
- HOCs (Higher-Order Components)<\/li><\/ul>\n\n\n\n
Contents of ‘web’ & ‘mobile’ folder<\/strong>:<\/strong><\/p>\n\n\n\n
- Presentational components<\/li>
- Navigation \/ Routing<\/li>
- Styles<\/li><\/ul>\n\n\n\n
Setting up a shared project<\/strong><\/h2>\n\n\n\n
Open terminal. Make sure you are in the project root folder. <\/p>\n\n\n\n
- Run the following command to create the mobile, web, and shared folders:<\/li><\/ul>\n\n\n\n
$ mkdir -p packages\/shared\/src packages\/mobile packages\/web<\/code><\/pre>\n\n\n\n- Create a new React Native project using
react-native-cli<\/code> insidepackages\/mobile<\/code><\/li><\/ul>\n\n\n\n- Create a new React app using
create-react-app<\/code> insidepackages\/web<\/code><\/li><\/ul>\n\n\n\n- Create a ‘
package.json<\/code>‘ file in the root directory to enable yarn workspaces and paste the following:<\/li><\/ul>\n\n\n\n{\n \"name\": \"monorepo\",\n \"private\": true,\n \"workspaces\": {\n \"packages\": [\n \"packages\/*\"\n ],\n \"nohoist\": []\n },\n \"dependencies\": {\n \"react-native\": \"0.69.5\"\n }\n}<\/code><\/pre>\n\n\n\nCreate a shared folder<\/h3>\n\n\n\n
Now create a shared folder where the shared code of the React and React Native apps will reside.<\/p>\n\n\n\n
$ mkdir -p packages\/shared<\/code><\/pre>\n\n\n\n- Create a ‘
package.json<\/code>‘ file inside the shared folder and paste the following:<\/li><\/ul>\n\n\n\n{\n \"name\": \"@monorepo\/shared\",\n \"version\": \"1.0.0\",\n \"dependencies\": {}\n}<\/code><\/pre>\n\n\n\nDirectory Structure<\/h3>\n\n\n\n
<\/figure>\n\n\n\n
Configure the web (React) application<\/h2>\n\n\n\n
- In your terminal, change the directory to packages\/web and run the following commands:<\/li><\/ul>\n\n\n\n
npm install react-app-rewire-yarn-workspaces react-app-rewired --save-dev<\/code><\/pre>\n\n\n\n- Replace the scripts section in the package.json file with the following:
<\/li><\/ul>\n\n\n\n\"scripts\": {\n \"start\": \"react-app-rewired start\",\n \"build\": \"react-app-rewired build\",\n \"test\": \"react-app-rewired test --env=jsdom\",\n \"eject\": \"react-app-rewired eject\"\n}<\/code><\/pre>\n\n\n\n- Create a new file named ‘
config-overrides.js' <\/code>inside web folder and paste the following:<\/li><\/ul>\n\n\n\nconst rewireYarnWorkspaces = require(\"react-app-rewire-yarn-workspaces\");\n\nmodule.exports = function override(config, env) {\n return rewireYarnWorkspaces(config, env);\n}<\/code><\/pre>\n\n\n\n- Now run the following command to install the dependencies:<\/li><\/ul>\n\n\n\n
yarn install<\/code><\/pre>\n\n\n\nConfigure the mobile (React Native) application<\/h2>\n\n\n\n
Configuring a React Native app through monorepo is a bit tricky. Firstly, change the directory to packages\/mobile on your terminal. Now, you will need to understand two things before making workspaces work.<\/p>\n\n\n\n
- No Hoist<\/li>
- Symlinking<\/li><\/ol>\n\n\n\n
1. No Hoist<\/h3>\n\n\n\n
Inside the package.json file, the packages that you list down under “nohoist” tag will only be available for mobile and will not be hoisted globally.<\/p>\n\n\n\n
<\/figure>\n\n\n\n
2. Symlinking<\/h3>\n\n\n\n
A symlink<\/em> is a term used for any file that contains a reference to another file or package. To achieve symlinking, we will use ‘wml’.<\/p>\n\n\n\n
- Install wml globally using the following command:<\/li><\/ul>\n\n\n\n
npm install -g wml<\/code><\/pre>\n\n\n\n- Copy the by running the following command in the root directory:<\/li><\/ul>\n\n\n\n
wml add packages\/shared packages\/mobile\/node_modules\/@monorepo\/shared<\/code><\/pre>\n\n\n\n- Start wml using the following command:<\/li><\/ul>\n\n\n\n
wml start<\/code><\/pre>\n\n\n\nOnce you run the above command, you should see an output something like this:<\/p>\n\n\n\n
![\"\"](\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2022\/09\/Screenshot-2022-09-07-at-6.12.44-PM-1024x415.png\")
<\/figure>\n\n\n\nIn case no output gets displayed, then follow this answer to get the issue fixed: https:\/\/github.com\/wix\/wml\/issues\/38#issuecomment-521570796<\/a><\/p>\n\n\n\n
You can now develop and import functions from the shared folder inside the components in the web and mobile folders. Add a file inside packages\/shared\/src folder and export a function inside it. You should then be able to import the function inside your web and mobile files like this:<\/p>\n\n\n\n
import { functionName } from '@monorepo\/shared\/src\/fileName';<\/code><\/pre>\n\n\n\nThis is how we set up a project to share code between React and React Native applications. Thanks for reading!<\/p>\n\n\n
- Start wml using the following command:<\/li><\/ul>\n\n\n\n
- Copy the by running the following command in the root directory:<\/li><\/ul>\n\n\n\n
- Install wml globally using the following command:<\/li><\/ul>\n\n\n\n
- Now run the following command to install the dependencies:<\/li><\/ul>\n\n\n\n
- Create a new file named ‘
- Replace the scripts section in the package.json file with the following:
- In your terminal, change the directory to packages\/web and run the following commands:<\/li><\/ul>\n\n\n\n
- Create a ‘
- Create a ‘
- Create a new React app using
- Create a new React Native project using
- Run the following command to create the mobile, web, and shared folders:<\/li><\/ul>\n\n\n\n