Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kriasoft/react-app
Create React App with server-side code support
https://github.com/kriasoft/react-app
babel boilerplate create-react-app graphql graphql-js isomorphic javascript react react-starter react-starter-kit reactjs relay relay-modern server-side-rendering single-page-app ssr template webpack
Last synced: 1 day ago
JSON representation
Create React App with server-side code support
- Host: GitHub
- URL: https://github.com/kriasoft/react-app
- Owner: kriasoft
- License: mit
- Created: 2016-05-12T16:51:40.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T15:32:36.000Z (about 2 years ago)
- Last Synced: 2024-10-29T15:20:39.026Z (about 2 months ago)
- Topics: babel, boilerplate, create-react-app, graphql, graphql-js, isomorphic, javascript, react, react-starter, react-starter-kit, reactjs, relay, relay-modern, server-side-rendering, single-page-app, ssr, template, webpack
- Language: JavaScript
- Homepage: https://t.me/reactapp
- Size: 2.02 MB
- Stars: 613
- Watchers: 22
- Forks: 84
- Open Issues: 34
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- -awesome-create-react-app - react-app - CLI tools and templates for authoring React applications with a single dev dependency and no configurations. (Alternatives)
- awesome-create-react-app - react-app - CLI tools and templates for authoring React applications with a single dev dependency and no configurations. (Alternatives)
- awesome-starred-test - kriasoft/react-app - Create React App with server-side code support (JavaScript)
README
React App SDK
Everything you love about **[Create React App](https://github.com/facebook/create-react-app)** plus
server-side code support (SSR, GraphQL API, etc) and config overrides (Babel, Webpack, etc.). See
the [demo project](https://github.com/kriasoft/react-firebase-starter).
**React App SDK** is intended to be used as a drop-in replacement for `react-scripts` NPM module.
If you want to add server-side code into your application built with Create React App, all you have
to do is to replace `react-scripts` dev dependency with `react-app-tools` plus provide one more
entry point for Node.js as demonstrated below:
#### Directory Layout
```bash
.
├── build/ # Compiled output
├── src/ # Universal application source code
│ ├── components/ # Shared React.js components
│ │ ├── /App/ # - The top-level React component
│ │ ├── /Button/ # - Some other UI element
│ │ └── ... # - etc.
│ ├── server/ # Node.js app
│ │ ├── ssr.js # - Server-side rendering, e.g. ReactDOMServer.renderToString()
│ │ ├── api.js # - GraphQL API endpoint
│ │ └── index.js # - Node.js app entry point
│ └── index.js # Client-side app entry point, e.g. ReactDOM.hydrate(, container)
└── package.json # List of project dependencies and NPM scripts
```
#### `package.json`
```diff
{
"main": "build/server.js",
"engines": {
"node": ">=8.10"
},
"dependencies": {
+ "express": "^4.6.14",
"react": "^16.8.4",
"react-dom": "^16.8.4"
},
"devDependencies": {
- "react-scripts": "^1.1.1"
+ "react-app-tools": "^3.1.0-preview.7"
},
"scripts": {
- "start": "react-scripts start",
+ "start": "react-app start",
- "build": "react-scripts build",
+ "build": "react-app build",
- "test": "react-scripts test"
+ "test": "react-app test"
}
}
```
#### `src/index.js` - Client-side rendering
```js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
ReactDOM.hydrate(, document.getElementById('root'));
```
#### `src/server/index.js` - Server-side rendering and/or API endpoint
```js
const path = require('path');
const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('../components/App');
const stats = require('./stats.json');
const app = express();
app.get('*', (req, res) => {
res.send(`
${ReactDOMServer.renderToString()}
${stats.entrypoints.main.assets.map(
src => ``
)}
`);
});
if (process.env.NODE_ENV === 'production') {
app.listen(process.env.PORT || 8080);
} else {
module.exports.default = app;
}
```
You can launch the app in development mode by running:
```sh
$ npm install
$ npm start
```
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`.
For more information refer to Create React App documentation:
- [Getting Started](https://github.com/facebookincubator/create-react-app#getting-started) – How to create a new app.
- [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) – How to develop apps bootstrapped with Create React App.
Join our Telegram chat for support and feature requests - https://t.me/reactapp
## How to Customize
Create `webpack.config.js` file in the root of your project that extends the
default Webpack configuration. For example:
```js
module.exports = () => {
const [
browserConfig,
serverConfig,
] = require('react-app-tools/config/webpack');
return [
browserConfig,
{
...serverConfig,
plugins: {
...serverConfig.plugins.concat(
new LimitChunkCountPlugin({ maxChunks: 1 })
),
},
},
];
};
```
## Backers
Love **React App SDK**? Help us keep it alive by [donating](https://opencollective.com/react-app)
funds to cover project expenses!
## Contribute
Help shape the future of **React App SDK** by joining our [community](https://t.me/reactapp)
today, check out the [open issues](https://github.com/kriasoft/react-app/issues), submit [new
feature ideas](https://github.com/kriasoft/react-app/issues/new?labels=enhancement) and [bug
reports](https://github.com/kriasoft/react-app/issues/new?labels=bug), send us [pull
requests](CONTRIBUTING.md#submitting-a-pull-request)!
## License
[MIT](https://github.com/kriasoft/react-app/blob/master/LICENSE) © 2016-present Facebook, Kriasoft.
