Skip to content

Commit

Permalink
Swap create-react-app for custom build
Browse files Browse the repository at this point in the history
  • Loading branch information
ablackledge committed Dec 7, 2017
1 parent 179de79 commit da6c49f
Show file tree
Hide file tree
Showing 166 changed files with 35,146 additions and 2,811 deletions.
6 changes: 6 additions & 0 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"presets":[
"es2015",
"react"
]
}
5 changes: 5 additions & 0 deletions .eslintrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"parser": "babel-eslint",
"rules": {
}
}
45 changes: 28 additions & 17 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,32 +1,43 @@
This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
BB React App Boilerplate
===================
This boilerplate is the basic setup for a react app, built with npm and webpack, you can build out a dev version and a production version.

Below you will find some information on how to perform common tasks.<br>
You can find the most recent version of this guide [here](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md).
----------


Also using react-router-dom:
https://reacttraining.com/react-router/web/
How to build
-------------

1) **'npm install'**

### `npm install`
2) **'npm run dev'** (this will build out the app, inc. styles and move images and plugins into the dist folder), you will then be able to visit localhost:8080 to see the site

Installs required modules
To build the prod version just run:
**'npm run build'**

### `npm start`
If you want to then test your prod app you can run a little node express server by:
**'node server'** or **'npm run serve'**
you will then be able to visit localhost:8080 to see the site

Runs the app in the development mode.

Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
Visual Regression Testing
-------
We use backstopjs on this project for visual testing.
There is already a backstop_data folder which holds the reference images, the test images are excluded from git

To re-add the base images for testing against (shouldn't have to do this often/at all) run:
'**gulp backstop-ref**'

### `gulp` to run the sass build alongside the react build

Builds the app for production to the `build` folder.

It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
To run a test go to your commandline and type '**gulp backstop-test**'
This will run the tests against the reference images and when finished it will open up a browser window to show the results. If there are differences you can either fix the css and run again or if the changes are intended go back to your commandline and run '**backstop approve**' which will then overwrite the ref images with the updated test images.


React Unit Testing
-------
We use Jest and Enzme to run react unit tests

To run the test run:
'**npm test**'

To check the coverage of the tests run:
'**test:coverage**'
1 change: 0 additions & 1 deletion _styles/_03-elements/icons.scss

This file was deleted.

5 changes: 0 additions & 5 deletions _styles/_05-components/header.scss

This file was deleted.

64 changes: 0 additions & 64 deletions _styles/_05-components/modal.scss

This file was deleted.

125 changes: 0 additions & 125 deletions _styles/_05-components/result.scss

This file was deleted.

25 changes: 0 additions & 25 deletions _styles/_05-components/results.scss

This file was deleted.

Loading

0 comments on commit da6c49f

Please sign in to comment.