Skip to content

Commit

Permalink
Toolbar Feature Flags SvelteKit example (#932)
Browse files Browse the repository at this point in the history
### Description

Simple SvelteKit template that uses the [Vercel
Toolbar](https://vercel.com/docs/workflow-collaboration/vercel-toolbar)
and [Feature
Flags](https://vercel.com/docs/workflow-collaboration/feature-flags).

### Demo URL

https://toolbar-feature-flags-sveltekit.vercel.app/

### Type of Change

- [x] New Example
- [ ] Example updates (Bug fixes, new features, etc.)
- [ ] Other (changes to the codebase, but not to examples)

### New Example Checklist

- [ ] 🛫 `npm run new-example` was used to create the example
- [x] 📚 The template wasn't used but I carefuly read the [Adding a new
example](https://github.com/vercel/examples#adding-a-new-example) steps
and implemented them in the example
- [x] 📱 Is it responsive? Are mobile and tablets considered?
  • Loading branch information
dummdidumm authored Jul 3, 2024
1 parent 3255104 commit 7cf298f
Show file tree
Hide file tree
Showing 18 changed files with 2,878 additions and 0 deletions.
23 changes: 23 additions & 0 deletions toolbar/toolbar-feature-flags-sveltekit/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
node_modules

# Output
.output
.vercel
/.svelte-kit
/build

# OS
.DS_Store
Thumbs.db

# Env
.env
.env.*
!.env.example
!.env.test

# Vite
vite.config.js.timestamp-*
vite.config.ts.timestamp-*

.vercel
1 change: 1 addition & 0 deletions toolbar/toolbar-feature-flags-sveltekit/.npmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
engine-strict=true
57 changes: 57 additions & 0 deletions toolbar/toolbar-feature-flags-sveltekit/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
---
name: Vercel Toolbar Feature Flags SvelteKit Starter
slug: toolbar-feature-flags-sveltekit
description: Simple SvelteKit template that uses the Vercel Toolbar and Feature Flags.
framework: Svelte
useCase: Starter
css: None
deployUrl: https://vercel.com/new/clone?repository-url=https://github.com/vercel/examples/tree/main/toolbar/toolbar-feature-flags-sveltekit&project-name=toolbar-feature-flags-sveltekit&repository-name=toolbar-feature-flags-sveltekit&env=FLAGS_SECRET
demoUrl: https://toolbar-feature-flags-sveltekit.vercel.app/
relatedTemplates:
- toolbar-launchdarkly
- toolbar-optimizely
- toolbar-split
- toolbar-statsig
---

# Vercel Toolbar Flags SvelteKit Starter

Simple SvelteKit template that uses the [Vercel Toolbar](https://vercel.com/docs/workflow-collaboration/vercel-toolbar) and [Feature Flags](https://vercel.com/docs/workflow-collaboration/feature-flags).

## Demo

https://toolbar-feature-flags-sveltekit.vercel.app/

## How to Use

You can choose from one of the following two methods to use this repository:

### One-Click Deploy

Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=vercel-examples)

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/examples/tree/main/toolbar/toolbar-feature-flags-sveltekit&project-name=toolbar-feature-flags-sveltekit&repository-name=toolbar-feature-flags-sveltekit&env=FLAGS_SECRET)

### Clone and Deploy

Execute the following command to download the example into the `my-project` folder:

```bash
npx degit@latest https://github.com/vercel/examples/toolbar/toolbar-feature-flags-sveltekit my-project
```

After installing the dependencies using `pnpm install`, create a new project in your Vercel Dashboard. In your project's settings, create an environment variable called `FLAGS_SECRET`. The value must have a specific length (32 random bytes encoded in base64) to work as an encryption key. You can create one using node:

```bash
node -e "console.log(crypto.randomBytes(32).toString('base64url'))"
```

In your local environment, connect to your created project using `vercel link` and then pull your environment variables with `vercel env pull`.

Next, run SvelteKit in development mode:

```bash
pnpm dev
```

Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=vercel-examples) ([Documentation](https://vercel.com/docs/frameworks/sveltekit)).
25 changes: 25 additions & 0 deletions toolbar/toolbar-feature-flags-sveltekit/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
{
"name": "toolbar-feature-flags-sveltekit",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
},
"devDependencies": {
"@sveltejs/adapter-vercel": "^5.0.0",
"@sveltejs/kit": "^2.0.0",
"@sveltejs/vite-plugin-svelte": "^3.0.0",
"@vercel/toolbar": "^0.1.15",
"@vercel/flags": "2.6.0",
"svelte": "^4.2.7",
"svelte-check": "^3.6.0",
"tslib": "^2.4.1",
"typescript": "^5.0.0",
"vite": "^5.0.3"
},
"type": "module"
}
Loading

0 comments on commit 7cf298f

Please sign in to comment.