https://github.com/60frames/react-boilerplate

Production-ready boilerplate for building universal web apps with React and Redux
https://github.com/60frames/react-boilerplate

babel boilerplate code-splitting css-modules dx es2015 javascript jest react react-boilerplate redux universal universal-applications webpack

Last synced: 23 days ago
JSON representation

Production-ready boilerplate for building universal web apps with React and Redux

• Host: GitHub
• URL: https://github.com/60frames/react-boilerplate
• Owner: 60frames
• License: mit
• Created: 2015-07-01T20:27:32.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2017-08-17T09:56:08.000Z (about 7 years ago)
• Last Synced: 2024-10-01T03:06:04.484Z (about 1 month ago)
• Topics: babel, boilerplate, code-splitting, css-modules, dx, es2015, javascript, jest, react, react-boilerplate, redux, universal, universal-applications, webpack
• Language: JavaScript
• Homepage: https://sixtyframes-react-boilerplate.herokuapp.com/
• Size: 616 KB
• Stars: 54
• Watchers: 7
• Forks: 12
• Open Issues: 14
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# 60fram.es React Boilerplate [![Build Status](https://travis-ci.org/60frames/react-boilerplate.svg?branch=master)](https://travis-ci.org/60frames/react-boilerplate) [![Coverage Status](https://coveralls.io/repos/github/60frames/react-boilerplate/badge.svg?branch=master)](https://coveralls.io/github/60frames/react-boilerplate?branch=master)

Production-ready boilerplate for building *universal* web apps with [React](https://github.com/facebook/react) and [Redux](https://github.com/reactjs/redux)

## tl;dr

```

$ git clone https://github.com/60frames/react-boilerplate.git

$ cd react-boilerplate

$ rm -r .git

$ cp ./server/_env ./server/.env

$ npm install

$ npm start

```

## Features

- ES2015/16 with [Babel](https://github.com/babel/babel)

- Universal rendering with support for data fetching *and code splitting*.

- Hot reloading on both client and *server*

- Locally scoped CSS with [CSS modules](https://github.com/css-modules)

- Scalable unit testing via [Jest](https://github.com/facebook/jest)

- Development and release builds with [Webpack 2](https://github.com/webpack/webpack)

- State management with [Redux](https://github.com/reactjs/redux)

- ...Just 4 commands

## Commands

### `npm start`

Serves the app in development mode

> NOTE: This is simply an alias for `npm run serve`.

### `npm test`

Runs unit tests

### `npm run build`

Builds the app ready for release

### `WEBPACK_DEV_SERVER=false npm run serve`

Serves the app in release mode

> NOTE: Requires you to first build the app with `npm run build`.

## Environment Variables

Environment variables are defined via Unix env vars and are documented in the [`./server/_env`](server/_env) file.

To avoid the hassle of having to define env vars on your local machine during development we recommend you simply rename the [`./server/_env`](server/_env) file to `./server/.env` which, in the absence of a predefined `NODE_ENV`, will be copied to your environment.

> NOTE: Any of the environment variables can be made available to the client by explicitly declaring them in the root [Html](src/components/html/Html.js) component. This extra step is required to prevent accidentally leaking sensitive data to the client.

## License

MIT