Skip to content

Commit

Permalink
Update and improve KV Redis SvelteKit example (#848)
Browse files Browse the repository at this point in the history
### Description

- update to latest version of Svelte(Kit)
- use static environment variable feature for better local development
experience
- use adapter-vercel
- improve readme

### Demo URL

https://kv-redis-sveltekit-kappa.vercel.app/

### Type of Change

- [ ] New Example
- [x] 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
dummdidumm authored Jan 3, 2024
1 parent c9b9e3d commit 91d0d28
Show file tree
Hide file tree
Showing 7 changed files with 966 additions and 420 deletions.
4 changes: 4 additions & 0 deletions storage/kv-redis-sveltekit/.env.example
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
KV_URL=
KV_REST_API_URL=
KV_REST_API_TOKEN=
KV_REST_API_READ_ONLY_TOKEN=
35 changes: 10 additions & 25 deletions storage/kv-redis-sveltekit/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,45 +27,30 @@ 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 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)

# create-svelte
### Clone and Deploy

Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).

## Creating a project

If you're seeing this, you've probably already done this step. Congrats!
Execute the following command to download the example into the `my-project` folder:

```bash
# create a new project in the current directory
pnpm create svelte@latest

# create a new project in my-app
pnpm create svelte@latest my-app
npx degit@latest https://github.com/vercel/examples/storage/kv-redis-sveltekit my-project
```

## Developing
Once you've created the project and installed dependencies with `pnpm install`, copy the `.env.example` file in this directory to `.env.local` (which will be ignored by Git). Then open `.env.local` and set the environment variables to match the ones in your Vercel Storage Dashboard.

Once you've created a project and installed dependencies with `pnpm install`, start a development server:
Alternatively, if you have setup a project already and you have installed the Vercel CLI, you can also pull the environment variables using the following command:

```bash
pnpm dev

# or start the server and open the app in a new browser tab
pnpm dev --open
vercel env pull .env.local
```

## Building

To create a production version of your app:
Next, run SvelteKit in development mode:

```bash
pnpm build
pnpm dev
```

You can preview the production build with `pnpm preview`.

> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
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)).
17 changes: 9 additions & 8 deletions storage/kv-redis-sveltekit/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,18 +13,19 @@
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch"
},
"devDependencies": {
"@sveltejs/adapter-auto": "^2.0.0",
"@sveltejs/kit": "^1.5.0",
"@sveltejs/adapter-vercel": "^4.0.3",
"@sveltejs/kit": "^2.0.6",
"@sveltejs/vite-plugin-svelte": "^3.0.1",
"autoprefixer": "^10.4.14",
"postcss": "^8.4.23",
"svelte": "^3.54.0",
"svelte-check": "^3.0.1",
"svelte": "^4.2.8",
"svelte-check": "^3.6.2",
"tailwindcss": "^3.3.2",
"turbo": "^1.9.3",
"typescript": "^5.0.0",
"vite": "^4.3.0"
"turbo": "^1.9.7",
"typescript": "^5.0.4",
"vite": "^5.0.10"
},
"dependencies": {
"@vercel/kv": "^0.2.1"
"@vercel/kv": "^1.0.1"
}
}
Loading

73 comments on commit 91d0d28

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

examples – ./storage/postgres-starter

examples.vercel.rocks
examples-git-main.vercel.rocks
examples-bice.vercel.app

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

blob-sveltekit – ./storage/blob-sveltekit

blob-sveltekit.vercel.app
blob-sveltekit-git-main.vercel.rocks
blob-sveltekit.vercel.rocks

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

postgres-kysely – ./storage/postgres-kysely

postgres-kysely.vercel.app
postgres-kysely.vercel.rocks
postgres-kysely-git-main.vercel.rocks

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

next-flask – ./python/nextjs-flask

nextjs-flask-starter.vercel.app
next-flask.vercel.rocks
nextjs-python.vercel.app
next-flask-git-main.vercel.rocks

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

edge-functions-news – ./starter/next-news

edge-functions-news-git-main-now-examples.vercel.app
edge-functions-news-now-examples.vercel.app
edge-functions-next-news.vercel.sh

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

solutions-image-offset – ./solutions/image-offset

solutions-image-offset-now-examples.vercel.app
solutions-image-offset.vercel.app
solutions-image-offset-git-main-now-examples.vercel.app

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

edge-rewrites-upstash – ./edge-middleware/rewrites-upstash

