React App SDK

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.
When you’re ready to deploy to production, create a minified bundle with npm run build.

npm start

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

^{How fast is React SSR?}

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!

Project Name	Stars	Repos Using This	Packages Using This	Most Recent Commit	Total Releases	Latest Release	Open Issues	License	Language
React App Rewired	9,404	2,532	997	3 months ago	75	February 15, 2022	13	mit	JavaScript
Override create-react-app webpack configs without ejecting
Scaffold Eth	8,545			2 days ago			60	mit	CSS
🏗 forkable Ethereum dev stack focused on fast product iterations
Winds	8,486			a year ago				bsd-3-clause	JavaScript
A Beautiful Open Source RSS & Podcast App Powered by Getstream.io
Craco	6,971	187	333	13 days ago	72	July 07, 2022	24	apache-2.0	TypeScript
Create React App Configuration Override, an easy and comprehensible configuration layer for Create React App.
Create React Library	4,784	7	23	16 days ago	50	June 01, 2020	125		JavaScript
CLI for creating reusable react libraries.
React Gh Pages	4,769			9 days ago			22		TypeScript
Deploying a React App (created using create-react-app) to GitHub Pages
React Firebase Starter	4,447		2	2 months ago	25	July 22, 2016	135	mit	JavaScript
Boilerplate (seed) project for creating web apps with React.js, GraphQL.js and Relay
Create React App Typescript	3,769		1	4 years ago	4	January 25, 2018	119		JavaScript
DEPRECATED: Create React apps using typescript with no build configuration.
Serverless Stack Com	3,654			a day ago			122	mit	SCSS
An open source guide for building and deploying full-stack apps using Serverless and React on AWS.
Create React App Buildpack	3,328			9 months ago			14	mit	Shell
⚛️ Heroku Buildpack for create-react-app: static hosting for React.js web apps

React App

React App SDK

Directory Layout

package.json

src/index.js - Client-side rendering

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