GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → kriasoft → React App

kriasoft / React App

Licence: mit
Create React App with server-side code support

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

reactwebpackreactjsgraphqlboilerplatetemplatebabelssrserver-side-renderingcreate-react-appisomorphicrelaysingle-page-appgraphql-js

Projects that are alternatives of or similar to React App

React Starter Kit
React Starter Kit — front-end starter kit using React, Relay, GraphQL, and JAM stack architecture
Stars: ✭ 21,060 (+3329.97%)
Mutual labels:  graphql, webpack, babel, boilerplate, ssr, relay
Project Webcube
Continuously updated JS infrastructure for modern web dev
Stars: ✭ 141 (-77.04%)
Mutual labels:  graphql, webpack, babel, isomorphic, boilerplate, server-side-rendering
Razzle Material Ui Styled Example
Razzle Material-UI example with Styled Components using Express with compression
Stars: ✭ 117 (-80.94%)
Mutual labels:  webpack, isomorphic, boilerplate, template, ssr, server-side-rendering
React Firebase Starter
Boilerplate (seed) project for creating web apps with React.js, GraphQL.js and Relay
Stars: ✭ 4,366 (+611.07%)
Mutual labels:  graphql, relay, create-react-app, boilerplate, ssr, server-side-rendering
Ssr Sample
A minimum sample of Server-Side-Rendering, Single-Page-Application and Progressive Web App
Stars: ✭ 285 (-53.58%)
Mutual labels:  graphql, webpack, babel, ssr, server-side-rendering
Rpg Boilerplate
Relay (React), Postgres, and Graphile (GraphQL): A Modern Frontend and API Boilerplate
Stars: ✭ 62 (-89.9%)
Mutual labels:  graphql, relay, webpack, ssr, server-side-rendering
React Core Boilerplate
Powerful ASP.NET Core 3 templates with React, true server-side rendering and Docker support
Stars: ✭ 169 (-72.48%)
Mutual labels:  webpack, boilerplate, template, ssr, server-side-rendering
React Isomorphic Boilerplate
🌟 An universal React isomorphic boilerplate for building server-side render web app.
Stars: ✭ 653 (+6.35%)
Mutual labels:  webpack, babel, isomorphic, boilerplate, server-side-rendering
Crate
👕 👖 📦 A sample web and mobile application built with Node, Express, React, React Native, Redux and GraphQL. Very basic replica of stitchfix.com / krate.in (allows users to get monthly subscription of trendy clothes and accessories).
Stars: ✭ 2,281 (+271.5%)
Mutual labels:  graphql, webpack, babel, ssr, server-side-rendering
Graphql Starter
💥 Monorepo template (seed project) pre-configured with GraphQL API, PostgreSQL, React, Relay, and Material UI.
Stars: ✭ 3,377 (+450%)
Mutual labels:  graphql, babel, boilerplate, template, relay
Js Stack Boilerplate
Final boilerplate code of the JavaScript Stack from Scratch tutorial –
Stars: ✭ 145 (-76.38%)
Mutual labels:  webpack, babel, boilerplate, server-side-rendering
Frontend Boilerplate
An ES20XX starter with common frontend tasks using Webpack 4 as module bundler and npm scripts as task runner.
Stars: ✭ 224 (-63.52%)
Mutual labels:  webpack, babel, boilerplate, template
Koa React Isomorphic
Boilerplate for Koa & React
Stars: ✭ 128 (-79.15%)
Mutual labels:  relay, webpack, boilerplate, ssr
React Redux Auth0 Kit
Minimal starter boilerplate project with CRA, React, Redux, React Router and Auth0 authentication
Stars: ✭ 115 (-81.27%)
Mutual labels:  webpack, create-react-app, babel, boilerplate
Tkframework
react + relay + redux + saga + graphql + webpack
Stars: ✭ 83 (-86.48%)
Mutual labels:  graphql, relay, webpack, babel
Preact Redux Isomorphic
preact-redux-isomorphic PWA SPA SSR best practices and libraries in under 80kB page size (for live demo click the link below)
Stars: ✭ 85 (-86.16%)
Mutual labels:  graphql, isomorphic, boilerplate, ssr
Serverless Prisma
AWS Serverless Prisma Boilerplate
Stars: ✭ 126 (-79.48%)
Mutual labels:  graphql, webpack, babel, boilerplate
Egg Vue Webpack Boilerplate
Egg Vue Server Side Render (SSR) / Client Side Render (CSR)
Stars: ✭ 1,302 (+112.05%)
Mutual labels:  webpack, isomorphic, ssr, server-side-rendering
React Universal Boiler
A bold way to begin your next great universal React application. Uses Webpack 3, React 16, Redux, and more for a great developer experience.
Stars: ✭ 65 (-89.41%)
Mutual labels:  webpack, boilerplate, ssr, server-side-rendering
Mern
🎉 This is boilerplate for MERN stack with integrations like Redux and SSR 🎉
Stars: ✭ 77 (-87.46%)
Mutual labels:  webpack, boilerplate, ssr, server-side-rendering
View All Similar Projects ➔

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:

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

Server-side rendering with React.js
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!

License

MIT © 2016-present Facebook, Kriasoft.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].