Airbyte Embedded React Demo

A modern React implementation of the Airbyte Embedded sample application with a clean, light theme and modern UI/UX.

Prerequisites

Airbyte Credentials

To use Airbyte Embedded, you must have an active Airbyte Cloud or OSS instance with Embedded enabled. Please contact sales if you would like to sign up for Airbyte Embedded.

Once you have your Airbyte instance available, log in and note down the following values:

• Organization ID: Unique identifier to your Airbyte instance (Settings > Embedded)
• Client ID: Unique API ID (Settings > Applications > Create Application)
• Client Secret: Secret key for authentication (Settings > Applications)
• External User ID: A unique identifier for each user (for testing, you may set it to 0)

Setup Instructions

1. Clone and Install

# Clone the repository
git clone <repository-url>
cd react-webc-embedded

# Install frontend dependencies
npm install

# Install backend dependencies
cd server
npm install
cd ..

2. Environment Configuration

Create a .env file in the server directory based on .env.example:

cd server
cp .env.example .env
cd ..

Edit the server/.env file and set your Airbyte credentials:

# Airbyte Embedded Configuration
ALLOWED_ORIGIN=http://localhost:5173
AIRBYTE_ORGANIZATION_ID=your_organization_id
AIRBYTE_CLIENT_ID=your_client_id
AIRBYTE_CLIENT_SECRET=your_client_secret

Setup an Amazon S3 bucket for storing data, then add the following values into the server/.env file:

Once added, run ./setup-s3.sh to configure the S3 destination. NOTE: only run this script once. Doing so multiple times will create multiple destinations in your Embedded instance.

3. Start Both Servers

Terminal 1 - Backend Server:

cd server
npm start

Terminal 2 - Frontend Server:

npm run dev

The application will be available at http://localhost:5173 The backend API will be running at http://localhost:3001

Usage

1. Login/Register: Enter your email address to login or create a new account
2. Connect Data: Once logged in, click "Connect Data" to open the Airbyte Embedded widget
3. Manage Connections: Use the widget to create and manage your data connections

Project Structure

src/
├── components/          # React components
│   ├── LoginForm.jsx   # Email login/registration form
│   ├── UserProfile.jsx # User dashboard with connect button
│   └── Toast.jsx       # Toast notification components
├── contexts/           # React contexts
│   └── AuthContext.jsx # Authentication state management
├── hooks/              # Custom React hooks
│   └── useToast.js     # Toast notification hook
├── services/           # API services
│   └── airbyteService.js # Airbyte API integration
├── App.jsx             # Main application component
├── main.jsx            # Application entry point
└── index.css           # Global styles and theme