Quickstart Guide

Follow this guide to get up and running with the workshop environment in the fastest way possible.

Prerequisites

Before you begin, ensure you have the following installed:

• Git
• Node.js (version 18 or higher)
• pnpm (recommended package manager)

Additionally, you’ll need a Sentry account to follow along with the tracing and monitoring portions of this workshop:

• Sign up for a free Sentry account if you don’t already have one.

Pro Tip

We recommend setting up two separate projects in your Sentry account: one for the frontend (React) and one for the backend (Express). This allows you to efficiently monitor each project more clearly. We’ll be configuring our SDKs in the workshop, so all you need to do is create the new projects and have your DSNs handy.

Setup Instructions

1. Fork the repository

   Go to https://github.com/getsentry/sentry-build-frontend-performance-workshop-app and click the “Fork” button in the top right. We’ll do this instead of simply cloning the repo because we’ll demo features of Sentry’s AI agent, Seer, which can open PRs to fix code for us.

   

2. Leave the fork network

   Go to the settings of your forked repo, scroll all the way down to the Danger Zone, click “Leave fork network”, and follow the prompts to convert your forked repo into a standalone repo, all nice and isolated from the original.

   

3. Clone your fork into a directory we’re going to call unborked

   HTTPS

   git clone https://github.com/<your-username>/sentry-build-frontend-performance-workshop-app.git unborked
   cd unborked

   SSH

   git clone git@github.com:<your-username>/sentry-build-frontend-performance-workshop-app.git unborked
   cd unborked

4. Install dependencies

   Installing dependencies

   pnpm install && pnpm playwright:install

5. Set up environment variables

   The project uses a turborepo monorepo structure with apps/web (frontend) and apps/api (backend).

   Frontend (apps/web/.env):

   Create the frontend environment file:

   Creating the frontend environment file

   cat > apps/web/.env << 'EOF'
   VITE_API_BASE_URL=http://localhost:3001
   EOF

   Note

   We’ll add the Sentry DSN to this file in the next module when we instrument the frontend.

   Backend (apps/api/.env):

   Option A: Automatic Database setup (Recommended)

   Spin up a temporary Postgres database using Neon:

   Creating a temporary Postgres database using Neon

   pnpm db:new

   This will automatically generate a .env file inside apps/api with a DATABASE_URL environment variable. You can claim it to your account later if you want, but it’s a good playground for this workshop.

   Option B: Manual Database Setup

   If you prefer to use your own PostgreSQL instance (local or hosted via Neon/Supabase), create the backend environment file:

   Creating the backend environment file

   cat > apps/api/.env << 'EOF'
   DATABASE_URL=postgresql://user:password@localhost:5432/unborked
   EOF

   Replace user:password@localhost:5432/unborked with your actual database connection string.

   Note

   We’ll add the Sentry DSN to this file in the next module when we instrument the backend.

6. Run database migrations and seed data

   From the root unborked directory:

   Running database migrations and seed data

   pnpm db:migrate
   pnpm db:seed

7. Start the development servers

   This single command starts both frontend and backend:

   Starting the development servers

   pnpm dev

8. Access the application

   The project will now be running:

   • Frontend: http://localhost:4173
   • Backend API: http://localhost:3001

What’s Available After Setup

Once you’ve completed the setup, you’ll have access to:

• E-commerce Frontend: Vite + React + TypeScript application with product browsing, cart, and checkout
• Backend API: Node.js + Express with Drizzle ORM connected to PostgreSQL
• Full-Stack Application: Ready for Sentry performance and error monitoring instrumentation

This setup will allow you to progress through the workshop and start implementing Sentry. This workshop will take you through setting up Performance Monitoring, Web Vitals tracking, Error Monitoring, Session Replay, Distributed Tracing, and building production-ready dashboards and alerts!