diff --git a/README.md b/README.md index 75aed91b989..7fb8f9d903a 100644 --- a/README.md +++ b/README.md @@ -1,203 +1,16 @@ -# Create React App [![Build Status](https://travis-ci.org/facebook/create-react-app.svg?branch=master)](https://travis-ci.org/facebook/create-react-app) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-green.svg)](https://github.com/facebook/create-react-app/pulls) +# ⚠️ This fork was created to solve specific problems within the [monoweb](https://github.com/Babylonpartners/monoweb) repo, you should not use this outside of that repo! -Create React apps with no build configuration. +# Usage -- [Creating an App](#creating-an-app) – How to create a new app. -- [User Guide](https://facebook.github.io/create-react-app/) – How to develop apps bootstrapped with Create React App. +The react-scripts dependency in the monoweb repo is explicitly set to use this fork in the [root package.json](https://github.com/Babylonpartners/monoweb/blob/b284e2c9bca24777f71079bcb89547b460c7948b/package.json#L106) -Create React App works on macOS, Windows, and Linux.
-If something doesn’t work, please [file an issue](https://github.com/facebook/create-react-app/issues/new). +# What does this fork do differently? -## Quick Overview +- Extracting enviroment variables from application code during compilation time - [view code](https://github.com/Babylonpartners/create-react-app/blob/master/packages/react-scripts/config/ExtractEnvVarsPlugin.js) +- Overriding sass variables in imported packages - [view code](https://github.com/Babylonpartners/create-react-app/blob/master/packages/react-scripts/config/customAppConfig.js) +- Generating CSS module classNames - [view code](https://github.com/Babylonpartners/create-react-app/blob/master/packages/react-scripts/config/getCSSModuleLocalIdent.js) +- Adding new entry points - [view code](https://github.com/Babylonpartners/create-react-app/blob/master/packages/react-scripts/config/paths.js) -```sh -npx create-react-app my-app -cd my-app -npm start -``` +# ❌ Deprecation -_([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher, see [instructions for older npm versions](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f))_ - -Then open [http://localhost:3000/](http://localhost:3000/) to see your app.
-When you’re ready to deploy to production, create a minified bundle with `npm run build`. - -

-npm start -

- -### Get Started Immediately - -You **don’t** need to install or configure tools like Webpack or Babel.
-They are preconfigured and hidden so that you can focus on the code. - -Just create a project, and you’re good to go. - -## Creating an App - -**You’ll need to have Node 8.10.0 or later on your local development machine** (but it’s not required on the server). You can use [nvm](https://github.com/creationix/nvm#installation) (macOS/Linux) or [nvm-windows](https://github.com/coreybutler/nvm-windows#node-version-manager-nvm-for-windows) to easily switch Node versions between different projects. - -To create a new app, you may choose one of the following methods: - -### npx - -```sh -npx create-react-app my-app -``` - -_([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher, see [instructions for older npm versions](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f))_ - -### npm - -```sh -npm init react-app my-app -``` - -_`npm init ` is available in npm 6+_ - -### Yarn - -```sh -yarn create react-app my-app -``` - -_`yarn create` is available in Yarn 0.25+_ - -It will create a directory called `my-app` inside the current folder.
-Inside that directory, it will generate the initial project structure and install the transitive dependencies: - -``` -my-app -├── README.md -├── node_modules -├── package.json -├── .gitignore -├── public -│ ├── favicon.ico -│ ├── index.html -│ └── manifest.json -└── src - ├── App.css - ├── App.js - ├── App.test.js - ├── index.css - ├── index.js - ├── logo.svg - └── serviceWorker.js -``` - -No configuration or complicated folder structures, just the files you need to build your app.
-Once the installation is done, you can open your project folder: - -```sh -cd my-app -``` - -Inside the newly created project, you can run some built-in commands: - -### `npm start` or `yarn start` - -Runs the app in development mode.
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser. - -The page will automatically reload if you make changes to the code.
-You will see the build errors and lint warnings in the console. - -

-Build errors -

- -### `npm test` or `yarn test` - -Runs the test watcher in an interactive mode.
-By default, runs tests related to files changed since the last commit. - -[Read more about testing.](https://facebook.github.io/create-react-app/docs/running-tests) - -### `npm run build` or `yarn build` - -Builds the app for production to the `build` folder.
-It correctly bundles React in production mode and optimizes the build for the best performance. - -The build is minified and the filenames include the hashes.
- -Your app is ready to be deployed. - -## User Guide - -You can find detailed instructions on using Create React App and many tips in [its documentation](https://facebook.github.io/create-react-app/). - -## How to Update to New Versions? - -Please refer to the [User Guide](https://facebook.github.io/create-react-app/docs/updating-to-new-releases) for this and other information. - -## Philosophy - -- **One Dependency:** There is just one build dependency. It uses Webpack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them. - -- **No Configuration Required:** You don't need to configure anything. A reasonably good configuration of both development and production builds is handled for you so you can focus on writing code. - -- **No Lock-In:** You can “eject” to a custom setup at any time. Run a single command, and all the configuration and build dependencies will be moved directly into your project, so you can pick up right where you left off. - -## What’s Included? - -Your environment will have everything you need to build a modern single-page React app: - -- React, JSX, ES6, TypeScript and Flow syntax support. -- Language extras beyond ES6 like the object spread operator. -- Autoprefixed CSS, so you don’t need `-webkit-` or other prefixes. -- A fast interactive unit test runner with built-in support for coverage reporting. -- A live development server that warns about common mistakes. -- A build script to bundle JS, CSS, and images for production, with hashes and sourcemaps. -- An offline-first [service worker](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers) and a [web app manifest](https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/), meeting all the [Progressive Web App](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) criteria. (_Note: Using the service worker is opt-in as of `react-scripts@2.0.0` and higher_) -- Hassle-free updates for the above tools with a single dependency. - -Check out [this guide](https://github.com/nitishdayal/cra_closer_look) for an overview of how these tools fit together. - -The tradeoff is that **these tools are preconfigured to work in a specific way**. If your project needs more customization, you can ["eject"](https://facebook.github.io/create-react-app/docs/available-scripts#npm-run-eject) and customize it, but then you will need to maintain this configuration. - -## Popular Alternatives - -Create React App is a great fit for: - -- **Learning React** in a comfortable and feature-rich development environment. -- **Starting new single-page React applications.** -- **Creating examples** with React for your libraries and components. - -Here are a few common cases where you might want to try something else: - -- If you want to **try React** without hundreds of transitive build tool dependencies, consider [using a single HTML file or an online sandbox instead](https://reactjs.org/docs/try-react.html). - -- If you need to **integrate React code with a server-side template framework** like Rails, Django or Symfony, or if you’re **not building a single-page app**, consider using [nwb](https://github.com/insin/nwb), or [Neutrino](https://neutrino.js.org/) which are more flexible. For Rails specifically, you can use [Rails Webpacker](https://github.com/rails/webpacker). For Symfony, try [Symfony's Webpack Encore](https://symfony.com/doc/current/frontend/encore/reactjs.html). - -- If you need to **publish a React component**, [nwb](https://github.com/insin/nwb) can [also do this](https://github.com/insin/nwb#react-components-and-libraries), as well as [Neutrino's react-components preset](https://neutrino.js.org/packages/react-components/). - -- If you want to do **server rendering** with React and Node.js, check out [Next.js](https://github.com/zeit/next.js/) or [Razzle](https://github.com/jaredpalmer/razzle). Create React App is agnostic of the backend, and just produces static HTML/JS/CSS bundles. - -- If your website is **mostly static** (for example, a portfolio or a blog), consider using [Gatsby](https://www.gatsbyjs.org/) instead. Unlike Create React App, it pre-renders the website into HTML at the build time. - -- Finally, if you need **more customization**, check out [Neutrino](https://neutrino.js.org/) and its [React preset](https://neutrino.js.org/packages/react/). - -All of the above tools can work with little to no configuration. - -If you prefer configuring the build yourself, [follow this guide](https://reactjs.org/docs/add-react-to-an-existing-app.html). - -## Contributing - -We'd love to have your helping hand on `create-react-app`! See [CONTRIBUTING.md](CONTRIBUTING.md) for more information on what we're looking for and how to get started. - -## React Native - -Looking for something similar, but for React Native?
-Check out [Expo CLI](https://github.com/expo/expo-cli). - -## Acknowledgements - -We are grateful to the authors of existing related projects for their ideas and collaboration: - -- [@eanplatter](https://github.com/eanplatter) -- [@insin](https://github.com/insin) -- [@mxstbr](https://github.com/mxstbr) - -## License - -Create React App is open source software [licensed as MIT](https://github.com/facebook/create-react-app/blob/master/LICENSE). +We should not be using a fork of `create-react-app` it adds much confusion and misdirection to our build process. We should work out how we can replace the custom configuration here without having to fork the `create-react-app` project and work to deprecate this repo when we can.