This project was bootstrapped with Create React App.

How to initialize a new project ?

1. Clone this repository

git clone [email protected]:inextensodigital/react-boilerplate.git my-project

2. Switch the remote to your new project repository

git remote remove origin
git remote add origin [email protected]:inextensodigital/my-project.git

3. Create and protect dev and master branches

4. Edit .travis.yml config to match your bucket/repository

-  bucket: ied-react-boilerplate
+  bucket: ied-my-project
...
  on:
    all_branches: true
-   repo: inextensodigital/react-boilerplate
+   repo: inextensodigital/my-project

Code styling

We follow the javascript rules published by airbnb with some adjustments you can explore here.

CI/CD

In order to have a good continuous integration we aim to follow A successful Git branching model, by Vincent Driessen.

All branches on the upstream will be tested and deployed to an S3 bucket automatically in order to provide a testable version of the work in progress at any time.

Infrastructure

S3

All versions of an application are deployed to the same AWS S3 bucket at different paths.

my-bucket/master/FR
my-bucket/master/DK
my-bucket/dev/FR
my-bucket/dev/DK

Cloudfront

Cloudfront is responsible to expose the application to the web, each applications as its own distribution.

Libraries

A non exhaustive list of libraries we love, and we have crash tested.

Client

• redux Predictable state container for JavaScript apps
• react-relay: Relay is a JavaScript framework for building data-driven React applications
• react-transition-group: An easy way to perform animations when a React component enters or leaves the DOM
• react-router-dom: Declarative routing for React
• styled-components: Visual primitives for the component age 💅
• material-components: Modular and customizable Material Design UI components for the web
• date-fns: Modern JavaScript date utility library
• marked: A markdown parser and compiler. Built for speed

Server

• express: Fast, unopinionated, minimalist web framework for node
• graphql-tools: Build and mock your GraphQL.js schema using the schema language

Both

• faker: Generate massive amounts of fake data in Node.js and the browser
• query-string: Parse and stringify URL query strings