{"id":13563120,"url":"https://github.com/react-workspaces/react-workspaces-playground","last_synced_at":"2025-05-16T13:07:12.790Z","repository":{"id":35601930,"uuid":"158285284","full_name":"react-workspaces/react-workspaces-playground","owner":"react-workspaces","description":"⚛️ 🐈  Zero Config Create-React-App Monorepos with Yarn Workspaces, Lerna and React Storybook.","archived":false,"fork":false,"pushed_at":"2023-01-03T16:37:39.000Z","size":4154,"stargazers_count":765,"open_issues_count":47,"forks_count":128,"subscribers_count":22,"default_branch":"master","last_synced_at":"2025-05-14T22:44:28.519Z","etag":null,"topics":["cra","create-react-app","monorepo","react-scripts","workspaces","yarn"],"latest_commit_sha":null,"homepage":"https://react-workspaces.github.io/react-workspaces-playground/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/react-workspaces.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"f1lt3r"}},"created_at":"2018-11-19T20:22:27.000Z","updated_at":"2025-02-16T21:33:31.000Z","dependencies_parsed_at":"2023-01-16T01:00:24.689Z","dependency_job_id":null,"html_url":"https://github.com/react-workspaces/react-workspaces-playground","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-workspaces%2Freact-workspaces-playground","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-workspaces%2Freact-workspaces-playground/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-workspaces%2Freact-workspaces-playground/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-workspaces%2Freact-workspaces-playground/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-workspaces","download_url":"https://codeload.github.com/react-workspaces/react-workspaces-playground/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254535829,"owners_count":22087399,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cra","create-react-app","monorepo","react-scripts","workspaces","yarn"],"created_at":"2024-08-01T13:01:15.362Z","updated_at":"2025-05-16T13:07:12.756Z","avatar_url":"https://github.com/react-workspaces.png","language":"JavaScript","readme":"![React Workspaces Playground Screenshots](https://i.imgur.com/7snWXD0.png)\n\n![Join us on Slack](https://img.shields.io/badge/Slack-React--Workpaces-EBB424?style=for-the-badge\u0026logo=slack)\n\n\u003e 💥 Now supports TypeScript and React-App-Rewired!  \n\n## Features\n\n- ⚛️ Create React App 3 (React 16.8)\n- 📖 Storybook 5\n- 🐈 Yarn Workspaces\n- 🐉 Lerna 3\n- ✨ Host Multiple CRA Apps, Component Libraries \u0026 Storybooks in one Monorepo\n- 🔥 Hot Reload all Apps, Components \u0026 Storybooks\n- 👨‍🔬 Test all workspaces with Eslint \u0026 Jest using one command\n- :octocat: Deploy your apps to Github Pages using one command\n\n## Contents\n\n- [Features](#features)\n- [Contents](#contents)\n- [Setup](#setup)\n  - [Pre-Requisites](#pre-requisites)\n  - [Installation](#installation)\n- [Usage](#usage)\n  - [Starting The React App](#starting-the-react-app)\n  - [Starting The Storybook](#starting-the-storybook)\n  - [Linting \u0026amp; Testing](#linting-amp-testing)\n  - [Deploying to GitHub Pages](#deploying-to-github-pages)\n  - [Creating a New CRA App](#creating-a-new-cra-app)\n- [How Does It Work?](#how-does-it-work)\n\n## Setup\n\n### Pre-Requisites\n\n- Yarn 1.13.0\n- Node 11.14.0\n\n### Installation\n\n```bash\ngit clone git@github.com:react-workspaces/react-workspaces-playground.git\ncd react-workspaces-playground\nyarn\n```\n\n### Adding workspace dependencies\n\n```bash\nyarn workspace \u003cworkspace_name\u003e \u003ccommand\u003e\n```\n\nThis will run the chosen Yarn command in the selected workspace.\n\nExample:\n\n```bash\nyarn workspace my-app add react-router-dom --dev\n```\n\nThis will add `react-router-dom` as `dependencies` in your `packages/my-app/package.json`. To remove dependency use `remove` instead of add\n\n## Usage\n\n### Starting Project in Workspace\n\nFrom your project root type start command for desired app\n\n```bash\nyarn workspace @project/app-single-comp start\n```\n\nAll available `start` scripts\n\n```json\n\"scripts\": {\n    \"start:app-ant-design\": \"yarn workspace @project/app-ant-design-rewired start\",\n    \"start:app-multi\": \"yarn workspace @project/app-multi-comps start\",\n    \"start:app-single\": \"yarn workspace @project/app-single-comp start\",\n    \"start:app-ts\": \"yarn workspace @project/app-typescript start\",\n    \"start:storybook\": \"yarn workspace @project/storybook storybook\",\n    \"start:storybook-ts\": \"yarn workspace @project/storybook-typescript storybook\",\n    ...\n  }\n```\n\n### Starting The Storybook\n\n```bash\nyarn start:storybook\n```\n\n### Linting \u0026 Testing\n\n```bash\nyarn workspace \u003cworkspace-root\u003e test\n```\n\n### Deploying to GitHub Pages\n\nUpdate the `homepage` URL in `app-one/package.json` to reflect your GitHub Pages URL.\n\n```json\n{\n  \"name\": \"@project/app-single-comp\",\n  \"private\": true,\n  \"homepage\": \"https://react-workspaces.github.io/react-workspaces-playground\",\n  \"scripts\": {\n    \"deploy\": \"gh-pages -d build\"\n  }\n}\n```\n\nRun the deploy script.\n\n```bash\nyarn workspace \u003cworkspace-root\u003e deploy\n```\n\n### Creating a New CRA App\n\nUse Create React App's `--scripts-version` flag to create a new React App with Yarn Workspaces support.\n\n```bash\ncreate-react-app --scripts-version @react-workspaces/react-scripts my-app\n```\n\nTo create new TS app use Create React App's `--template` flag with `--scripts-version` flag to create a new React App with Yarn Workspaces support and Typescript.\n\n```bash\nnpx create-react-app --scripts-version @react-workspaces/react-scripts --template typescript my-ts-app\n```\n\n## How Does It Work?\n\nReact Workspaces Playground uses a custom version of `react-scripts` under the hood. The custom `react-scripts` is an NPM package to use in place of the `react-scripts` dependency that usually ships with Create React App. See: ([@react-workspaces/react-scripts](https://www.npmjs.com/@react-workspaces/react-scripts)) on NPM.\n\nSupport for Yarn Workspaces was added by:\n\n1. Adding [yarn-workspaces.js](https://github.com/react-workspaces/create-react-app/blob/master/packages/react-scripts/config/yarn-workspaces.js) file to resolve workspaces modules.\n\n1. Updating the Webpack config:\n\n   - Use `main:src` in `package.json` for loading development source code.\n\n   - Use `production` or `development` settings based on your `yarn workspaces` settings in your `\u003cworkspaces-root\u003e/package.json`:\n\n     ```json\n     {\n       \"workspaces\": {\n         \"packages\": [\"packages/apps/*\", \"packages/components\", \"packages/storybook\"],\n         \"production\": true,\n         \"development\": true,\n         \"package-entry\": \"main:src\"\n       }\n     }\n     ```\n\nMinimal updates to the Webpack config were required.\n\nDiff: `webpack.config.js`\n\n```diff\n--- a/./facebook/react-scripts/config/webpack.config.js\n+++ b/react-workspaces/react-scripts/config/webpack.config.js\n@@ -9,7 +9,6 @@\n'use strict';\n\nconst fs = require('fs');\nconst isWsl = require('is-wsl');\nconst path = require('path');\nconst webpack = require('webpack');\nconst resolve = require('resolve');\n@@ -28,15 +27,14 @@ const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeM\nconst ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');\nconst getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');\nconst paths = require('./paths');\nconst modules = require('./modules');\n+const workspaces = require('./workspaces');\nconst getClientEnvironment = require('./env');\nconst ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');\nconst ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin');\nconst typescriptFormatter = require('react-dev-utils/typescriptFormatter');\n// @remove-on-eject-begin\nconst getCacheIdentifier = require('react-dev-utils/getCacheIdentifier');\n// @remove-on-eject-end\n\n// Source maps are resource heavy and can cause out of memory issue for large source files.\nconst shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';\n@@ -53,12 +51,22 @@ const cssModuleRegex = /\\.module\\.css$/;\nconst sassRegex = /\\.(scss|sass)$/;\nconst sassModuleRegex = /\\.module\\.(scss|sass)$/;\n\n+const workspacesConfig = workspaces.init(paths);\n+\n// This is the production and development configuration.\n// It is focused on developer experience, fast rebuilds, and a minimal bundle.\nmodule.exports = function(webpackEnv) {\n  const isEnvDevelopment = webpackEnv === 'development';\n  const isEnvProduction = webpackEnv === 'production';\n\n+  const workspacesMainFields = [workspacesConfig.packageEntry, 'main'];\n+  const mainFields =\n+    isEnvDevelopment \u0026\u0026 workspacesConfig.development\n+      ? workspacesMainFields\n+      : isEnvProduction \u0026\u0026 workspacesConfig.production\n+        ? workspacesMainFields\n+        : undefined;\n+\n  // Webpack uses `publicPath` to determine where the app is being served from.\n  // It requires a trailing slash, or the file assets will get an incorrect path.\n  // In development, we always serve from the root. This makes config easier.\n@@ -279,6 +282,7 @@ module.exports = function(webpackEnv) {\n      extensions: paths.moduleFileExtensions\n        .map(ext =\u003e `.${ext}`)\n        .filter(ext =\u003e useTypeScript || !ext.includes('ts')),\n+      mainFields,\n      alias: {\n        // Support React Native Web\n        // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/\n@@ -330,7 +335,11 @@ module.exports = function(webpackEnv) {\n              loader: require.resolve('eslint-loader'),\n            },\n          ],\n-          include: paths.appSrc,\n+          include: isEnvDevelopment \u0026\u0026 workspacesConfig.development\n+          ? [paths.appSrc, workspacesConfig.paths]\n+          : isEnvProduction \u0026\u0026 workspacesConfig.production\n+            ? [paths.appSrc, workspacesConfig.paths]\n+            : paths.appSrc,\n        },\n        {\n          // \"oneOf\" will traverse all following loaders until one will\n@@ -352,7 +361,12 @@ module.exports = function(webpackEnv) {\n            // The preset includes JSX, Flow, TypeScript, and some ESnext features.\n            {\n              test: /\\.(js|mjs|jsx|ts|tsx)$/,\n-              include: paths.appSrc,\n+              include:\n+                isEnvDevelopment \u0026\u0026 workspacesConfig.development\n+                  ? [paths.appSrc, workspacesConfig.paths]\n+                  : isEnvProduction \u0026\u0026 workspacesConfig.production\n+                    ? [paths.appSrc, workspacesConfig.paths]\n+                    : paths.appSrc,\n              loader: require.resolve('babel-loader'),\n              options: {\n                customize: require.resolve(\n```\n","funding_links":["https://github.com/sponsors/f1lt3r"],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-workspaces%2Freact-workspaces-playground","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-workspaces%2Freact-workspaces-playground","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-workspaces%2Freact-workspaces-playground/lists"}