Quickstart Guide

Follow this guide to get the OpenTelemetry E-commerce application running on your local machine. This is the application we’ll use throughout the workshop to learn how to send OpenTelemetry data to Sentry.

The application is designed to move between different modes of sending OpenTelemetry data to Sentry. This is not common practice, it is a demo application to help demonstrate these concepts. For the sake of simplicity, commands have been abstracted to run at the root of the repository.

Prerequisites

Before you begin, ensure you have the following:

Git
Node.js (version 18 or higher)
Free Sentry account - Create a new Node/Express project in Sentry

Setup Instructions

Clone the repository

git clone https://github.com/getsentry/sentry-build-otlp-workshop
cd sentry-build-otlp-workshop

Install all dependencies

Install dependencies for both backend and frontend:
Terminal window
```
npm run install:all
```
Configure Environment Variables

Copy the environment files for both API and frontend:
Terminal window
```
cp api/.env.example api/.env
cp frontend/.env.example frontend/.env
```
Create Neon Database

Create a Neon PostgreSQL database with interactive setup:
Terminal window
```
npm run db:init
```
This will create a new Neon database and automatically configure your DATABASE_URL in api/.env.

We’ll configure the Sentry endpoints in detail in the next module.

Initialize the Database

Create the database schema and seed it with product data:

npm run db:setup

You should see:

🗄️  Setting up database schema...
✅ Schema created successfully
🌱 Seeding database with sample data...
✅ Database seeded successfully
✨ Database setup complete!

Start the Application

Start the backend API in direct mode:
Terminal window
```
npm run demo:direct
```
In a new terminal, start the frontend:
Terminal window
```
npm run dev:frontend
```

What’s Available After Setup

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

A Vite-powered React frontend running at http://localhost:5173
A Node.js backend API running at http://localhost:3001
Full-stack JavaScript application ready for Sentry instrumentation

This setup will allow you to progress through the workshop and start implementing Sentry. This workshop will take you through setting up Error Monitoring, Logging, Tracing, and building visualizations in dashboards!

What’s Next?

Now that your application is set up, we’ll move on to:

Understanding Distributed Tracing - Learn about traces, spans, and how they connect
Configuring OpenTelemetry - Send backend traces to Sentry via OTLP
Connecting Frontend to Backend - Enable distributed tracing across your full stack
Using Sentry SDK with OTLP Integration - Use the Sentry SDK to send traces to Sentry via OTLP