Skip to content

Commit 459c58a

Browse files
koistyakoistya
committed
2.0.0
1 parent 9ca8bea commit 459c58a

22 files changed

+445
-131
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@
22
!.vscode/settings.json
33
node_modules
44
lerna-debug.log
5+
yarn-error.log

‎LICENSE

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
The MIT License
2+
3+
Copyright (c) 2013-present, Facebook, Inc.
4+
Copyright (c) 2015-present, Kriasoft.
5+
6+
Permission is hereby granted, free of charge, to any person obtaining a copy
7+
of this software and associated documentation files (the "Software"), to deal
8+
in the Software without restriction, including without limitation the rights
9+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10+
copies of the Software, and to permit persons to whom the Software is
11+
furnished to do so, subject to the following conditions:
12+
13+
The above copyright notice and this permission notice shall be included in
14+
all copies or substantial portions of the Software.
15+
16+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
22+
THE SOFTWARE.

‎README.md

+91-45
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,37 @@
1-
# React App SDK &nbsp; <a href="https://github.com/kriasoft/react-app/stargazers"><img src="https://img.shields.io/github/stars/kriasoft/react-app.svg?style=social&label=Star&maxAge=3600" height="20"></a> <a href="https://twitter.com/ReactSDK"><img src="https://img.shields.io/twitter/follow/ReactSDK.svg?style=social&label=Follow&maxAge=3600" height="20"></a> <a href="https://t.me/reactapp"><img src="https://img.shields.io/badge/chat-Telegram-green.svg?style=social&maxAge=3600" height="20"></a>
2-
3-
**React App SDK** is an extension to **[Create React App](https://github.com/facebook/create-react-app)**
4-
that allows building React applications alongside the Node.js backend, be that server-side rendering
5-
(SSR), REST or GraphQL APIs, cloud functions, you name it.
6-
7-
It's intended to be used as a drop-in replacement for `react-scripts` NPM module. If you want to
8-
add server-side code into your application built with Create React App, all you have to do is to
9-
replace `react-scripts` dev dependency in your project with `react-app-tools` plus provide one more
10-
entry point for the server-side application bundle as demonstrated below:
1+
<h1 align="center">
2+
React App SDK<br>
3+
<a href="https://npmjs.com/package/react-app-tools"><img src="https://img.shields.io/npm/v/react-app-tools.svg?maxAge=3600" height="20"></a>
4+
<a href="https://npmjs.com/package/react-app-tools"><img src="https://img.shields.io/npm/dm/react-app-tools.svg?maxAge=3600" height="20"></a>
5+
<a href="https://opencollective.com/react-app"><img src="https://opencollective.com/react-app/backers/badge.svg?maxAge=3600" height="20"></a>
6+
<a href="https://twitter.com/ReactSDK"><img src="https://img.shields.io/twitter/follow/ReactSDK.svg?style=social&amp;label=Follow&amp;maxAge=3600" height="20"></a>
7+
<a href="https://t.me/reactapp"><img src="https://img.shields.io/badge/chat-Telegram-green.svg?style=social&amp;maxAge=3600" height="20"></a>
8+
</h1>
9+
10+
Everything you love about **[Create React App](https://github.com/facebook/create-react-app)** —
11+
the best tooling for developing React.js applications, plus server-side code support (SSR, GraphQL
12+
API, etc) and config overrides (Babel, Webpack, etc.). See the
13+
[demo project](https://github.com/kriasoft/react-firebase-starter).
14+
15+
**React App SDK** is intended to be used as a drop-in replacement for `react-scripts` NPM module.
16+
If you want to add server-side code into your application built with Create React App, all you have
17+
to do is to replace `react-scripts` dev dependency with `react-app-tools` plus provide one more
18+
entry point for Node.js as demonstrated below:
1119

1220
#### Directory Layout
1321

1422
```bash
1523
.
16-
├── /build/ # Compiled output
17-
│ ├── /public/ # Pre-compiled client-side app
18-
│ └── server.js # Pre-compiled Node.js app
19-
├── /src/ # Application source files
20-
│ ├── /components/ # React.js components
24+
├── build/ # Compiled output
25+
│ ├── public/ # Pre-compiled client-side app
26+
│ └── app.js # Pre-compiled Node.js app
27+
├── src/ # Application source files
28+
│ ├── components/ # React.js components
2129
│ │ ├── /App/ # - The top-level React component
2230
│ │ ├── /Button/ # - Some other UI element
2331
│ │ └── ... # - etc.
2432
│ ├── app.browser.js # Client-side rendering, e.g. ReactDOM.render(<App />, container)
25-
│ ├── app.node.js # Server-side rendering, e.g. ReactDOMServer.renderToString(<App />)
26-
│ └── server.js # Server-side entiry point, e.g. app.listen(process.env.PORT)
33+
│ └── app.node.js # Server-side rendering, e.g. ReactDOMServer.renderToString(<App />)
34+
├── config-overrides.js # Configuration overrides for Webpack, Babel, etc. (optional)
2735
└── package.json # List of project dependencies and NPM scripts
2836
```
2937

@@ -32,21 +40,21 @@ entry point for the server-side application bundle as demonstrated below:
3240
```diff
3341
{
3442
"dependencies": {
35-
+ "express": "^4.6.12",
43+
+ "express": "^4.6.13",
3644
"react": "^16.2.0",
3745
"react-dom": "^16.2.0"
3846
},
3947
{
4048
- "react-scripts": "^1.1.1"
41-
+ "react-app-tools": "^2.0.0-beta.10"
49+
+ "react-app-tools": "^2.0.0"
4250
},
4351
"scripts": {
44-
- "test": "react-scripts test --env=jsdom",
45-
+ "test": "react-app test --env=jsdom",
52+
- "start": "react-scripts start",
53+
+ "start": "react-app start",
4654
- "build": "react-scripts build",
4755
+ "build": "react-app build",
48-
- "start": "react-scripts start"
49-
+ "start": "react-app start"
56+
- "test": "react-scripts test --env=jsdom"
57+
+ "test": "react-app test --env=jsdom"
5058
}
5159
}
5260
```
@@ -61,15 +69,15 @@ import App from './components/App';
6169
ReactDOM.hydrate(<App />, document.getElementById('root'));
6270
```
6371

64-
#### `src/app.node.js` - Server-side rendering and REST or GraphQL API
72+
#### `src/app.node.js` - Server-side rendering and/or API endpoint
6573

6674
```js
67-
import path from 'path';
68-
import express from 'express';
69-
import React from 'react';
70-
import ReactDOMServer from 'react-dom/server';
71-
import App from './components/App';
72-
import assets from './assets.json';
75+
const path = require('path');
76+
const express = require('express');
77+
const React = require('react');
78+
const ReactDOMServer = require('react-dom/server');
79+
const App = require('./components/App');
80+
const assets = require('./assets.json');
7381

7482
const app = express();
7583

@@ -84,15 +92,11 @@ app.get('*', (req, res) => {
8492
`);
8593
});
8694

87-
export default app;
88-
```
89-
90-
#### `src/server.js` - Server-side entry point
91-
92-
```js
93-
import app from './app.node';
94-
95-
app.listen(process.env.PORT || 8080);
95+
if (process.env.NODE_ENV === 'production') {
96+
app.listen(process.env.PORT || 8080);
97+
} else {
98+
module.exports.default = app;
99+
}
96100
```
97101

98102
You can launch the app in development mode by running:
@@ -116,10 +120,10 @@ Join our Telegram chat for support and feature requests - https://t.me/reactapp
116120

117121
<p align="center"><a href="https://www.youtube.com/watch?v=GH3kJwQ7mxM"><img src="http://img.youtube.com/vi/GH3kJwQ7mxM/maxresdefault.jpg" width="1187" alt="Server-side rendering with React.js" /><br /><sup>How fast is React SSR?</sup></a></p>
118122

119-
### How to Customize
123+
## How to Customize
120124

121-
Create `override.js` file in the root of your project containing configuration overrides.
122-
For example:
125+
Create `config-overrides.js` file in the root of your project containing with configuration
126+
overrides. Here is an example:
123127

124128
```js
125129
module.exports = {
@@ -140,14 +144,56 @@ module.exports = {
140144
};
141145
```
142146

143-
### Contribute
147+
## Backers
148+
149+
Love **React App SDK**? Help us keep it alive by [donating](https://opencollective.com/react-app)
150+
funds to cover project expenses!
151+
152+
<a href="https://opencollective.com/react-app/backers/0/website">
153+
<img src="https://opencollective.com/react-app/backers/0/avatar">
154+
</a>
155+
<a href="https://opencollective.com/react-app/backers/1/website">
156+
<img src="https://opencollective.com/react-app/backers/1/avatar" height="64">
157+
</a>
158+
<a href="https://opencollective.com/react-app/backers/2/website">
159+
<img src="https://opencollective.com/react-app/backers/2/avatar" height="64">
160+
</a>
161+
<a href="https://opencollective.com/react-app/backers/3/website">
162+
<img src="https://opencollective.com/react-app/backers/3/avatar" height="64">
163+
</a>
164+
<a href="https://opencollective.com/react-app/backers/4/website">
165+
<img src="https://opencollective.com/react-app/backers/4/avatar" height="64">
166+
</a>
167+
<a href="https://opencollective.com/react-app/backers/5/website">
168+
<img src="https://opencollective.com/react-app/backers/5/avatar" height="64">
169+
</a>
170+
<a href="https://opencollective.com/react-app/backers/6/website">
171+
<img src="https://opencollective.com/react-app/backers/6/avatar" height="64">
172+
</a>
173+
<a href="https://opencollective.com/react-app/backers/7/website">
174+
<img src="https://opencollective.com/react-app/backers/7/avatar" height="64">
175+
</a>
176+
<a href="https://opencollective.com/react-app/backers/8/website">
177+
<img src="https://opencollective.com/react-app/backers/8/avatar" height="64">
178+
</a>
179+
<a href="https://opencollective.com/react-app/backers/9/website">
180+
<img src="https://opencollective.com/react-app/backers/9/avatar" height="64">
181+
</a>
182+
<a href="https://opencollective.com/react-app/backers/10/website">
183+
<img src="https://opencollective.com/react-app/backers/10/avatar" height="64">
184+
</a>
185+
<a href="https://opencollective.com/react-app/backers/11/website">
186+
<img src="https://opencollective.com/react-app/backers/11/avatar" height="64">
187+
</a>
188+
189+
## Contribute
144190

145191
Help shape the future of **React App SDK** by joining our [community](https://t.me/reactapp)
146192
today, check out the [open issues](https://github.com/kriasoft/react-app/issues), submit [new
147193
feature ideas](https://github.com/kriasoft/react-app/issues/new?labels=enhancement) and [bug
148194
reports](https://github.com/kriasoft/react-app/issues/new?labels=bug), send us [pull
149195
requests](CONTRIBUTING.md#submitting-a-pull-request)!
150196

151-
### License
197+
## License
152198

153-
[MIT](https://github.com/kriasoft/react-app/blob/master/LICENSE.txt) © 2016-present Facebook, Kriasoft
199+
[MIT](https://github.com/kriasoft/react-app/blob/master/LICENSE) © 2016-present Facebook, Kriasoft.

‎packages/react-app-tools/README.md

+17-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,19 @@
1-
# react-scripts
1+
# react-app-tools &nbsp; <a href="https://github.com/kriasoft/react-app/stargazers"><img src="https://img.shields.io/github/stars/kriasoft/react-app.svg?style=social&label=Star&maxAge=3600" height="20"></a> <a href="https://twitter.com/ReactSDK"><img src="https://img.shields.io/twitter/follow/ReactSDK.svg?style=social&label=Follow&maxAge=3600" height="20"></a> <a href="https://t.me/reactapp"><img src="https://img.shields.io/badge/chat-Telegram-green.svg?style=social&maxAge=3600" height="20"></a>
22

3-
This package includes scripts and configuration used by [Create React App](https://github.com/facebook/create-react-app).<br>
4-
Please refer to its documentation:
3+
This package is a fork of [`react-scripts`](https://npmjs.com/package/react-scripts) that adds a
4+
couple more features to [Create React App](https://github.com/facebook/create-react-app) tooling:
55

6-
* [Getting Started](https://github.com/facebook/create-react-app/blob/master/README.md#getting-started) – How to create a new app.
7-
* [User Guide](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md) – How to develop apps bootstrapped with Create React App.
6+
* An ability to add, build, and test server-side code using the same instance of Webpack.
7+
* An ability to customize Babel, Webpack and other configs by putting `config-overrides.js`
8+
file in the root of your project.
9+
10+
For more information visit:
11+
12+
* https://github.com/facebook/create-react-app - the original repository
13+
* https://github.com/kriasoft/react-app - the patched version of CRA
14+
* https://github.com/kriasoft/react-firebase-starter - demo project
15+
16+
Support and feature requests:
17+
18+
* https://t.me/ReactApp
19+
* https://t.me/ReactStarter

‎packages/react-app-tools/WebpackDevServerUtils.js

+32-3
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,10 @@ const chalk = require('chalk');
1414
const detect = require('detect-port-alt');
1515
const isRoot = require('is-root');
1616
const inquirer = require('inquirer');
17-
const clearConsole = require('./clearConsole');
18-
const formatWebpackMessages = require('./formatWebpackMessages');
19-
const getProcessForPort = require('./getProcessForPort');
17+
const clearConsole = require('react-dev-utils/clearConsole');
18+
const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
19+
const getProcessForPort = require('react-dev-utils/getProcessForPort');
20+
const paths = require('./config/paths');
2021

2122
const isInteractive = process.stdout.isTTY;
2223
let handleCompile;
@@ -136,10 +137,18 @@ function createCompiler(webpack, config, appName, urls, useYarn) {
136137
clearConsole();
137138
}
138139
console.log('Compiling...');
140+
141+
global.appPromise = new Promise(resolve => {
142+
global.appPromiseResolve = resolve;
143+
});
139144
});
140145

141146
let isFirstCompile = true;
142147

148+
global.appPromise = new Promise(resolve => {
149+
global.appPromiseResolve = resolve;
150+
});
151+
143152
// "done" event fires when Webpack has finished recompiling the bundle.
144153
// Whether or not you have warnings or errors, you will get this event.
145154
compiler.plugin('done', stats => {
@@ -189,6 +198,26 @@ function createCompiler(webpack, config, appName, urls, useYarn) {
189198
' to the line before.\n'
190199
);
191200
}
201+
202+
const assets = JSON.stringify(
203+
stats.stats[0].toJson({}, true).assetsByChunkName,
204+
null,
205+
' '
206+
);
207+
fs.writeFileSync(paths.assetsJson, assets, 'utf8');
208+
if (paths.nodeBuildAppJs in require.cache) {
209+
try {
210+
const dispose = (require(paths.nodeBuildAppJs) || {}).dispose;
211+
if (typeof dispose === 'function') {
212+
dispose();
213+
}
214+
} catch (err) {
215+
console.log(err);
216+
}
217+
}
218+
delete require.cache[paths.assetsJson];
219+
delete require.cache[paths.nodeBuildAppJs];
220+
global.appPromiseResolve();
192221
});
193222
return compiler;
194223
}

‎packages/react-app-tools/bin/react-scripts.js ‎packages/react-app-tools/bin/react-app.js

File renamed without changes.

‎packages/react-app-tools/config/env.js

+4-6
Original file line numberDiff line numberDiff line change
@@ -88,12 +88,10 @@ function getClientEnvironment(publicUrl) {
8888
}
8989
);
9090
// Stringify all values so we can feed into Webpack DefinePlugin
91-
const stringified = {
92-
'process.env': Object.keys(raw).reduce((env, key) => {
93-
env[key] = JSON.stringify(raw[key]);
94-
return env;
95-
}, {}),
96-
};
91+
const stringified = Object.keys(raw).reduce((env, key) => {
92+
env[`process.env.${key}`] = JSON.stringify(raw[key]);
93+
return env;
94+
}, {});
9795

9896
return { raw, stringified };
9997
}

0 commit comments

Comments
 (0)