40a/react-wildcat

An opinionated React environment.

React Wildcat

A new, opinionated React environment from the National Football League. Read more on Wildcat.

Todo

Add more documentation. So much to document...

Features

• dev tooling
  • Bundle-free development environment
  • Short and sweet time-to-dev (see Getting Started below)
  • Babel for on-the-fly component transpilation
  • react-transform-hmr for hot component reloading
  • jspm + SystemJS for client-side module resolving
  • Karma + Mocha + Chai + Sinon for unit tests
  • Istanbul for code coverage
  • Protractor + Mocha + Chai for e2e integration tests
  • eslint for static code analysis
• client
  • React 0.14 + React Router 1.0 on the cilent and server
  • Route-based lazy component loading with React Router + jspm
  • Radium for inline styling
  • Helmet for managing your document head
  • React Metrics for tracking analytics
  • Store-agnostic Prefetching for client data hydration
• server
  • Loads client dependencies from a centralized location (no more per-project bundles)
  • Koa + (optional) HTTP2 for fast file serving
  • TLS-only via secure HTTP
  • Optimized production workflow

Server Requirements

• Node v4.x (install via (n): n 4.x)
• npm v3.x (npm install -g npm)
• jspm v0.16.x (npm install -g jspm)

Client Requirements

• IE10+

Development environment

First time jspm users

For first-time jspm users, you will need to configure it to use GitHub:

• jspm registry config github

Follow the steps to enable GitHub access.

Getting started: docker development

Clone this repository.

Create the file /etc/resolver/dev with the following contents (requires root permission):

nameserver 127.0.0.1
port 53535

Run:

• cd example
• docker-compose up
• Open https://www.example.dev:3000

This will run the example wildcat project, with automatic file syncing in src/ and api/. The example/ folder is a great starting point to create your own project.

Getting started: local development

Clone this repository, then:

• make install
• cd example
• npm run dev
• Add the following to /etc/hosts:

127.0.0.1 www.example.dev
127.0.0.1 static.example.dev

• Open https://www.example.dev:3000
• Accept the SSL certificate

Note: You'll very likely need to increase the file watch limit. Follow these steps to do so.

Accepting the development SSL certificate:

While it is possible to run the environment with an untrusted SSL certificate, for best results you should have OS X trust the self-signed certificate. Here's how:

• Run the development environment
• Navigate to https://www.example.dev:3000
• Follow these steps: http://www.andrewconnell.com/blog/setup-self-signed-certificates-trusting-them-on-os-x
• Repeat the above steps for the static file server at https://www.example.dev:4000

Production environment

Wildcat is designed to run on two servers:

• A Node server which accepts HTTP requests and renders static markup
• (optional) A static file server that serves static assets (JavaScript files, CSS, images, etc)

This setup provides several benefits, including:

• A single point of origin for serving all web projects.
• A single point of origin for static file assets.
• Ownership of static asset file caching.
• Delta static asset cache purging.
• The ability to update static files without a server reboot.
• An (optional) use of HTTP2, including push support for static assets.

An example production setup with docker can be found in example/docker-compose.prod.yml. To run, use the command docker-compose -f docker-compose.prod.yml up.

Each server should have the required tools installed (see above). Each server is designed to run in its own environment. Below is an implementation reference to set up and run the web prototype:

Node server

Your app server environment must contain the following files and directories:

package.json
system.config.js
wildcat.config.js

cd path/to/project
npm install --production
jspm install
env PORT=80 STATIC_URL=https://static.example.com npm run prod

Static assets

Note: The provided static file server is an optional dependency. The app server is agnostic about what solution is provided to serve static assets. It only expects the correct files to live in the domain specified via your STATIC_URL environment variable.

Your static server environment must contain the following files and directories:

bin
bundles
favicon.ico
jspm_packages
public
system.config.js

Follow step one below to implement your own custom server, or skip to step 2 to use the bundled static asset server.

1. Custom static server

You will need to precompile the static assets:

cd path/to/project
npm install --production
jspm install
env STATIC_URL=https://static.example.com npm run preprod-static

2. Setting up the static file server

cd path/to/project
npm install --production
jspm install
env STATIC_URL=https://static.example.com npm run prod-static

Environment variables

LOGGING_HOST The graylog host to use to send server logs too.

License

MIT