iam4x/futurerx

:rocket: The futuristic stack to create universal React applications with MobX as state manager

⚛ futureRX

🚀 The futuristic stack to create universal React applications with MobX as state manager. With supporting async data fetching out of the box on server side rendering.

WARNING: This is a proof of concept running on bleeding edge libraries, it has not been running in production yet. If you do contact me.

This project aim frontend applications which are using an external API to work with data. This boilerplate does not include an API with it to fetch/persist data.

Libraries used

nodejs ^6.2 / npm ^3.9

• react

  • mobx
  • mobx-store
  • react ^15
  • react-router ^2.0.0
  • react-hot-loader ^3.0.0-beta
  • why-did-you-update

• css styles

  • css-modules 🌟
  • postcss ^5.0.21
  • postcss-import ^8.1.2
  • postcss-url ^5.1.2
  • autoprefixer ^6.3.6
  • precss ^1.4.0
  • isomorphic-style-loader ^1.0.0
  • Supports also global CSS for real world usage with:
    • extract-text-webpack-plugin ^1.0.1
    • style-loader ^0.13

• server side rendering

  • koa ^2.0.0

• testing tools

  • ava ^0.15.2
  • jsdom ^9.4.0
  • enzyme ^2.3.0
  • chai-enzyme ^0.5.0
  • faux-jax ^5.0.1
  • sinon ^1.17.4
  • sinon-chai ^2.8.0
  • nyc ^7.0.0-alpha.5

• dev/building tools

  • webpack ^2.1.0-beta.15
  • webpack-hot-middleware
  • webpack-dev-middleware
  • babeljs ^6.9
  • flowtype (via babel-plugin-typecheck)
  • browser-sync

Setup

• $ git clone -o upstream https://github.com/iam4x/futureRX.git [myApp]
• $ cd [myApp] && npm install

Run

• dev

  • $ npm run dev OR
  • $ PORT=xxxx npm run dev
  • (Append ?debugRender to your URL to enable why-did-you-update)

• test

  • $ npm test OR
  • $ npm test -- --watch

• build

  • $ NODE_ENV=production npm run build
  • $ NODE_ENV=production node dist/server

Update

• $ git fetch upstream
• $ git merge upstream/master
• $ npm install

TODO

• allow override of listening ports via config (7e9ae4a)
• styles with css-modules and global styles (#1)
• test with ava and airbnb-enzyme (#2)
• webpack build config
• production server optimization
• refactor server code

Learn more

• Official ReactJS website
• Official ReactJS wiki
• Learn ES6
• ES6 Features

futurerx's Issues

Support to send components' css with the server html

The components' CSS should be added to the HTML that the server renders otherwise the user view an unstyled version of the app, very awful :D

How about using preact instead of react?

How about using preact instead of react ? That's what I'm thinking about recently.
And I prefer to Semantic-UI rather than bootstrap.
What's your opinion? Thanks.

Server html differs from client html

Seems that universal support is broken

warning.js:44 Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) " data-reactid="1"><div data-reactid="2"
 (server) " data-reactid="1"><nav class="navbar nawarning @ warning.js:44_mountImageIntoNode @ ReactMount.js:473mountComponentIntoNode @ ReactMount.js:112perform @ Transaction.js:138batchedMountComponentIntoNode @ ReactMount.js:126perform @ Transaction.js:138batchedUpdates @ ReactDefaultBatchingStrategy.js:63batchedUpdates @ ReactUpdates.js:98_renderNewRootComponent @ ReactMount.js:285_renderSubtreeIntoContainer @ ReactMount.js:371render @ ReactMount.js:392_callee2$ @ universal-render.js:127tryCatch @ runtime.js:62invoke @ runtime.js:336prototype.(anonymous function) @ runtime.js:95step @ universal-render.js:41(anonymous function) @ universal-render.js:41(anonymous function) @ universal-render.js:41_default @ universal-render.js:245(anonymous function) @ index.js:31(anonymous function) @ app-DEFAULT.js:4730__webpack_require__ @ app-DEFAULT.js:654fn @ app-DEFAULT.js:84(anonymous function) @ multi_app:4(anonymous function) @ app-DEFAULT.js:10674__webpack_require__ @ app-DEFAULT.js:654(anonymous function) @ app-DEFAULT.js:701(anonymous function) @ app-DEFAULT.js:704
client.js:58 [HMR] connected