Gatsby App Starter Rest Api

The Not Todo Gatsby App is a Gatsby starter template that builds a 'not-todo' front-end on Gatsby and React, connecting to a REST API through a simple environment variable.

What is the Not Todo Gatsby App connected to a REST API?

This is a Gatsby starter template that creates the front-end for a Not Todo application—a variation on the classic todo app—where the data lives in a separate REST API. It accepts no direct data input; instead it reads an API environment variable that points to the REST API endpoint, and produces a static Gatsby site with React components and GraphQL queries. The template's companion REST API is available in the smakosh/not-todo-api repository, and the project itself is open source under the MIT License.

Key Features

• Gatsby framework — Uses Gatsby as the static site generator, so the output is pre-built static HTML with React hydration, giving fast initial page loads.
• React and GraphQL — The user interface is written in React, and data fetching is handled through Gatsby's GraphQL layer, which can consume the REST API data at build time.
• REST API integration — The template reads the API base URL from an environment variable named API, allowing the same front-end code to target different backends (development and production) without code changes.
• Environment configuration — Requires separate .env.development and .env.production files where you define the API variable, e.g., API=http://localhost:5000/api for local development.
• Yarn-based workflow — The project uses Yarn for dependency management; the setup commands are yarn to install, yarn start to run the development server, and yarn reset to clear the .cache and public directories.
• Companion REST API — A separate repository, smakosh/not-todo-api, contains the REST API implementation and its own documentation, so the full stack is available.
• MIT license — The source code is released under the MIT License, so it can be freely used, modified, and redistributed in personal or commercial projects.

Who is it for?

• Gatsby learners — Developers who want a realistic example of how to connect a Gatsby site to an external REST API, complete with environment variable handling and GraphQL queries.
• Demo and talk presenters — The template was created for a Gatsby talk, so it works as a live demo that can be opened in a browser with yarn start.
• Hobbyist developers — Anyone looking for a ready-to-run "not-todo" app starter can clone the repository, follow the setup steps, and instantly get a working front-end backed by a local API.

What can you do with it?

• Set up a development environment — Follow the steps: create .env.development with the API variable, run yarn to install dependencies, start the companion REST API, then run yarn start to launch the dev server.
• Build a static production site — By defining .env.production with a live API endpoint, you can generate a static site that uses that API for production data.
• Reset and rebuild — Use yarn reset to remove the .cache and public folders whenever you need a clean Gatsby build.

How does it work?

The template expects the REST API to be running separately; it then reads the API URL from the environment file and uses that as the data source during Gatsby's build process. The README outlines a four-step workflow: install Yarn if needed, create the environment file, start the API, and run yarn start for development. The reset script is available to clear generated folders.

FAQ

Is the Not Todo Gatsby App free to use?

Yes, the project is open source under the MIT License, meaning you can use, modify, and share it freely, including in commercial projects.

What environment variables are required?

You need to define API in your environment files. For local development, create a .env.development file with the value API=http://localhost:5000/api; for production, create .env.production with the appropriate API URL.

How do I start the app after cloning?

Run yarn to install dependencies, ensure your REST API is running, execute yarn start, and the Gatsby development server will start. The exact commands are listed in the README.

Where can I find the REST API used by this template?

The REST API is in a separate public repository named smakosh/not-todo-api, and its documentation is linked from the README. You must start it locally (or point the API variable to a deployed instance) before the Gatsby app can fetch data.

What does yarn reset do?

yarn reset deletes the .cache and public folders in the Gatsby project, which can clear any corrupted build cache and force a fresh build on the next yarn start or yarn build.