A frontend blog-style app that fetches data using the WP REST API.

Git Conventions

1 Topic = 1 Commit. Each commit should be attributed to one change.

Never commit half-done work. Commits are made to wrap up something completed, no matter how small the change.

Branches

There are two long-term branches - master and develop - that should never be removed. New branches should be merged into develop when complete. Once tested and confirmed to be stable, the develop branch should be merged into master with an updated semantic versioning tag.

Use NPM to bump the version and automatically stage a commit with the new version tag.

npm version [major|minor|patch]

Master contains production-ready code only, and is accessed at parisleaf.com

Develop contains potentially unstable code, and is accessed at staging.parisleaf.com.

These two branches of the frontend are hosted on the same Droplet in Digital Ocean, and deployed via dokku-alt.

Architecture

Server

Node.js v0.11 (harmony flag enabled)

Middleware

koa.js

Client

React.js is rendered server-side and then resumed on the client.

Content is fetched from a REST API endpoint. WP-API generates the JSON data for this endpoint on top of a standard WordPress installation. That project can be found at parisleaf/wp.parisleaf.com.

Tooling

browserify (CommonJS)

JavaScript is organized into CommonJS modules and bundled with browserify for the browser.

react-router

Routing is handled with react-router. Combined with Browserify and server-side rendering, this enables us to write isomorphic JavaScript. Learn more about isomorphic JavaScript applications.

6to5

JavaScript files in src are compiled with 6to5. This lets us use ES6 features like arrow functions and class syntax in today's JavaScript environments. 6to5 also handles React JSX transformation.

libsass

Stylesheets are compiled using the sassc implementation of libsass.

The Dockerfile takes care of installing sassc. You'll probably want to install it on your own machine, too. On OS X: brew install sassc

On Linux, it's a bit more complicated.

Development

1. Clone the repository to your development environment

git clone git@github.com:parisleaf/parisleaf.com.git

1. Duplicate .env.example and rename it to .env. Open the file and set your environment variables
2. Make sure you have XCode developer tools installed
3. Switch to the correct version of Node for this project (see package.json)
4. Install global NPM packages

npm install -g bower bunyan nodemon svg-sprite

1. Install local NPM dependencies

npm install

1. Install Bower dependencies

bower install

1. Build the application

make build

Running make again will cause only files with updated dependencies to rebuild.

1. Spin up the local dev server.

make watch

This will watch for changes, rebuild, and inject changes in the browser as files are changed. Your site should now be live on your local environment at localhost:3000.

If it's the first build, you can run make fast-build. This will build the application more quickly, but it won't check for changes — it runs every time. On subsequent builds, use make build.

Deployment

In both staging and production, this app is set up to deploy via dokku-alt. Pushing to dokku-alt will automatically build a new container based on whatever git commit you just pushed.

Production

In production, the master branch is deployed to Travis-CI. Travis will then deploy to dokku-alt if all tests pass:

1. git push
2. Check Travis-CI

Staging

In staging, the develop branch is deployed directly to dokku-alt:

1. git remote add dokku-staging dokku@parisleaf.com:staging
2. git push dokku-staging develop:master

Refer to dokku-alt's documentation for more information.

FAQ

Coming soon.