https://github.com/devonchurch/kettle-corn
A static site generator for the Enhance Digital marketing site
https://github.com/devonchurch/kettle-corn
aws cdn gatsbyjs reactjs serverless static-site
Last synced: 5 months ago
JSON representation
A static site generator for the Enhance Digital marketing site
- Host: GitHub
- URL: https://github.com/devonchurch/kettle-corn
- Owner: devonChurch
- Created: 2017-09-30T03:58:16.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-09-09T02:15:20.000Z (over 7 years ago)
- Last Synced: 2025-03-28T07:44:05.805Z (about 1 year ago)
- Topics: aws, cdn, gatsbyjs, reactjs, serverless, static-site
- Language: JavaScript
- Homepage: https://enhancedigital.co.nz/
- Size: 21.3 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Kettle Corn
[](https://github.com/prettier/prettier)
[](http://commitizen.github.io/cz-cli/)
A **static site generator** for the [Enhance Digital](https://enhancedigital.co.nz/) marketing site.
The platform uses [GatsbyJS](https://www.gatsbyjs.org/) as the base and leverages [React](https://reactjs.org/) and [Styled Components](https://www.styled-components.com/).
We developed a [bespoke design pattern](https://enhancedigital.co.nz/styleguide/) using custom components and a [responsive flexible measurement](http://ami.responsivedesign.is/?url=https%3A%2F%2Fenhancedigital.co.nz%2F#) system.
## Infrastructure
The application was generated using **Serverless** principals, utilising *low cost*, *performant* and *scalable* systems within the **AWS** portfolio.
Utilising a comprehensive CI / CD pipeline, a low latency Front-end delivery system and a [micro service backend](https://github.com/devonChurch/sausage-sizzle).
The AWS infrastructure fed into both [Stage](http://stage.enhancedigital.co.nz/) and [Production](https://enhancedigital.co.nz/) environments allowing for *fast*, *stable* and *flexible* iterations.
## Installation
* Clone this repository
```
git clone https://github.com/devonChurch/kettle-corn.git
```
* Install project dependancies
```
npm install
```
* Build and open a local _development_ version of the application
```
npm start
```
## Testing
### Unit Tests
We use [Jest](https://facebook.github.io/jest/) and [Enzyme](http://airbnb.io/enzyme/) to unit test our *utilities* and *React* components. Unit tests are run as part of our CI / CD pipeline and on every `git push` as part of [Husy](https://www.npmjs.com/package/husky) *Git hooks* setup.
* Run unit tests
```
npm run test:unit
```
### Visual Regression Tests
As part of our *stage* and *production* deployments we run an *image diffing* sequence to ascertain visual changes in our application *(both good and bad)* between releases.
The system is built with [Puppeteer](https://github.com/GoogleChrome/puppeteer) taking screenshots of each page in a series of different sized *view ports*. From there we use [Resemble.js](http://huddleeng.github.io/Resemble.js/) to find any inconsistencies between the images. The results are then sent to the developer via a [CodeBuild](https://aws.amazon.com/codebuild/), [Lambda](https://aws.amazon.com/lambda/) and [SES](https://aws.amazon.com/ses/) pipeline which emails the visual summary using [Zurbs Foundation](https://foundation.zurb.com/emails/docs/) design pattern.
* Run visual regression tests
```
npm run screenshots:prep
npm run screenshots:create:development
npm run screenshots:compare
```
### End-to-End Tests
To test the *full stack* of the application we run set of custom [Puppeteer](https://github.com/GoogleChrome/puppeteer) sequences to ensure things like *form submissions* are working correctly. Integration tests are run as part of our CI / CD pipeline and on every `git push` as part of [Husy](https://www.npmjs.com/package/husky) *Git hooks* setup.
* Run integration tests
```
npm run test:e2e:development
```
**Note:** I have also added a [Cypress](https://www.cypress.io/) based system for *End-to-End* testing as part of an [exploratory experiment](https://github.com/devonChurch/banana-cake).