Skip to content

Commit

Permalink
update redis sveltekit template (#1065)
Browse files Browse the repository at this point in the history
### Description

- replace `@vercel/kv` by `redis`, supporting any marketplace Redis
providers
- replace Vercel KV copies by Redis
- update deploy url

### Demo URL

<!--
Provide a URL to a live deployment where we can test your PR. If a demo
isn't possible feel free to omit this section.
-->

### Type of Change

- [ ] 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
- [ ] 📚 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
- [ ] 📱 Is it responsive? Are mobile and tablets considered?
  • Loading branch information
correttojs authored Feb 10, 2025
1 parent 6a11d90 commit 2e244c4
Show file tree
Hide file tree
Showing 6 changed files with 101 additions and 42 deletions.
4 changes: 1 addition & 3 deletions storage/kv-redis-sveltekit/.env.example
Original file line number Diff line number Diff line change
@@ -1,4 +1,2 @@
KV_URL=
KV_REST_API_URL=
KV_REST_API_TOKEN=
KV_REST_API_READ_ONLY_TOKEN=
REDIS_URL=
14 changes: 7 additions & 7 deletions storage/kv-redis-sveltekit/README.md
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
---
name: Vercel KV for Redis SvelteKit Starter
name: Redis SvelteKit Starter
slug: kv-redis-sveltekit
description: Simple SvelteKit template that uses Vercel KV for Redis to track pageviews.
description: Simple SvelteKit template that uses Redis to track pageviews.
framework: Svelte
useCase: Starter
css: Tailwind
database: Vercel KV
deployUrl: https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fexamples%2Ftree%2Fmain%2Fstorage%2Fkv-redis-sveltekit&project-name=kv-redis-sveltekit&repository-name=kv-redis-sveltekit&demo-title=Vercel%20KV%20for%20Redis%20SvelteKit%20Starter&demo-description=Simple%20Svelte%20template%20that%20uses%20Vercel%20KV%20for%20Redis%20to%20track%20pageviews.&demo-url=https%3A%2F%2Fkv-redis-sveltekit.vercel.app%2F&demo-image=https%3A%2F%2Fkv-redis-sveltekit.vercel.app%2Fopengraph-image.png&stores=%5B%7B"type"%3A"kv"%7D%5D
database: Redis
deployUrl: https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fexamples%2Ftree%2Fmain%2Fstorage%2Fkv-redis-sveltekit&project-name=kv-redis-sveltekit&repository-name=kv-redis-sveltekit&demo-title=Vercel%20KV%20for%20Redis%20SvelteKit%20Starter&demo-description=Simple%20Svelte%20template%20that%20uses%20Vercel%20KV%20for%20Redis%20to%20track%20pageviews.&demo-url=https%3A%2F%2Fkv-redis-sveltekit.vercel.app%2F&demo-image=https%3A%2F%2Fkv-redis-sveltekit.vercel.app%2Fopengraph-image.png&products=%5B%7B"type"%3A"integration"%2C"group"%3A"redis"%7D%5D
demoUrl: https://kv-redis-sveltekit.vercel.app/
relatedTemplates:
- blob-starter
- postgres-starter
---

# Vercel KV for Redis SvelteKit Starter
# Redis SvelteKit Starter

Simple SvelteKit template that uses [Vercel KV for Redis](https://vercel.com/kv) to track pageviews.
Simple SvelteKit template that uses Redis to track pageviews.

## Demo

Expand All @@ -29,7 +29,7 @@ You can choose from one of the following two methods to use this repository:

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%3A%2F%2Fgithub.com%2Fvercel%2Fexamples%2Ftree%2Fmain%2Fstorage%2Fkv-redis-sveltekit&project-name=kv-redis-sveltekit&repository-name=kv-redis-sveltekit&demo-title=Vercel%20KV%20for%20Redis%20Svelte%20Starter&demo-description=Simple%20SvelteKit%20template%20that%20uses%20Vercel%20KV%20for%20Redis%20to%20track%20pageviews.&demo-url=https%3A%2F%2Fkv-redis-sveltekit.vercel.app%2F&demo-image=https%3A%2F%2Fkv-redis-sveltekit.vercel.app%2Fopengraph-image.png&stores=%5B%7B"type"%3A"kv"%7D%5D)
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fexamples%2Ftree%2Fmain%2Fstorage%2Fkv-redis-sveltekit&project-name=kv-redis-sveltekit&repository-name=kv-redis-sveltekit&demo-title=Vercel%20KV%20for%20Redis%20Svelte%20Starter&demo-description=Simple%20SvelteKit%20template%20that%20uses%20Vercel%20KV%20for%20Redis%20to%20track%20pageviews.&demo-url=https%3A%2F%2Fkv-redis-sveltekit.vercel.app%2F&demo-image=https%3A%2F%2Fkv-redis-sveltekit.vercel.app%2Fopengraph-image.png&products=%5B%7B"type"%3A"integration"%2C"group"%3A"redis"%7D%5D)

### Clone and Deploy

Expand Down
2 changes: 1 addition & 1 deletion storage/kv-redis-sveltekit/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,6 @@
"vite": "^5.4.4"
},
"dependencies": {
"@upstash/redis": "^1.34.3"
"redis": "^4.7.0"
}
}
97 changes: 82 additions & 15 deletions storage/kv-redis-sveltekit/pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

16 changes: 8 additions & 8 deletions storage/kv-redis-sveltekit/src/routes/+page.server.ts
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import { KV_REST_API_TOKEN, KV_REST_API_URL } from '$env/static/private'
import { Redis } from '@upstash/redis'
import { REDIS_URL, KV_URL } from '$env/static/private'
import { createClient } from 'redis'

const kv = await createClient({
url: REDIS_URL ?? KV_URL,
}).connect()

/** @type {import('./$types').PageLoad} */
export async function load() {
const kv = new Redis({
url: KV_REST_API_URL,
token: KV_REST_API_TOKEN,
})
const pageVisits = await kv.get<number>('pageVisits')
await kv.set('pageVisits', (pageVisits || 0) + 1)
const pageVisits = await kv.get('pageVisits')
await kv.set('pageVisits', Number.parseInt(pageVisits ?? '0', 10) + 1)
const updatedPageVisits = await kv.get('pageVisits')

return {
Expand Down
10 changes: 2 additions & 8 deletions storage/kv-redis-sveltekit/src/routes/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
<h1
class="pt-4 pb-8 bg-gradient-to-br dark:from-white from-black via-[#707070] to-[#ffffff] bg-clip-text text-center text-4xl font-medium tracking-tight text-transparent md:text-7xl"
>
Vercel KV
Redis
</h1>
<div
class="flex flex-col items-center w-full max-w-xl p-12 mx-auto rounded-lg shadow-xl dark:bg-white/10 bg-white/30 ring-1 ring-gray-900/5 backdrop-blur-lg"
Expand All @@ -39,13 +39,7 @@
<div
class="w-full max-w-lg mt-6 font-light text-center text-gray-600 dark:text-gray-300"
>
Simple hello world demo of
<a
href="https://vercel.com/kv"
class="font-medium underline transition-colors underline-offset-4 dark:hover:text-white hover:text-black"
>
Vercel KV
</a>
Simple hello world demo of Redis
<div class="flex items-center justify-center my-2">
<span>Built with</span>
<a
Expand Down

0 comments on commit 2e244c4

Please sign in to comment.