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 pusher.json config to match your project infos

{
  "type": "front-end",
  "domain": "inextenso.io",
  "appName": "react-boilerplate",
  "env": ["fr", "dk"]
}

Sentry

If you're using this boilerplate you just need to update the config url from step 3, if you want to add Sentry to your project follow this guide.

How to ?

1. Add Raven to your project index.html, it's our client for sending reports to Sentry

+ <script src="https://cdn.ravenjs.com/3.18.1/console/raven.min.js" crossorigin="anonymous"></script>

2. Add Raven global to your .eslintrc

+ "globals": {
+   "Raven": true
+ }

3. Initialize Raven in your root index.js with the correct project url

+ if (process.env.NODE_ENV === 'production') {
+   const options = {
+     release: process.env.REACT_APP_RELEASE,
+     tags: {
+       'app.env': process.env.REACT_APP_ENV,
+       'app.release': process.env.REACT_APP_RELEASE,
+     },
+   }
+   Raven.config(
+     'https://[email protected]/226827',
+     options,
+   ).install()
+ }

4. Use componentDidCatch at the root component it will catch any error in the components tree

+ componentDidCatch = (error, info) => {
+   Raven.captureException(error, {
+     extra: info,
+   })
+   console.error(error, info)
+ }

Redux

If you're using Redux on your project you can add a middleware to get more insight.

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