edge-rewrites-upstash-git-main-now-examples.vercel.app
edge-rewrites-upstash.vercel.app
edge-rewrites-upstash-now-examples.vercel.app
edge-rewrites-upstash.vercel.sh

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

solutions-on-demand-isr – ./solutions/on-demand-isr

solutions-on-demand-isr-git-main-now-examples.vercel.app
solutions-on-demand-isr-now-examples.vercel.app
solutions-on-demand-isr.vercel.app

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

solutions-script-component-ad – ./solutions/script-component-ad

solutions-script-component-ad.vercel.app
solutions-script-component-ad-git-main-now-examples.vercel.app
solutions-script-component-ad-now-examples.vercel.app

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

solutions-loading-web-fonts – ./solutions/loading-web-fonts

solutions-loading-web-fonts-now-examples.vercel.app
solutions-loading-web-fonts.vercel.app
solutions-loading-web-fonts-git-main-now-examples.vercel.app

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

edge-user-agent-based-rendering – ./edge-middleware/user-agent-based-rendering

edge-user-agent-based-rendering-git-main-now-examples.vercel.app
edge-user-agent-based-rendering-now-examples.vercel.app
edge-user-agent-based-rendering.vercel.app

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

feature-flag-optimizely – ./edge-middleware/feature-flag-optimizely

feature-flag-optimizely.vercel.app
feature-flag-optimizely-now-examples.vercel.app
feature-flag-optimizely-git-main-now-examples.vercel.app

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

edge-maintenance-page – ./edge-middleware/maintenance-page

edge-maintenance-page.vercel.app
edge-maintenance-page-now-examples.vercel.app
edge-maintenance-page-git-main-now-examples.vercel.app
edge-maintenance-page.vercel.sh

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

edge-ab-testing-statsig – ./edge-middleware/ab-testing-statsig

edge-ab-testing-statsig.vercel.sh
edge-ab-testing-statsig-git-main-now-examples.vercel.app
edge-ab-testing-statsig-now-examples.vercel.app
edge-ab-testing-statsig.vercel.app

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

solutions-microfrontends – ./solutions/microfrontends/apps/main

solutions-microfrontends-now-examples.vercel.app
solutions-microfrontends.vercel.app
solutions-microfrontends-git-main-now-examples.vercel.app
microfrontends.vercel.sh

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

app-dir-share-state – ./app-directory/share-state

app-dir-share-state.vercel.app
app-dir-share-state-now-examples.vercel.app
app-dir-share-state-git-main-now-examples.vercel.app

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

i18n – ./edge-middleware/i18n

i18n-now-examples.vercel.app
middleware-i18n.vercel.app
i18n.vercel.sh
i18n-git-main-now-examples.vercel.app

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

app-dir-i18n – ./app-directory/i18n

app-dir-i18n-git-main-now-examples.vercel.app
app-dir-i18n-now-examples.vercel.app
app-dir-i18n.vercel.app

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

app-dir-css-in-js – ./app-directory/css-in-js

app-dir-css-in-js-now-examples.vercel.app
app-dir-css-in-js-git-main-now-examples.vercel.app
app-dir-css-in-js.vercel.app

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

edge-middleware-modify-request-header – ./edge-middleware/modify-request-header

edge-middleware-modify-request-header.vercel.app
edge-middleware-modify-request-header-now-examples.vercel.app
edge-middleware-modify-request-header-git-main-now-examples.vercel.app

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

edge-geolocation-country-block – ./edge-middleware/geolocation-country-block

edge-geolocation-country-block-git-main-now-examples.vercel.app
edge-geolocation-country-block-now-examples.vercel.app
edge-geolocation-country-block.vercel.app

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

feature-flag-launchdarkly – ./edge-middleware/feature-flag-launchdarkly

feature-flag-launchdarkly-now-examples.vercel.app
feature-flag-launchdarkly-git-main-now-examples.vercel.app
feature-flag-launchdarkly.vercel.app

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

nodejs-api – ./solutions/node-hello-world

nodejs-api-now-examples.vercel.app
nodejs-api-git-main-now-examples.vercel.app
nodejs-api-example.vercel.app
nodejs-api-murex.vercel.app

@vercel
Copy link

@vercel vercel bot commented on 91d0d28 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

feature-flag-hypertune – ./edge-middleware/feature-flag-hypertune

feature-flag-hypertune-git-main-now-examples.vercel.app
feature-flag-hypertune.vercel.app
feature-flag-hypertune-now-examples.vercel.app

Please sign in to comment.