React Starter

Introduction

This is the project scaffold we use at Station Five for our front end projects. It sets a structure for our applications, naming conventions, architectural patterns, abstractions and methodology.

At Station Five we follow Functional Programming practices and so this projects aims to be as functional as JavaScript allows.

What's the stack?

This project uses:

• Yarn: App Package Manager. Go to Docs
• React: App View framework. Go to Docs
• Redux: App State Manager. Go to Docs
• Redux Sagas: App side effect and business logic library. Go to Docs
• Reselect: App data store selection library. Go to Docs
• Mori: Persistent Immutable Data Structure. Go to Docs
• Monet: Functional Programming toolset. Go to Docs
• Storybook: UI development environment for UI components. Go to Docs
• Webpack: App bundler and development server. Go to Docs
• Bitbucket Pipelines: Yml file for bitbucket pipelines Go to Docs
• ESLint: JavaScript Linter configured with Babel, AirBnB, React, Jest, Flow, and Module Resolver Go to Docs

How to install

To initialise your project, make sure you have yarn and flow-typed installed, then run in your terminal:

./init.sh

This script will: install the latest version of all required packages (with a few exceptions that are held back) and locks down their versions, installs flow-typings, and detaches and creates a new git repository,

How to start developing

To start a localhost server with hot-reloading:

yarn dev

Storybook

To display all the components in the storybook simply run:

yarn storybook

Test

All tests are written using Jest. To run all test simply run:

yarn test

Check

Javascript linting with eslint and flow type checking:

yarn run check

Build

To build the full project just run:

yarn build