universal-react

One stack for browser, server, mobile

Techniques

• Truly universal architecture
  • code shared across platforms (browser, server, native mobile)
  • server side rendering
  • universal data fetching (unique approach without react-router)
  • an optional rendering to HTML files (for static hostings)
  • universal internationalization with runtime language switching
  • universal crash reporting via Sentry
  • universal forms with universal validation (universal ftw, yeah)
• Immutable app state
• API server backend
  • email and facebook login
  • declarative queryApi higher order component
  • user presence

Libraries

• react and react native
• redux
• babeljs
• immutablejs
• react-router
• react-router-redux
• react-intl
• redux-storage
• webpack
• expressjs
• eslint
• formatjs Universal internationalization.
• react-helmet A document head manager for React.
• webpack-isomorphic-tools
• chriso/validator.js For simple yet powerfull Este sync/async validation.
• bluebird Because it's better than native implementation.
• AVA Futuristic JavaScript test runner.
• SASS or plain CSS with autoprefixer
• uuid Generate RFC-compliant UUIDs in JavaScript.
• react-native-uuid node-uuid for react-native.
• gulp Aren't NPM scripts better? No.
• gulp-real-favicon Generate a multiplatform favicon with RealFaviconGenerator
• react-native-fbsdk For Facebook Login in React Native. Follow the readme install notes.
• And much more. Explore the repository.

Prerequisites

• node.js Node 6 with NPM 3 is required.
• gulp npm install -g gulp
• git git cmd tool is required

Optional

• Facebook SDK for iOS In order to make Facebook login work on iOS
• Facebook SDK for Android In order to make Facebook login work on Android
• react-native-cli npm install -g react-native-cli

If you are using different node versions on your machine, use nvm to manage them.

Start Development

• run gulp
• point your browser to localhost:3000

React Native: Getting Started

Dev Tasks

• gulp run web app in development mode
• gulp ios run iOS app in development mode
• gulp android run Android app in development mode
• gulp -p run web app in production mode
• gulp ava run ava unit tests
• gulp ava-watch continuous test running for TDD
• gulp eslint eslint
• gulp eslint --fix fix fixable eslint issues
• gulp messages-extract extract messages for translation
• gulp messages-check check missing and unused translations
• gulp messages-clear remove unused translations
• gulp favicon create universal favicon

Production Tasks

• gulp build -p build app for production
• npm test run all checks and tests
• node src/server start app, remember to set NODE_ENV and SERVER_URL
• gulp to-html render app to HTML for static hosting like Firebase

Customize App

• set name in package.json
• set locales, apiUrl, etc. in src/server/config.js
• remove unused locale-data from src/browser/index.js
• set routes in src/browser/createRoutes.js and src/native/routes.js
• set title, links, etc. in src/browser/app and src/native/app dirs
• change src/common/app/favicons/original/favicon.png, then gulp favicon
• delete unused app features, todos for example: src/{platform}/todos
• remove unused reducers from src/common/configureReducer.js
• modify your FB app_id e.g. for iOS

Flow

• install nuclide.io
• go to Nuclide settings, enable "Use the Flow binary included in each project"

Tips and Tricks

• Open developer console to check current app state.
• With functional programming (SOLID: the next step is Functional), we don't need DI containers. We can use plain old Pure DI. Check injectMiddleware in configureMiddleware.
• Learn immutable.js, for example Seq. Handy even for native arrays and objects. For example, get object values: Seq(RoomType).toSet().toJS()
• Recommended editor is Atom. Check settings.

FAQ

Why do I get EACCES error during npm install?

This indicates that you do not have permission to write to the directories that npm uses to store packages and commands. One possible solution is to change the permission to npm's default directory.

1. Find the path to npm's directory: npm config get prefix For many systems, this will be /usr/local
2. Change the owner of npm's directory's to the effective name of the current user

sudo chown -R `whoami` <directory>

Why does the CSS flicker when starting the app/refreshing it?

In dev mode, webpack loads all the styles inline, which makes them hot reloadable. This behaviour disappears in production mode (gulp -p).

How is React Native used in this project?

In the same way as any other React Native project is created via react-native init AwesomeProject. But thanks to the universal application design we can easily share modules across platforms.

Training

• learn-reactjs.com