Climatescape

Discover the organizations solving climate change

This is the source code behind climatescape.org, an open database of organizations leading the fight against climate change.

Developer Setup

Note: you need to be invited to our Airtable project to run this project locally. The process is really simple and we accept anyone who's interested in helping out. Simply fill out the Climatescape Contributor Application.

1. Follow these steps to get the project installed on your local dev machine.

   $ git clone https://github.com/climatescape/climatescape.org.git
   $ cd climatescape.org/site
   $ npm install

2. Copy your Airtable API key from this page: Airtable account
3. Create a .env.development file at the root of the project replacing YOUR_KEY_HERE by the key you copied in the previous step:

   $ cp .env.sample .env.development

4. Run the project like so:

   $ npm run develop

---

Bonus:

Want to preview changes on other devices?

Use the host option

$ npm run develop -- -H 0.0.0.0

Then, at the end of the command Gatsby will show you:
On Your Network: http://192.168.0.XX:8000/ You can now use this IP address / port to access your local environment from your phone. 👌

Bulding

Before submitting your Pull Request you should test that the project builds.

With Gatsby, some code can work on development mode but requires some adaptation for the build. For example when using window that is not accessible in SSR (Server-Side Rendering) mode.

To build the project locally:

1. Create a .env.production file at the root of the project replacing YOUR_KEY_HERE by the key you copied in the previous step:

   $ cp .env.development .env.production
   # OR
   $ cp .env.sample .env.production

2. Build the project using the npm run build command.

3. You can then run the website using the serve public command.

   Note: if you do not have the serve command you can install it using the npm install -g serve command

Architecture

Our site is built with Gatsby, a static site generator that uses React and GraphQL under the hood. Static site generators are used to create static websites (i.e. plain HTML/CSS/JS) from dynamic data at build time. Compare this to a traditional dynamic website that uses a runtime (PHP, Ruby, Python, etc) to generate pages on-demand.

In place of a custom backend, we use Airtable as our content management system and API layer. This allows us to iterate on our data schema and admin workflows extremely quickly, without having to write any code. We use a plugin called gatsby-source-airtable to expose our data to Gatsby's GraphQL layer.

We deploy to Netlify, a simple low-cost static web host. Deploys happen any time code is pushed to GitHub, whether to master or another branch. Additionally, we use Zapier to deploy once per day in order to publish new content even when code changes aren't happening.