healthy-families-healthy-futures

The repository for the Healthy Families Healthy Futures website

Development

Setup

1. Run yarn install
2. Setup development environment variables by running yarn secrets

• You will be prompted for a password. Ask your EM to send it to you.
• NOTE: Windows users need to run yarn secrets:login and yarn secrets:sync instead

3. Run yarn start

4. Gatsby will run a development server at localhost:8000, complete with hot reloading

Commands

• yarn start - starts the development server at localhost:8000
• yarn build - builds the project and outputs into public/
• yarn clean - runs gatsby clean to fix weird issues with the development server
• yarn lint - runs eslint/prettier
• yarn secrets - syncs secrets from BitWarden

TypeScript

This codebase heavily features TypeScript, a superset of JavaScript that adds static typing to the language. This helps catch bugs at compile-time (typos, null checking, etc.) If you know how to write JavaScript, you can start writing TypeScript by changing .js and .jsx to .ts and .tsx!

To fully utilize the power of TypeScript, you will have to learn its type system. Use this as a cheat sheet for using TypeScript with React.

While you are encouraged to use TypeScript, you don't have to. Our codebase can be a mix of both TypeScript and JavaScript.

Other Notes

• Use [NAME]/[ISSUE_NUMBER]-[SHORT_DESCRIPTION] to label your feature branches

• Set up "Format on Save" on VSCode to save time

• Run lint often

Deployment

This repository is set up with Netlify, which creates preview deployments on every PR and deploys to the main deployment site on pushes to main.

Stack

• React.js - frontend components
• Gatsby - static site generation
• Contentful - content management
• eslint - linting
• prettier - formatting
• yarn - package management

Project Structure

• src/: Contains almost all of our front-end code. This is where we put our React components, Gatsby pages, and styles. It has four sub-folders:

  • components/: Contains reusable React components
  • css/: Contains CSS modules for components and pages
  • pages/: Contains top-level page components
  • utils/: Contains miscellaneous code

• static/: Stores static files like fonts or the favicon.

• gatsby-config.ts: Not a directory, but a file that defines plugins and other config for Gatsby (see Gatsby doc)