This guide will walk through the steps for getting the application up and running for local development. There are two development web servers that we will use during development:
The Gatsby development server will serve a copy of the full website, while Storybook will present the individual UI components used on the site.
There are two supported local development environments: one for macOS, and one for Docker (which runs on all platforms, including macOS).
Note that if you are switching between the two environments, you may need to completely delete the node_modules/ directory.
If you don’t have nvm installed, you can install it with Homebrew.
First, clone this repository with Git:
$ git clone git@github.com:ShelterTechSF/sheltertech.org.git
Then, in the newly created sheltertech.org directory, install and switch to the version of Node.js described in .nvmrc:
$ cd sheltertech.org
$ nvm install
$ nvm use
Whenever you work on this project, you should make sure you have the correct
version of Node.js activated by running nvm use within the sheltertech.org
directory.
Then install the Node.js dependencies:
$ npm install
To start the Gatsby development server, run:
$ npm run start
This will start the development web server at http://localhost:8000. The development server will automatically refresh your browser when any source file is modified.
To stop the development server, you can simply send an interrupt signal to the
npm run start command by pressing Control + C.
Storybook is a tool for developing reusable UI components. When developing a new component, it is recommended to develop it in Storybook first, since this encourages building it as a modular, isolated component before including it in the Gatsby-based site.
$ npm run storybook
This will start the development web server at http://localhost:6006. The development server will automatically refresh your browser when any source file is modified.
To stop the server, you can simply send an interrupt signal to the
npm run storybook command by pressing Control + C.
We strictly enforce code style using lint checks that run every time a pull request is submitted on GitHub. You should run the lint checks frequently while you are developing on the site so that you catch and fix lint issues before submitting a pull request.
To run the lint checks and automatically fix any issues that can be automatically fixed, run:
$ npm run lint:fix
First, clone this repository with Git:
$ git clone git@github.com:ShelterTechSF/sheltertech.org.git
Then, in the newly created sheltertech.org directory, install the Node.js dependencies using Docker:
$ cd sheltertech.org
$ docker-compose run --rm app npm install
To start the Gatsby development server, run:
$ docker-compose up app
This will start the development web server at http://localhost:8000. The development server will automatically refresh your browser when any source file is modified.
To stop the development server, you can simply send an interrupt signal to the
docker-compose up app command by pressing Control + C.
Storybook is a tool for developing reusable UI components. When developing a new component, it is recommended to develop it in Storybook first, since this encourages building it as a modular, isolated component before including it in the Gatsby-based site.
$ docker-compose up storybook
This will start the development web server at http://localhost:6006. The development server will automatically refresh your browser when any source file is modified.
To stop the server, you can simply send an interrupt signal to the
docker-compose up storybook command by pressing Control + C.
We strictly enforce code style using lint checks that run every time a pull request is submitted on GitHub. You should run the lint checks frequently while you are developing on the site so that you catch and fix lint issues before submitting a pull request.
To run the lint checks and automatically fix any issues that can be automatically fixed, run:
$ docker-compose run --rm app npm run lint:fix