@ied/image-posting.web

This project was bootstrapped with Create React App.

Usage no npm install needed!

<script type="module">
  import iedImagePostingWeb from 'https://cdn.skypack.dev/@ied/image-posting.web';
</script>

README

styled with prettier

This project was bootstrapped with Create React App.

How to initialize a new project ?

1. Clone this repository

git clone git@github.com:inextensodigital/react-boilerplate.git my-project

2. Switch the remote to your new project repository

git remote remove origin
git remote add origin git@github.com: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