The fabulous cat of blockchain websites.

---

Live | Styleguide | Beta | Gamma

---

Table of Contents

• Development
  • Install dependencies
  • Development build
• Continuous deployment: always be shipping
• Manual deployment
  • Prerequisite: authentication
  • Staging build & beta deployment
  • Production build & live deployment
• IPFS snapshots
• Coding conventions
  • (S)CSS
  • JavaScript
• Authors

Development

You need to have the following tools installed on your development machine before moving on:

• node.js & npm
• (optional) use Yarn instead of npm for faster dependency installations
• Ruby (for sanity, install with rvm)
• Bundler

Install dependencies

Run the following command from the repository's root folder to install all dependencies.

npm i && bundle install

or

yarn && bundle install

Development build

Spin up local dev server and livereloading watch task, reachable under https://localhost:1337:

gulp

Continuous deployment: always be shipping

The site gets built & deployed automatically via Travis. This is the preferred way of deployment, it makes sure the site is always deployed with fresh dependencies and only after a successful build.

Build & deployment happens under the following conditions on Travis:

• every push builds the site
• live deployment: every push to the master branch initiates a live deployment
• beta deployment: every new pull request and every subsequent push to it initiates a beta deployment

Manual deployment

For emergency live deployments or beta & gamma deployments, the manual method can be used. The site is hosted in an S3 bucket and gets deployed via a gulp task.

Prerequisite: authentication

To deploy the site, you must authenticate yourself against the AWS API with your AWS credentials. Get your AWS access key and secret and add them to ~/.aws/credentials:

[default]
aws_access_key_id = <YOUR_ACCESS_KEY_ID>
aws_secret_access_key = <YOUR_SECRET_ACCESS_KEY>

This is all that is needed to authenticate with AWS if you've setup your credentials as the default profile.

If you've set them up as another profile, say [bigchaindb] you can grab those credentials by using the AWS_PROFILE variable like so:

AWS_PROFILE=bigchaindb gulp deploy --live

In case that you get authentication errors or need an alternative way to authenticate with AWS, check out the AWS documentation.

Staging build & beta deployment

The staging build is a full production build but prevents search engine indexing & Google Analytics tracking.

# make sure your local npm packages & gems are up to date
npm update && bundle update

# make staging build in /_dist
gulp build --staging

# deploy contents of /_dist to beta
gulp deploy --beta

There's also a second beta deployment target called gamma under http://gamma.bigchaindb.com:

# build preventing search engine indexing & Google Analytics tracking
gulp build --staging

# deploy contents of /_dist to gamma
gulp deploy --gamma

Production build & live deployment

# make sure your local npm packages & gems are up to date
npm update && bundle update

# make production build in /_dist
gulp build --production

# deploy contents of /_dist to live
gulp deploy --live

IPFS snapshots

While the site isn't hosted on IPFS, we upload selected snapshots to it and keep a history of those hashes in the versions folder. By prepending every hash with e.g. https://ipfs.io/ipfs/ you can see all those versions.

To add a snapshot of the full site to IPFS manually run the ipfs.sh script:

./ipfs.sh

This will run a staging build, adds all contents of the output folder to IPFS and keeps track of this version via its IPFS hash in the versions folder.

Right now, this requires a running ipfs daemon on your machine before executing the script. On macOS it's as simple as:

brew install ipfs
ipfs daemon

Coding conventions

(S)CSS

Follows stylelint-config-bigchaindb which itself extends stylelint-config-standard.

Lint with stylelint in your editor or run:

npm test

JavaScript

It's a wild mess right now between old school vanilla js, jQuery and some ES2015 features. Don't bother with the old stuff unless dependency updates break it.

New js should follow eslint-config-ascribe. Linting in this repo is not setup for it yet.

Authors

• Matthias Kretschmann (@kremalicious) - BigchainDB