Add Beamery configuration

README.md

@@ -1,203 +1,67 @@
-# 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)
+# Beamery Create React App
 
-Create React apps with no build configuration.
+## Using this fork
 
-- [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.
+To use this fork, run the following command (optionally with TypeScript).
 
-Create React App works on macOS, Windows, and Linux.<br>
-If something doesn’t work, please [file an issue](https://github.com/facebook/create-react-app/issues/new).
+```sh
+npx create-react-app \
+  [app-name] \
+  --scripts-version @beamery/react-scripts[@release] \
+  [--typescript]
+```
 
-## Quick Overview
+For example:
 
 ```sh
-npx create-react-app my-app
-cd my-app
-npm start
+npx create-react-app \
+  app-newapp \
+  --scripts-version @beamery/react-scripts#3.0.1-A \
+  --typescript
 ```
 
-_([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))_
+Release are in the format `#.#.#-A` where the version (`#.#.#`) matches the current official
+release of `react-scripts`, and the alpha character (`-A`) is our internal release.
 
-Then open [http://localhost:3000/](http://localhost:3000/) to see your app.<br>
-When you’re ready to deploy to production, create a minified bundle with `npm run build`.
+Releases need to be manually created. A full list of available release can be found here:
 
-<p align='center'>
-<img src='https://cdn.rawgit.com/facebook/create-react-app/27b42ac/screencast.svg' width='600' alt='npm start'>
-</p>
+https://github.com/SeedJobs/bmr-react-scripts/releases
 
-### Get Started Immediately
+### A note on package `name`
 
-You **don’t** need to install or configure tools like Webpack or Babel.<br>
-They are preconfigured and hidden so that you can focus on the code.
+When initialising CRA, the `app-name` will also be set to the value of the `name` field in `package.json`.
 
-Just create a project, and you’re good to go.
+In our custom scripts, the `name` field is important. It is used for the following:
 
-## Creating an App
+- The application's bundle name.
+- The application's hook id (when using with `single-spa-react`).
+- Webpack's `devtoolModuleFilenameTemplate` template.
 
-**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.
+You can change the `name` field at any time.
 
-To create a new app, you may choose one of the following methods:
+## Updating this package
 
-### npx
-
-```sh
-npx create-react-app my-app
-```
+### Pulling upstream changes
 
-_([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))_
+Checkout the `master` branch.
 
-### npm
+If you don't already have an upstream set, use this command:
 
 ```sh
-npm init react-app my-app
-```
-
-_`npm init <initializer>` 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.<br>
-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
+git remote add upstream [email protected]:facebook/create-react-app.git
 ```
 
-No configuration or complicated folder structures, just the files you need to build your app.<br>
-Once the installation is done, you can open your project folder:
+Run the following commands. We use `--rebase` to keep our changes at the head of the branch, which ensures our changes are easy to keep track of.
 
 ```sh
-cd my-app
+git pull --rebase upstream master
 ```
 
-Inside the newly created project, you can run some built-in commands:
-
-### `npm start` or `yarn start`
-
-Runs the app in development mode.<br>
-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.<br>
-You will see the build errors and lint warnings in the console.
-
-<p align='center'>
-<img src='https://cdn.rawgit.com/marionebl/create-react-app/9f62826/screencast-error.svg' width='600' alt='Build errors'>
-</p>
-
-### `npm test` or `yarn test`
-
-Runs the test watcher in an interactive mode.<br>
-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.<br>
-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.<br>
-
-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 `[email protected]` 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?<br>
-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:
+## Issues
 
-- [@eanplatter](https://github.com/eanplatter)
-- [@insin](https://github.com/insin)
-- [@mxstbr](https://github.com/mxstbr)
+If something doesn’t work, please [file an issue](https://github.com/SeedJobs/create-react-app/issues/new).
 
-## License
+## Official docs
 
-Create React App is open source software [licensed as MIT](https://github.com/facebook/create-react-app/blob/master/LICENSE).
+- [Create React App README](https://github.com/facebook/create-react-app/blob/master/README.md)
+- [User Guide](https://facebook.github.io/create-react-app/docs/folder-structure) – How to develop apps bootstrapped with Create React App.

packages/react-scripts/bin/react-scripts.js

@@ -19,11 +19,37 @@ const spawn = require('react-dev-utils/crossSpawn');
 const args = process.argv.slice(2);
 
 const scriptIndex = args.findIndex(
-  x => x === 'build' || x === 'eject' || x === 'start' || x === 'test'
+  x =>
+    x.startsWith('build') ||
+    x === 'eject' ||
+    x.startsWith('start') ||
+    x === 'test'
 );
-const script = scriptIndex === -1 ? args[0] : args[scriptIndex];
+let script = scriptIndex === -1 ? args[0] : args[scriptIndex];
 const nodeArgs = scriptIndex > 0 ? args.slice(0, scriptIndex) : [];
 
+// BMR_ENV config
+const envs = require('../config/beamery/envs');
+switch (script) {
+  case 'build':
+    process.env.BMR_ENV = envs.PRODUCTION;
+    break;
+  case 'build-dev':
+    script = 'build';
+    process.env.BMR_ENV = envs.DEVELOPMENT;
+    break;
+  case 'start-dev':
+    script = 'start';
+    process.env.BMR_ENV = envs.DEVELOPMENT;
+    break;
+  case 'build-stg':
+    script = 'build';
+    process.env.BMR_ENV = envs.STAGING;
+    break;
+  default:
+    process.env.BMR_ENV = envs.INDEPENDENT;
+}
+
 switch (script) {
   case 'build':
   case 'eject':

packages/react-scripts/config/beamery/alias.js

@@ -0,0 +1,10 @@
+'use strict';
+const path = require('path');
+
+module.exports = {
+  react: path.resolve('./node_modules/react'),
+  'react-dom': path.resolve('./node_modules/react-dom'),
+  'styled-components': path.resolve('./node_modules/styled-components'),
+  mobx: path.resolve('./node_modules/mobx'),
+  'mobx-react': path.resolve('./node_modules/mobx-react'),
+};

packages/react-scripts/config/beamery/envs.js

@@ -0,0 +1,8 @@
+'use strict';
+
+module.exports = {
+  DEVELOPMENT: 'development',
+  PRODUCTION: 'production',
+  STAGING: 'staging',
+  INDEPENDENT: 'independent',
+};

packages/react-scripts/config/beamery/jest.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var enzyme = require('enzyme');
+var Adapter = require('enzyme-adapter-react-16');
+
+enzyme.configure({ adapter: new Adapter() });

packages/react-scripts/config/beamery/paths.js

@@ -0,0 +1,27 @@
+'use strict';
+
+const envs = require('./envs');
+
+const paths = {
+  buildPath: 'dist',
+  publicPath: false,
+  appIndexJs: 'src/index.full',
+};
+
+switch (process.env.BMR_ENV) {
+  case envs.PRODUCTION:
+    paths.publicPath = 'https://storage.googleapis.com/beamery/';
+    break;
+  case envs.STAGING:
+    paths.buildPath = '../app-bath/dist';
+    break;
+  case envs.DEVELOPMENT:
+    paths.buildPath = '../app-bath/dev';
+    break;
+  case envs.INDEPENDENT:
+  default:
+    paths.appIndexJs = 'src/index';
+    break;
+}
+
+module.exports = paths;

packages/react-scripts/config/beamery/prefixes.js

@@ -0,0 +1,16 @@
+'use strict';
+
+const paths = require('../paths');
+const appPackageJson = require(paths.appPackageJson);
+
+// Use the `package.json` app name to simplify setup.
+const appName = appPackageJson.name;
+process.env.BMR_APP_NAME = appName;
+
+module.exports = {
+  // Webpack allows us to define a path in sources. This can be useful for
+  // debugging against other applications.
+  devtoolRoot: appName ? appName + ':///' : '',
+  // This prefix is not used for `independent` builds.
+  filenamePrefix: appName ? appName : 'APP-NAME-UNDEFINED',
+};

packages/react-scripts/config/env.js

@@ -85,6 +85,7 @@ function getClientEnvironment(publicUrl) {
         // This should only be used as an escape hatch. Normally you would put
         // images into the `src` and `import` them in code to get their paths.
         PUBLIC_URL: publicUrl,
+        APP_NAME: process.env.BMR_APP_NAME,
       }
     );
   // Stringify all values so we can feed into Webpack DefinePlugin