Skip to content

Project Setup

Jump to bottom
F.S. Koulen edited this page May 17, 2023 · 12 revisions
Environment Variables 
# Set to false if you want to enable the PWA while developing locally
# NOTE: this should not be disabled in other environments
NEXT_PUBLIC_DISABLE_PWA=true
# URL of your Supabase instance (start up supabase locally if you're making changes to the database)
NEXT_PUBLIC_SUPABASE_URL=
# Anon key of your Supabase instance (can be retrieved from either your terminal where you've started your Supabase
# instance or through the settings on Supabase)
NEXT_PUBLIC_SUPABASE_ANON_KEY=
# Tells Cypress where the website is hosted
CYPRESS_BASE_URL=http://127.0.0.1:3000
# How long Cypress should wait for action before failing a test
CYPRESS_TIMEOUT_SECONDS=12
# The number of test retires when running `cypress run`
CYPRESS_RETRY_MODE_RUN=2
NPM Packages
  • firebase
  • next-pwa
  • @heroicons/react
  • sharp (for next.js image optimization)
  • react-hook-form
  • date-fns to format Date object
  • superjson to allow Date objects to be passed to getStaticProps

Supabase

  • supabase
  • @supabase/supabase-js
  • @supabase/auth-helpers-nextjs
  • @supabase/auth-helpers-react

Jest

  • jest
  • ts-jest

Prettier

  • eslint-config-prettier
  • husky (for pre-commit hook)
  • lint-staged (to run linters against staged files)
  • prettier
  • prettier-plugin-tailwindcss

Cypress

Redux

  • @reduxjs/toolkit
  • next-redux-wrapper
  • react-redux

Initial packages

  • @types/node
  • @types/react
  • @types/react-dom
  • autoprefixer
  • eslint
  • eslint-config-next
  • next
  • postcss
  • react
  • react-dom
  • typescript

https://github.com/ASVGay/the-rhapsodies/pull/56
This PR will set up Cypress with cypress-firebase for E2E or component testing.

  • Use cy:open to run the tests in the GUI and cy:run to run the tests in your CLI.
  • Before starting Cypress make sure to have done the following:
  1. Go to Authentication page of the Firebase Console and select an existing user to use as the testing account or create a new user. This will be the account which you use to login while running tests.
  2. Get the UID of the account you have selected and add it to your .env file with the name TEST_UID
  3. Insert the email and password of this account to your cypress.env.json file with the names user_email, and user_password.
  4. Insert the email and password of an account with the additional user property of isFirstLogin to true to the cypress.env.json file with the names user_first_time_email and user_first_time_password.
  5. Generate and download a service account as described in the firebase-admin setup documentation. Save this to a local file called serviceAccount.json. Make sure YOU DO NOT COMMIT THIS FILE (it is already in the .gitignore). Then set an environment variable name GOOGLE_APPLICATION_CREDENTIALS with the value being the complete path to the serviceAccount.json

You can now use the following commands in your tests: https://github.com/prescottprue/cypress-firebase/#docs

Packages that will be installed: cypress, cypress-firebase, dotenv.

Links

Generating TypeScript types

Supabase client

For row level security to work properly when fetching data client-side, you need to make sure to use the supabaseClient from the useSupabaseClient hook and only run your query once the user is defined client-side in the useUser() hook. [source]

Clone this wiki locally