Boxdeluxe 2019

This repository contains the Static Site code for rendering CMS data held in your Contentful account.

Table of contents

• Boxdeluxe.io
  • Table of contents
  • Installation
  • Project Folder Structure
  • Available Tasks
  • Environment Variables
  • Development
    • Watching for Changes
    • Git Hooks
  • Deployment
  • Learn Gatsby

Installation

If not already set up, install node version manager to manage your node version.

Then run the following commands from your terminal application

# use the correct node version
nvm use

# install yarn globally against this node version
npm i -g yarn

# install the dependencies
yarn install

# start the gatyby server on port 8000
yarn run dev

Project Folder Structure

A quick look at the top-level files and directories you'll see in a Gatsby project.

.
├── .vscode
├── node_modules
├── src
├── .gitignore
├── .nvmrc
├── .stylelintrc.js
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package.json
└── README.md
└── yarn.lock

1. .vscode: Debugger Presets for vscode. They will appear as options in the debug dropdown in vscode.

2. /node_modules: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed.

3. /src: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. src is a convention for “source code”.

4. .gitignore: This file tells git which files it should not track / not maintain a version history for.

5. .nvmrc: Runtime configuration for NVM. NVM is used to manage and switch between node js versions used on each project.

6. .stylelintrc.js: Contains linting rules for the SCSS code. This helps keep the SCSS files consistently formatted Automatatically.

7. gatsby-browser.js: This file is where Gatsby expects to find any usage of the Gatsby browser APIs (if any). These allow customization/extension of default Gatsby settings affecting the browser.

8. gatsby-config.js: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the config docs for more detail).

9. gatsby-node.js: This file is where Gatsby expects to find any usage of the Gatsby Node APIs (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process.

10. gatsby-ssr.js: This file is where Gatsby expects to find any usage of the Gatsby server-side rendering APIs (if any). These allow customization of default Gatsby settings affecting server-side rendering.

11. LICENSE: Gatsby is licensed under the MIT license.

12. package-lock.json (See package.json below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. (You won’t change this file directly).

13. package.json: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project.

14. README.md: A text file containing useful reference information about your project.

15. yarn.lock: A lockfile for capturing the exact dependency versions in order to reproduce the build conditions across environments.

Available Tasks

To start the Gatsby live reload server and listen for changes simply run

yarn develop

To build the app for production

yarn build

To serve the app in production more

yarn serve

To run the tests

yarn test

Environment Variables

in order to return data from contentful we need to supply a spaceIdand an accessToken. These values are available from your Contentful Dashboard.

These keys and their values can be added to a contentful.json file. They can also be exported to your shell environment which will overwrite the values stored in the contentful.json

The options are

# Exporting these values to your shell environment will overwrite those in contenful.json
CONTENTFUL_SPACE_ID
CONTENTFUL_DELIVERY_TOKEN

see gatsby-config.js for details.

Development

Watching for Changes

To run Gatsby and reload when the source files are changes you can run the following from the root directory

yarn develop

Git Hooks

When attempting to commit files in this repository, some tasks will automatically run to ensure a consistently high level of code quality:

• JavaScript files (.js):

  • runs eslint and automatically fixes auto-fixable issues (see related JS guidelines here)

If any of the tasks fail (which means your code cannot be automatically fixed by the linting tools or the test suite is failing), your commit will be aborted.

Deployment

hosted on netlify

Learn Gatsby

Looking for more guidance? Full documentation for Gatsby lives on the website. Here are some places to start:

• For most developers, we recommend starting with our in-depth tutorial for creating a site with Gatsby. It starts with zero assumptions about your level of ability and walks through every step of the process.

• To dive straight into code samples, head to our documentation. In particular, check out the Guides, API Reference, and Advanced Tutorials sections in the sidebar.