Skip to content

Latest commit

 

History

History
132 lines (81 loc) · 4.25 KB

local-development.md

File metadata and controls

132 lines (81 loc) · 4.25 KB

Local Development Guide:

Summary

The develop branch is our source of truth. Fork from develop, create your feature branch, and when your PR is merged, develop will automatically merge into the main branch for deployment to production. Consider staging your frontend to test changes after opening your PR.

To run Bloom's frontend:

  1. Install prerequisites
  2. Run Bloom's backend locally
  3. Configure environment variables
  4. Install dependencies
  5. Run the app with yarn

To test the frontend:

  • Run unit tests
  • Run integration tests for fullstack contributions. *requires populating your database first
  • Verify happy paths

Additional Resources:

  • Read our Bloom Tech Wiki Docs for overviews of key concepts, software architecture, staging directions, and design guides.

Prerequisites

  • NodeJS 20.x
  • Yarn v1.x

Recommended Minimum System Requirements:

  • CPU: Quad-core 2.5 GHz (i5/Ryzen 5)
  • Memory: 16 GB RAM
  • Storage: 512 GB
  • OS: Linux, macOS, Windows, or WSL2 (latest versions)
  • Internet Connection: For accessing dependencies and external APIs/services

Run Local Backend

See Bloom's backend repo for instructions. You will need to run this in the background for the frontend to be functional.

Configure Environment Variables

See configure-env.md for instructions on configuring environment variables.

Install Dependencies

Install dependencies by running:

yarn

Run Locally with yarn

Start the app in development mode (with hot-code reloading, error reporting, etc.):

yarn dev

Go to http://localhost:3000

Format and Linting

Linting and formatting are provided by ESLint and Prettier. We recommend VSCode users to utilize the workspace settings in .vscode/settings.json and install the extensions in .vscode/extensions for automated consistency.

Additionally, this application uses Pre-commit and husky to run formatting and linting before each commit is pushed. If an error is thrown when pushing a commit:

  • check the output logs for linting errors - fix all linting errors before committing.
  • check file changes for new formatting changes - if formatting fixes were applied during pre-commit, the original changes will now be staged, and new formatted changes will need to be staged and committed.

We strongly recommend maintaining consistent code style by linting and formatting before every commit:

Run linting:

yarn lint

Run lint and fix:

yarn lint:fix

Run format and fix:

yarn format

Build for Production

For testing the production build. This will be run automatically during deployments.

yarn build

Unit Testing

The frontend uses Jest for unit testing. Simply run:

yarn test

To have your unit tests running in the background as you change code:

yarn test:watch

Cypress Testing

Cypress e2e integration tests are required for most fullstack contributions. See configure-cypress.md for Cypress set-up instructions.

Happy Paths

In addition to unit and integration testing, contributors should ensure their happy paths (the ideal, error-free path for a user to complete a task or achieve a goal in Bloom). View our Happy Paths here.

Git Flow and Deployment

The develop branch is our source of truth, not main.

Create new branches from the develop base branch. There is no need to run the build command before pushing changes to GitHub, simply push and create a pull request for the new branch. GitHub Actions will run build and linting tasks automatically. Rebase and merge feature/bug branches into develop.

This will trigger an automatic deployment to the staging app by Heroku.

When changes have been tested in staging, merge develop into main. This will trigger an automatic deployment to the production app by Heroku.