⚛ 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