|
1 | | -# Create React App [](https://dev.azure.com/facebook/create-react-app/_build/latest?definitionId=1&branchName=master) [](https://github.com/facebook/create-react-app/blob/master/CONTRIBUTING.md) |
| 1 | +# `backpack-react-scripts` [](https://travis-ci.org/Skyscanner/backpack-react-scripts) |
2 | 2 |
|
3 | | -<img alt="Logo" align="right" src="https://create-react-app.dev/img/logo.svg" width="20%" /> |
| 3 | +**⚠️ This is a fork of Facebook's [Create React App](https://github.com/facebook/create-react-app).** |
4 | 4 |
|
5 | | -Create React apps with no build configuration. |
| 5 | +Specifically, it is a fork of the [`react-scripts`](https://github.com/facebook/create-react-app/tree/master/packages/react-scripts) package. It adds Backpack component support and server-side rendering functionality (amongst other things). |
6 | 6 |
|
7 | | -- [Creating an App](#creating-an-app) – How to create a new app. |
8 | | -- [User Guide](https://facebook.github.io/create-react-app/) – How to develop apps bootstrapped with Create React App. |
| 7 | +In order to benefit from the ongoing open source development of create-react-app, this fork is kept up-to-date with the upstream repo. To aid this, we have preserved the existing repo structure, including all of the source code for the other packages that live alongside [`react-scripts`](https://github.com/facebook/create-react-app/tree/master/packages/react-scripts). **We do not modify any source code outside of [`react-scripts`](https://github.com/facebook/create-react-app/tree/master/packages/react-scripts).** |
9 | 8 |
|
10 | | -Create React App works on macOS, Windows, and Linux.<br> |
11 | | -If something doesn’t work, please [file an issue](https://github.com/facebook/create-react-app/issues/new).<br> |
12 | | -If you have questions or need help, please ask in [GitHub Discussions](https://github.com/facebook/create-react-app/discussions). |
| 9 | +Files of interest: |
13 | 10 |
|
14 | | -## Quick Overview |
15 | | - |
16 | | -```sh |
17 | | -npx create-react-app my-app |
18 | | -cd my-app |
19 | | -npm start |
20 | | -``` |
21 | | - |
22 | | -If you've previously installed `create-react-app` globally via `npm install -g create-react-app`, we recommend you uninstall the package using `npm uninstall -g create-react-app` or `yarn global remove create-react-app` to ensure that npx always uses the latest version. |
23 | | - |
24 | | -_([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))_ |
25 | | - |
26 | | -Then open [http://localhost:3000/](http://localhost:3000/) to see your app.<br> |
27 | | -When you’re ready to deploy to production, create a minified bundle with `npm run build`. |
28 | | - |
29 | | -<p align='center'> |
30 | | -<img src='https://cdn.jsdelivr.net/gh/facebook/create-react-app@27b42ac7efa018f2541153ab30d63180f5fa39e0/screencast.svg' width='600' alt='npm start'> |
31 | | -</p> |
32 | | - |
33 | | -### Get Started Immediately |
34 | | - |
35 | | -You **don’t** need to install or configure tools like webpack or Babel.<br> |
36 | | -They are preconfigured and hidden so that you can focus on the code. |
37 | | - |
38 | | -Create a project, and you’re good to go. |
39 | | - |
40 | | -## Creating an App |
41 | | - |
42 | | -**You’ll need to have Node 10.16.0 or later version on your local development machine** (but it’s not required on the server). We recommend using the latest LTS version. 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 switch Node versions between different projects. |
43 | | - |
44 | | -To create a new app, you may choose one of the following methods: |
45 | | - |
46 | | -### npx |
47 | | - |
48 | | -```sh |
49 | | -npx create-react-app my-app |
50 | | -``` |
51 | | - |
52 | | -_([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) is a package runner tool that comes with npm 5.2+ and higher, see [instructions for older npm versions](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f))_ |
53 | | - |
54 | | -### npm |
55 | | - |
56 | | -```sh |
57 | | -npm init react-app my-app |
58 | | -``` |
59 | | - |
60 | | -_`npm init <initializer>` is available in npm 6+_ |
61 | | - |
62 | | -### Yarn |
63 | | - |
64 | | -```sh |
65 | | -yarn create react-app my-app |
66 | | -``` |
67 | | - |
68 | | -_[`yarn create <starter-kit-package>`](https://yarnpkg.com/lang/en/docs/cli/create/) is available in Yarn 0.25+_ |
69 | | - |
70 | | -It will create a directory called `my-app` inside the current folder.<br> |
71 | | -Inside that directory, it will generate the initial project structure and install the transitive dependencies: |
72 | | - |
73 | | -``` |
74 | | -my-app |
75 | | -├── README.md |
76 | | -├── node_modules |
77 | | -├── package.json |
78 | | -├── .gitignore |
79 | | -├── public |
80 | | -│ ├── favicon.ico |
81 | | -│ ├── index.html |
82 | | -│ └── manifest.json |
83 | | -└── src |
84 | | - ├── App.css |
85 | | - ├── App.js |
86 | | - ├── App.test.js |
87 | | - ├── index.css |
88 | | - ├── index.js |
89 | | - ├── logo.svg |
90 | | - └── serviceWorker.js |
91 | | - └── setupTests.js |
92 | | -``` |
93 | | - |
94 | | -No configuration or complicated folder structures, only the files you need to build your app.<br> |
95 | | -Once the installation is done, you can open your project folder: |
96 | | - |
97 | | -```sh |
98 | | -cd my-app |
99 | | -``` |
100 | | - |
101 | | -Inside the newly created project, you can run some built-in commands: |
102 | | - |
103 | | -### `npm start` or `yarn start` |
104 | | - |
105 | | -Runs the app in development mode.<br> |
106 | | -Open [http://localhost:3000](http://localhost:3000) to view it in the browser. |
107 | | - |
108 | | -The page will automatically reload if you make changes to the code.<br> |
109 | | -You will see the build errors and lint warnings in the console. |
110 | | - |
111 | | -<p align='center'> |
112 | | -<img src='https://cdn.jsdelivr.net/gh/marionebl/create-react-app@9f6282671c54f0874afd37a72f6689727b562498/screencast-error.svg' width='600' alt='Build errors'> |
113 | | -</p> |
114 | | - |
115 | | -### `npm test` or `yarn test` |
116 | | - |
117 | | -Runs the test watcher in an interactive mode.<br> |
118 | | -By default, runs tests related to files changed since the last commit. |
119 | | - |
120 | | -[Read more about testing.](https://facebook.github.io/create-react-app/docs/running-tests) |
121 | | - |
122 | | -### `npm run build` or `yarn build` |
123 | | - |
124 | | -Builds the app for production to the `build` folder.<br> |
125 | | -It correctly bundles React in production mode and optimizes the build for the best performance. |
126 | | - |
127 | | -The build is minified and the filenames include the hashes.<br> |
128 | | - |
129 | | -Your app is ready to be deployed. |
130 | | - |
131 | | -## User Guide |
132 | | - |
133 | | -You can find detailed instructions on using Create React App and many tips in [its documentation](https://facebook.github.io/create-react-app/). |
134 | | - |
135 | | -## How to Update to New Versions? |
136 | | - |
137 | | -Please refer to the [User Guide](https://facebook.github.io/create-react-app/docs/updating-to-new-releases) for this and other information. |
138 | | - |
139 | | -## Philosophy |
140 | | - |
141 | | -- **One Dependency:** There is only one build dependency. It uses webpack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them. |
142 | | - |
143 | | -- **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. |
144 | | - |
145 | | -- **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. |
146 | | - |
147 | | -## What’s Included? |
148 | | - |
149 | | -Your environment will have everything you need to build a modern single-page React app: |
150 | | - |
151 | | -- React, JSX, ES6, TypeScript and Flow syntax support. |
152 | | -- Language extras beyond ES6 like the object spread operator. |
153 | | -- Autoprefixed CSS, so you don’t need `-webkit-` or other prefixes. |
154 | | -- A fast interactive unit test runner with built-in support for coverage reporting. |
155 | | -- A live development server that warns about common mistakes. |
156 | | -- A build script to bundle JS, CSS, and images for production, with hashes and sourcemaps. |
157 | | -- 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_) |
158 | | -- Hassle-free updates for the above tools with a single dependency. |
159 | | - |
160 | | -Check out [this guide](https://github.com/nitishdayal/cra_closer_look) for an overview of how these tools fit together. |
161 | | - |
162 | | -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. |
163 | | - |
164 | | -## Popular Alternatives |
165 | | - |
166 | | -Create React App is a great fit for: |
167 | | - |
168 | | -- **Learning React** in a comfortable and feature-rich development environment. |
169 | | -- **Starting new single-page React applications.** |
170 | | -- **Creating examples** with React for your libraries and components. |
171 | | - |
172 | | -Here are a few common cases where you might want to try something else: |
173 | | - |
174 | | -- 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). |
175 | | - |
176 | | -- 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). |
177 | | - |
178 | | -- 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/). |
179 | | - |
180 | | -- If you want to do **server rendering** with React and Node.js, check out [Next.js](https://nextjs.org/) or [Razzle](https://github.com/jaredpalmer/razzle). Create React App is agnostic of the backend, and only produces static HTML/JS/CSS bundles. |
181 | | - |
182 | | -- If your website is **mostly static** (for example, a portfolio or a blog), consider using [Gatsby](https://www.gatsbyjs.org/) or [Next.js](https://nextjs.org/). Unlike Create React App, Gatsby pre-renders the website into HTML at build time. Next.js supports both server rendering and pre-rendering. |
183 | | - |
184 | | -- Finally, if you need **more customization**, check out [Neutrino](https://neutrino.js.org/) and its [React preset](https://neutrino.js.org/packages/react/). |
185 | | - |
186 | | -All of the above tools can work with little to no configuration. |
187 | | - |
188 | | -If you prefer configuring the build yourself, [follow this guide](https://reactjs.org/docs/add-react-to-an-existing-app.html). |
189 | | - |
190 | | -## React Native |
191 | | - |
192 | | -Looking for something similar, but for React Native?<br> |
193 | | -Check out [Expo CLI](https://github.com/expo/expo-cli). |
194 | | - |
195 | | -## Contributing |
196 | | - |
197 | | -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. |
198 | | - |
199 | | -## Supporting Create React App |
200 | | - |
201 | | -Create React App is a community maintained project and all contributors are volunteers. If you'd like to support the future development of Create React App then please consider donating to our [Open Collective](https://opencollective.com/create-react-app). |
202 | | - |
203 | | -## Credits |
204 | | - |
205 | | -This project exists thanks to all the people who [contribute](CONTRIBUTING.md).<br> |
206 | | -<a href="https://github.com/facebook/create-react-app/graphs/contributors"><img src="https://opencollective.com/create-react-app/contributors.svg?width=890&button=false" /></a> |
207 | | - |
208 | | -Thanks to [Netlify](https://www.netlify.com/) for hosting our documentation. |
209 | | - |
210 | | -## Acknowledgements |
211 | | - |
212 | | -We are grateful to the authors of existing related projects for their ideas and collaboration: |
213 | | - |
214 | | -- [@eanplatter](https://github.com/eanplatter) |
215 | | -- [@insin](https://github.com/insin) |
216 | | -- [@mxstbr](https://github.com/mxstbr) |
217 | | - |
218 | | -## License |
219 | | - |
220 | | -Create React App is open source software [licensed as MIT](https://github.com/facebook/create-react-app/blob/master/LICENSE). The Create React App logo is licensed under a [Creative Commons Attribution 4.0 International license](https://creativecommons.org/licenses/by/4.0/). |
| 11 | +- [`react-scripts` README](packages/react-scripts/README.md) |
| 12 | +- [`react-scripts` CHANGELOG](packages/react-scripts/CHANGELOG.md) |
0 commit comments