An Opinionated React Environment from the National Football League
GitHub - nfl/react-wildcat: An opinionated React environment.

DEPRECATED - React Wildcat - This react framework is no longer supported





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
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 + Webpack
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 6.x (install via (n): n 6.x)
npm v3.x (npm install -g npm)

Client Requirements

IE10+

Development environment
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
wildcat.config.js

cd path/to/project
npm install --production
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
public

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
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
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.
Contributing to this project
Please take a moment to review the guidelines for contributing.

Pull requests
Development Process

License
MIT

