Skip to content
This repository has been archived by the owner on Mar 6, 2023. It is now read-only.

Archive of our wedding website, written with React, Gatsby, and Tailwind CSS

License

Notifications You must be signed in to change notification settings

mganjoo/alisha-and-milind-wedding

Repository files navigation

Alisha and Milind's Wedding Website

Netlify Status GitHub website tests This project is using Percy.io for visual regression testing.

🛠 Getting started

  1. Check out the repository and install dependencies.

    git clone git@github.com:mganjoo/alisha-and-milind-wedding.git
    cd alisha-and-milind-wedding/
    npm run bootstrap:ci
  2. Add Firebase credentials.

    Go to Firebase Console > Project Settings and scroll down to find the section listing key app credentials. Create files .env.development and .env.production (they will be ignored by Git) in the website/ directory of the project, with the following contents:

    GATSBY_FIREBASE_API_KEY="<apiKey from Firebase>"
    GATSBY_FIREBASE_AUTH_DOMAIN="<authDomain from Firebase>"
    GATSBY_FIREBASE_PROJECT_ID="<projectId from Firebase>"

    Note: you might also want to add configuration variables for the build and test stage of the project. See Configuration environment variables for available options.

  3. Start developing.

    Build website continuously:

    npm run start:website
  4. Start editing.

    The site will be running at http://localhost:8000, and the GraphiQL tool will be at http://localhost:8000/___graphql.

CSS Modules typings

This project uses CSS Modules within Gatsby for some components. To ensure typings are generated for these files, run npm run generate:csstypes from within the website/ folder.

⚙️ Netlify configuration environment variables

These options control how the Gatsby site gets generated. These options should only be set on Netlify in staging and production environments, never in CI or test environments.

  • DISABLE_DEMO_PAGES: When set to "1", disables building any demo pages in pages-demo/.
  • GATSBY_DISABLE_FULL_SITE: When set to "1", disables display of the full website.
  • GA_TRACKING_ID: Tracking code for Google Analytics. If unset, the website will build, but no analytics will be logged. It is better to set this on Netlify than in this repo.
  • GATSBY_GA_BRANCH: Corresponds to the "branch name" to use for Google Analytics. Only relevant if GA_TRACKING_ID is set.
  • GATSBY_USE_PROD_FIREBASE: When set to "1", uses the environment variables GATSBY_PROD_FIREBASE_* to configure Firebase instead of the GATSBY_FIREBASE_* variables listed in Getting Started. This enables writes to the production Firebase instance.

🧪 Testing

This project has Jest configured for unit tests and Cypress for end-to-end tests. They also include visual regression tests set up using Percy.

Cypress configuration variables:

  • SEED_URL: Variable to use for seeding data for tests. This corresponds to function seedInvitations.

To run the entire test suite (unit + e2e) locally

cd website
npm run test

To open the Cypress app locally

cd website
npm run develop
npm run cy:open

🔄 Continuous integration

The entire test suite is also run on CI servers, using the test:ci NPM script.

About

Archive of our wedding website, written with React, Gatsby, and Tailwind CSS

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published