Grove Portal UI

Overview

Grove Portal UI implements the interface for Grove's users and customers at portal.grove.city/.

This portal allows users to manage their Grove services, subscriptions, configurations and more.

• Development Quickstart
  • 0. Makefile
  • 1. Get Environment Variables
  • 2. Install Dependencies, Build & Run
  • 3. Open Application
• Run with Remix
• Deployment Workflow
• Development Details
  • Environment Configuration
  • Frontend Development
  • Backend
  • Stripe Webhook Forwarding

Development Quickstart

0. Makefile

Run the following to see helpers to get you started:

make todos

1. Get Environment Variables

Use the 1Password CLI:

op item get c5cretuyeauiubm3uaqojdy4zm --fields notesPlain --format json | jq -r '.value' > .env

Or download .env from 1Password

If the link ☝️ doesn't work for you, look for a file named Grove Portal - Portal UI - .env (PROD)

2. Install Dependencies, Build & Run

make portal_install_and_run

3. Open Application

• Visit http://localhost:3000

Run with Remix

Deployment Workflow

1. Test Locally: Test your changes locally before creating a PR.
2. Test in Preview: Push your feature branch and create a PR. CD will automatically deploy via Vercel to a preview environment
3. Deploy to PROD: Create a PR into main. CD will automatically deploy to https://portal.grove.city/.
4. Test in Main: Test your changes in the main environment to ensure everything is working as expected.

Development Details

Environment Configuration

Make sure to get the .env from 1password.

You can download it with the following command if you have the 1password CLI:

op item get c5cretuyeauiubm3uaqojdy4zm --fields notesPlain --format json | jq -r '.value' > .env

If the link ☝️ doesn't work for you, look for a file named Grove Portal - Portal UI - .env (PROD)

Frontend Development

To run your Remix app locally, make sure your project's local dependencies are installed:

pnpm install

Then, built:

pnpm build

Afterwards, start the Remix development server like so:

pnpm dev

Open up http://localhost:3000 and you should be ready to go!

Backend

The default .env uses the PRODUCTION environment backend.

If you'd like to test in a NON-PRODUCTION environment, run the backend on localhost:4200.

A template .env can be found at .env.template

Stripe Webhook Forwarding

If you're testing the Stripe webhook flow, you must use the Stripe CLI to forward the webhook to your local environment.

Full instructions can be found on the Stripe documentation page.

You must initialize the Stripe CLI with your Stripe account:

stripe login

Then run the following to start forwarding webhooks:

source .env
stripe listen --forward-to http://localhost:3000/api/stripe/webhook --live=false

You will be given a webhook signing secret, set it in your .env file as STRIPE_WEBHOOK_SECRET.

IMPORTANT: It is generally recommended to use the test mode Stripe API key for forwarding webhooks, as this will not create any real subscriptions or charge any real money.

NOTE: The webhook handling code in this repo can be found here.