- To get started, edit src/App.js and save to reload.
-
-
-
- );
- }
-}
-
-export default App;
diff --git a/fixtures/monorepos/packages/cra-app1/src/App.test.js b/fixtures/monorepos/packages/cra-app1/src/App.test.js
deleted file mode 100644
index a754b201bf9..00000000000
--- a/fixtures/monorepos/packages/cra-app1/src/App.test.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
-
-it('renders without crashing', () => {
- const div = document.createElement('div');
- ReactDOM.render(, div);
- ReactDOM.unmountComponentAtNode(div);
-});
diff --git a/fixtures/monorepos/packages/cra-app1/src/index.css b/fixtures/monorepos/packages/cra-app1/src/index.css
deleted file mode 100644
index b4cc7250b98..00000000000
--- a/fixtures/monorepos/packages/cra-app1/src/index.css
+++ /dev/null
@@ -1,5 +0,0 @@
-body {
- margin: 0;
- padding: 0;
- font-family: sans-serif;
-}
diff --git a/fixtures/monorepos/packages/cra-app1/src/index.js b/fixtures/monorepos/packages/cra-app1/src/index.js
deleted file mode 100644
index 395b74997b2..00000000000
--- a/fixtures/monorepos/packages/cra-app1/src/index.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-
-ReactDOM.render(, document.getElementById('root'));
diff --git a/fixtures/monorepos/packages/cra-app1/src/logo.svg b/fixtures/monorepos/packages/cra-app1/src/logo.svg
deleted file mode 100644
index 6b60c1042f5..00000000000
--- a/fixtures/monorepos/packages/cra-app1/src/logo.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-
diff --git a/fixtures/monorepos/yarn-ws/package.json b/fixtures/monorepos/yarn-ws/package.json
deleted file mode 100644
index aad9ea832aa..00000000000
--- a/fixtures/monorepos/yarn-ws/package.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "private": true,
- "workspaces": ["packages/*"]
-}
diff --git a/package.json b/package.json
index 7fe0b2bb1c6..0e639a768dd 100644
--- a/package.json
+++ b/package.json
@@ -44,9 +44,7 @@
"eslint-plugin-jsx-a11y": "6.0.3",
"eslint-plugin-react": "7.8.2",
"file-loader": "1.1.11",
- "find-pkg": "1.0.0",
"fs-extra": "5.0.0",
- "globby": "7.1.1",
"graphql": "0.13.2",
"graphql-tag": "2.9.2",
"html-webpack-plugin": "3.2.0",
diff --git a/scripts/eject.js b/scripts/eject.js
index e8c64a77853..84353fc3c81 100644
--- a/scripts/eject.js
+++ b/scripts/eject.js
@@ -109,7 +109,7 @@ inquirer
const jestConfig = createJestConfig(
filePath => path.posix.join('', filePath),
null,
- paths.srcPaths
+ true
);
console.log();
@@ -205,6 +205,18 @@ inquirer
console.log(` Adding ${cyan('Jest')} configuration`);
appPackage.jest = jestConfig;
+ // Add Babel config
+ console.log(` Adding ${cyan('Babel')} preset`);
+ appPackage.babel = {
+ presets: ['react-app'],
+ };
+
+ // Add ESlint config
+ console.log(` Adding ${cyan('ESLint')} configuration`);
+ appPackage.eslintConfig = {
+ extends: 'react-app',
+ };
+
fs.writeFileSync(
path.join(appPath, 'package.json'),
JSON.stringify(appPackage, null, 2) + os.EOL
diff --git a/scripts/test.js b/scripts/test.js
index b77db920625..60b69e1673f 100644
--- a/scripts/test.js
+++ b/scripts/test.js
@@ -53,7 +53,7 @@ argv.push(
createJestConfig(
relativePath => path.resolve(__dirname, '..', relativePath),
path.resolve(paths.appSrc, '..'),
- paths.srcPaths
+ false
)
)
);
diff --git a/scripts/utils/createJestConfig.js b/scripts/utils/createJestConfig.js
index e884518d73a..72c50e1f1b2 100644
--- a/scripts/utils/createJestConfig.js
+++ b/scripts/utils/createJestConfig.js
@@ -8,19 +8,16 @@
'use strict';
const fs = require('fs');
-const path = require('path');
const chalk = require('chalk');
const paths = require('../../config/paths');
-module.exports = (resolve, rootDir, srcRoots) => {
+module.exports = (resolve, rootDir, isEjecting) => {
// Use this instead of `paths.testsSetup` to avoid putting
// an absolute filename into configuration after ejecting.
const setupTestsFile = fs.existsSync(paths.testsSetup)
? '/src/setupTests.js'
: undefined;
- const toRelRootDir = f => '/' + path.relative(rootDir || '', f);
-
// TODO: I don't know if it's safe or not to just use / as path separator
// in Jest configs. We need help from somebody with Windows to determine this.
const config = {
@@ -28,15 +25,15 @@ module.exports = (resolve, rootDir, srcRoots) => {
setupFiles: [resolve('config/polyfills.js')],
setupTestFrameworkScriptFile: setupTestsFile,
testMatch: [
- '**/__tests__/**/*.{js,jsx,mjs}',
- '**/?(*.)(spec|test).{js,jsx,mjs}',
+ '/src/**/__tests__/**/*.{js,jsx,mjs}',
+ '/src/**/?(*.)(spec|test).{js,jsx,mjs}',
],
- // where to search for files/tests
- roots: srcRoots.map(toRelRootDir),
testEnvironment: 'node',
testURL: 'http://localhost',
transform: {
- '^.+\\.(js|jsx|mjs)$': resolve('config/jest/babelTransform.js'),
+ '^.+\\.(js|jsx|mjs)$': isEjecting
+ ? '/node_modules/babel-jest'
+ : resolve('config/jest/babelTransform.js'),
'^.+\\.css$': resolve('config/jest/cssTransform.js'),
'^.+\\.(graphql)$': resolve('config/jest/graphqlTransform.js'),
'^(?!.*\\.(js|jsx|mjs|css|json|graphql)$)': resolve(
@@ -64,7 +61,6 @@ module.exports = (resolve, rootDir, srcRoots) => {
if (rootDir) {
config.rootDir = rootDir;
}
-
const overrides = Object.assign({}, require(paths.appPackageJson).jest);
const supportedKeys = [
'collectCoverageFrom',
diff --git a/template/README.md b/template/README.md
index d857bc93c03..edaf7c62f52 100644
--- a/template/README.md
+++ b/template/README.md
@@ -74,7 +74,6 @@ You can find the most recent version of this guide [here](https://github.com/fac
- [Developing Components in Isolation](#developing-components-in-isolation)
- [Getting Started with Storybook](#getting-started-with-storybook)
- [Getting Started with Styleguidist](#getting-started-with-styleguidist)
-- [Sharing Components in a Monorepo](#sharing-components-in-a-monorepo)
- [Publishing Components to npm](#publishing-components-to-npm)
- [Making a Progressive Web App](#making-a-progressive-web-app)
- [Opting Out of Caching](#opting-out-of-caching)
@@ -1851,66 +1850,6 @@ Learn more about React Styleguidist:
* [GitHub Repo](https://github.com/styleguidist/react-styleguidist)
* [Documentation](https://react-styleguidist.js.org/docs/getting-started.html)
-## Sharing Components in a Monorepo
-A typical monorepo folder structure looks like this:
-```
-monorepo/
- app1/
- app2/
- comp1/
- comp2/
-```
-
-The monorepo allows components to be separated from the app, providing:
-* a level of encapsulation for components
-* sharing of components
-
-### How to Set Up a Monorepo
-Below expands on the monorepo structure above, adding the package.json files required to configure the monorepo for [yarn workspaces](https://yarnpkg.com/en/docs/workspaces).
-```
-monorepo/
- package.json:
- "workspaces": ["*"],
- "private": true
- app1/
- package.json:
- "dependencies": ["@myorg/comp1": ">=0.0.0", "react": "^16.2.0"],
- "devDependencies": ["react-scripts": "2.0.0"]
- src/
- app.js: import comp1 from '@myorg/comp1';
- app2/
- package.json:
- "dependencies": ["@myorg/comp1": ">=0.0.0", "react": "^16.2.0"],
- "devDependencies": ["react-scripts": "2.0.0"]
- src/
- app.js: import comp1 from '@myorg/comp1';
- comp1/
- package.json:
- "name": "@myorg/comp1",
- "version": "0.1.0"
- index.js
- comp2/
- package.json:
- "name": "@myorg/comp2",
- "version": "0.1.0",
- "dependencies": ["@myorg/comp1": ">=0.0.0"],
- "devDependencies": ["react": "^16.2.0"]
- index.js: import comp1 from '@myorg/comp1'
-```
-* Monorepo tools work on a package level, the same level as an npm package.
-* The "workspaces" in the top-level package.json is an array of glob patterns specifying where shared packages are located in the monorepo.
-* The scoping prefixes, e.g. @myorg/, are not required, but are recommended, allowing you to differentiate your packages from others of the same name. See [scoped packages ](https://docs.npmjs.com/misc/scope) for more info.
-* Using a package in the monorepo is accomplished in the same manner as a published npm package, by specifying the shared package as dependency.
-* In order to pick up the monorepo version of a package, the specified dependency version must semantically match the package version in the monorepo. See [semver](https://docs.npmjs.com/misc/semver) for info on semantic version matching.
-
-### CRA Apps in a Monorepo
-* CRA apps in a monorepo are just a standard CRA app, they use the same react-script scripts.
-* However, when you use react-scripts for an app in a monorepo, all packages in the monorepo are treated as app sources -- they are watched, linted, transpiled, and tested in the same way as if they were part of the app itself.
-* Without this functionality, each package would need its own build/test/etc functionality and it would be challenging to link all of these together.
-
-### Lerna and Publishing
-[Lerna](https://github.com/lerna/lerna) is a popular tool for managing monorepos. Lerna can be configured to use yarn workspaces, so it will work with the monorepo structure above. It's important to note that while lerna helps publish various packages in a monorepo, react-scripts does nothing to help publish a component to npm. A component which uses JSX or ES6+ features would need to be built by another tool before it can be published to npm. See [publishing components to npm](#publishing-components-to-npm) for more info.
-
## Publishing Components to npm
Create React App doesn't provide any built-in functionality to publish a component to npm. If you're ready to extract a component from your project so other people can use it, we recommend moving it to a separate directory outside of your project and then using a tool like [nwb](https://github.com/insin/nwb#react-components-and-libraries) to prepare it for publishing.