- Features
- Requirements
- Getting Started
- Application Structure
- Development
- Routing
- Testing
- Configuration
- Production
- Deployment
- node
^5.0.0
(6.11.0
suggested) - yarn
^0.23.0
or npm^3.0.0
-
Install dependencies:
yarn
ornpm install
-
Start Development server:
yarn start
ornpm start
While developing, you will probably rely mostly on npm start
; however, there are additional scripts at your disposal:
npm run <script> |
Description |
---|---|
start |
Serves your app at localhost:3000 and displays Webpack Dashboard |
start:simple |
Serves your app at localhost:3000 without Webpack Dashboard |
build |
Builds the application to ./dist |
test |
Runs unit tests with Karma. See testing |
test:watch |
Runs test in watch mode to re-run tests when changed |
lint |
Lints the project for potential errors |
lint:fix |
Lints the project and fixes all correctable errors |
Husky is used to enable prepush
hook capability. The prepush
script currently runs eslint
, which will keep you from pushing if there is any lint within your code. If you would like to disable this, remove the prepush
script from the package.json
.
The application structure presented in this boilerplate is fractal, where functionality is grouped primarily by feature rather than file type. Please note, however, that this structure is only meant to serve as a guide, it is by no means prescriptive. That said, it aims to represent generally accepted guidelines and patterns for building scalable applications. If you wish to read more about this pattern, please check out this awesome writeup by Justin Greenberg.
.
├── build # All build-related configuration
│ └── create-config # Script for building config.js in ci environments
│ └── karma.config.js # Test configuration for Karma
│ └── webpack.config.js # Environment-specific configuration files for webpack
├── server # Express application that provides webpack middleware
│ └── main.js # Server application entry point
├── src # Application source code
│ ├── index.html # Main HTML page container for app
│ ├── main.js # Application bootstrap and rendering
│ ├── normalize.js # Browser normalization and polyfills
│ ├── components # Global Reusable Presentational Components
│ ├── containers # Global Reusable Container Components
│ ├── layouts # Components that dictate major page structure
│ │ └── CoreLayout # Global application layout in which to render routes
│ ├── routes # Main route definitions and async split points
│ │ ├── index.js # Bootstrap main application routes with store
│ │ └── Home # Fractal route
│ │ ├── index.js # Route definitions and async split points
│ │ ├── assets # Assets required to render components
│ │ ├── components # Presentational React Components
│ │ ├── container # Connect components to actions and store
│ │ ├── modules # Collections of reducers/constants/actions
│ │ └── routes ** # Fractal sub-routes (** optional)
│ ├── static # Static assets
│ ├── store # Redux-specific pieces
│ │ ├── createStore.js # Create and instrument redux store
│ │ └── reducers.js # Reducer registry and injection
│ └── styles # Application-wide styles (generally settings)
├── project.config.js # Project configuration settings (includes ci settings)
└── tests # Unit tests
We use react-router
route definitions (<route>/index.js
) to define units of logic within our application. See the application structure section for more information.
To add a unit test, create a .spec.js
file anywhere inside of ./tests
. Karma and webpack will automatically find these files, and Mocha and Chai will be available within your test without the need to import them.
Build code before deployment by running npm run build
. There are multiple options below for types of deployment, if you are unsure, checkout the Firebase section.
- Login to Firebase (or Signup if you don't have an account) and create a new project
- Install cli:
npm i -g firebase-tools
- Login:
firebase login:ci
to generate an authentication token (will be used to give your CI environment rights to deploy on your behalf) - Set
FIREBASE_TOKEN
environment variable within your CI environment - Create a build script that does the following:
- Create a config file by calling
npm run create-config
- Install firebase tools by calling
npm i -g firebase-tools
- Call firebase deploy:
firebase deploy --project ${projectName}
(if you are using functions, make sure to first install dependencies usingnpm i --prefix functions
)
- Run
firebase:login
- Initialize project with
firebase init
then answer:
- What file should be used for Database Rules? ->
database.rules.json
- What do you want to use as your public directory? ->
build
- Configure as a single-page app (rewrite all urls to /index.html)? ->
Yes
- What Firebase project do you want to associate as default? -> your Firebase project name
- Build Project:
npm run build
- Confirm Firebase config by running locally:
firebase serve
- Deploy to firebase:
firebase deploy
NOTE: You can usefirebase serve
to test how your application will work when deployed to Firebase, but make sure you runnpm run build
first.