Awesome

<h1 align="center"> React App SDK<br> <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> <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> <a href="https://opencollective.com/react-app"><img src="https://opencollective.com/react-app/backers/badge.svg?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> </h1>

Everything you love about Create React App plus server-side code support (SSR, GraphQL API, etc) and config overrides (Babel, Webpack, etc.). See the demo project.

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

.
├── 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(<App />)
│   │   ├── api.js              #   - GraphQL API endpoint
│   │   └── index.js            #   - Node.js app entry point
│   └── index.js                # Client-side app entry point, e.g. ReactDOM.hydrate(<App />, container)
└── package.json                # List of project dependencies and NPM scripts

`package.json`

{
  "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

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

ReactDOM.hydrate(<App />, document.getElementById('root'));

`src/server/index.js` - Server-side rendering and/or API endpoint

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(`
    <html>
      <body>
        <div id="root">${ReactDOMServer.renderToString(<App />)}</div>
        ${stats.entrypoints.main.assets.map(
          src => `<script src="${src}"></script>`
        )}
      </body>
    </html>
  `);
});

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:

$ npm install
$ npm start

Then open http://localhost:3000/ to see your app.<br> 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 – How to create a new app.
User Guide – How to develop apps bootstrapped with Create React App.

Join our Telegram chat for support and feature requests - https://t.me/reactapp

<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>

How to Customize

Create webpack.config.js file in the root of your project that extends the default Webpack configuration. For example:

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 funds to cover project expenses!

Contribute

Help shape the future of React App SDK by joining our community today, check out the open issues, submit new feature ideas and bug reports, send us pull requests!

Awesome

Directory Layout

package.json

src/index.js - Client-side rendering