Skip to content
This repository has been archived by the owner on Oct 9, 2023. It is now read-only.

Commit

Permalink
Merge pull request #193 from snaplet/jgoux/make-quickstart-the-default
Browse files Browse the repository at this point in the history
make quickstart the default
  • Loading branch information
peterp authored Sep 20, 2023
2 parents 59e98fb + ce4d4b7 commit 151d651
Show file tree
Hide file tree
Showing 2 changed files with 28 additions and 24 deletions.
2 changes: 1 addition & 1 deletion docs/01-overview.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
slug: /
slug: /overview
---

# Overview
Expand Down
50 changes: 27 additions & 23 deletions docs/02-quickstart.md
Original file line number Diff line number Diff line change
@@ -1,18 +1,22 @@
---
slug: /
---

# Quickstart

Want production-like data to code against? You're in the right place!
Want production-like data to code against? You're in the right place!

Snaplet is a composable tool that helps developers manage the data in their development environments.
Snaplet is a composable tool that helps developers manage the data in their development environments.

**In this guide, we'll walk you through the process of:**
* Capturing your first snapshot with Snaplet.
* Installing the Visual Code extension.
* Installing the Visual Code extension.
* Restoring that snapshot to your development environment.

Let's get started.

## 1. Sign in to Snaplet Cloud
First off, you'll need a free Snaplet account. Sign up to [Snaplet Cloud](https://app.snaplet.dev).
First off, you'll need a free Snaplet account. Sign up to [Snaplet Cloud](https://app.snaplet.dev).

## 2. Snaplet onboarding and snapshot capture

Expand All @@ -22,13 +26,13 @@ The Snaplet onboarding should start automatically once signed in. Click '**Let's

### 2.1. Source database

The first step is to choose the **source database** you're going to connect to Snaplet. The source database is typically your production database.
The first step is to choose the **source database** you're going to connect to Snaplet. The source database is typically your production database.

:::tip

If you're uncomfortable connecting your actual production database, use a staging or QA database, or the Snaplet demo database.
If you're uncomfortable connecting your actual production database, use a staging or QA database, or the Snaplet demo database.

Supabase users should use the Supabase option and follow the [Supabase tutorial](/tutorials/supabase-clone-environments) for assistance.
Supabase users should use the Supabase option and follow the [Supabase tutorial](/tutorials/supabase-clone-environments) for assistance.

:::

Expand All @@ -38,7 +42,7 @@ For the purposes of this quickstart guide however we're going to guide you throu

You'll need to provide your database connection details. You can either do so individually for each of the values, or import a connection string.

Once done, test your connection and proceed.
Once done, test your connection and proceed.

![Select own database](/img/quickstart/03.png)

Expand All @@ -53,11 +57,11 @@ Once done, test your connection and proceed.

### 2.2. Subsetting

You will now be prompted to create a subset of your source database.
You will now be prompted to create a subset of your source database.

Subsetting is great for reducing the size of larger databases to a more managable size.
Subsetting is great for reducing the size of larger databases to a more managable size.

Select the starting table for your subset (typically your "primary" table, like users or customers) and select how many rows of data you'd like.
Select the starting table for your subset (typically your "primary" table, like users or customers) and select how many rows of data you'd like.

You can also opt not to subset at all. Select an option to proceed.

Expand All @@ -73,7 +77,7 @@ You can also not to transform the data. Select either option to proceed.

### 2.4. Snapshot capture

Snaplet's workers will now connect to your source database, copy the contents, and depending on what you've selected, subset and transform the data. The output of this process is a **database snapshot**, which you can then restore into your development environment to code against.
Snaplet's workers will now connect to your source database, copy the contents, and depending on what you've selected, subset and transform the data. The output of this process is a **database snapshot**, which you can then restore into your development environment to code against.

:::tip

Expand All @@ -88,11 +92,11 @@ Click the '**Install the Snaplet extension**' to get started. We'll come back to

## 3. Installing the Snaplet VS Code Extension

The [Snaplet VS Code extension](https://marketplace.visualstudio.com/items?itemName=snaplet.snaplet-vscode) brings Snaplet's functionality into your editor, and is the fastest and easiest way to use Snaplet to get production-like data in your development environment.
The [Snaplet VS Code extension](https://marketplace.visualstudio.com/items?itemName=snaplet.snaplet-vscode) brings Snaplet's functionality into your editor, and is the fastest and easiest way to use Snaplet to get production-like data in your development environment.

The extension automatically restores your latest snapshot tagged `main` into a cloud preview database. By pointing your local database connection string to the Snaplet proxy, you will code against the production-like data captured in your snapshot and restored to this preview database.
The extension automatically restores your latest snapshot tagged `main` into a cloud preview database. By pointing your local database connection string to the Snaplet proxy, you will code against the production-like data captured in your snapshot and restored to this preview database.

Practically, what does this mean? No more changing environment variables or schema drift - you're always coding against data that's up to date against your latest snapshot. It's also is fully branchable: when you branch your code, Snaplet branches your database, keeping the two in sync.
Practically, what does this mean? No more changing environment variables or schema drift - you're always coding against data that's up to date against your latest snapshot. It's also is fully branchable: when you branch your code, Snaplet branches your database, keeping the two in sync.

Let's go ahead and get started on installing the extension.

Expand All @@ -102,7 +106,7 @@ Need more detail? We've got a step-by-step guide to installing the VS Code exten

:::

### 3.1. Installation
### 3.1. Installation

Install the Snaplet VS Code extension from the VS Code Marketplace listing.

Expand All @@ -111,24 +115,24 @@ Need more detail? We've got a step-by-step guide to installing the VS Code exten
### 3.2. Link Your Snaplet Account

After installation, you'll find a Snaplet icon on the sidebar. Click the '**Connect to Snaplet**' button to open the Snaplet panel.

![Installed! Now to connect your extension to your Snaplet account.](/img/vsce-03.webp)

Allow VS Code to navigate to the Snaplet web app. and then select the appropriate project you want to use in the VS Code extension, and click '**Connect**'. If prompted, allow [app.snaplet.dev](http://app.snaplet.dev) to open VS Code.

![Pick the right project from inside Snaplet.](/img/vsce-04.webp)

Allow the Snaplet VS Code extension to open the URI when prompted.

![Let the Snaplet extension read your project info.](/img/vsce-05.webp)

Your Snaplet VS Code extension is now associated with your Snaplet account, and installed. You just need to update your local development database environment to point to the Snaplet proxy.

![All done!](/img/vsce-06.webp)

## 4. Configure Your Development Environment

We're almost done. The last thing left to do is to point your local development database environment variable to the Snaplet proxy.
We're almost done. The last thing left to do is to point your local development database environment variable to the Snaplet proxy.

Go to your active project workspace in your editor.

Expand Down

0 comments on commit 151d651

Please sign in to comment.