In this post, we look at how you can use Upstash as a SvelteKit real-time game database. The post continues a series on building a simple, real-time, serverless strategy game.
Upstash provide serverless Redis, which is exactly what we use for the database here. You will typically opt for Redis, over another database offering, like PostgreSQL or SQLite, when you want quick access to string records, or database records which can easily be serialized to a string. In fact, Redis is often used for server-side caching, allowing faster responses to server requests. I have already written a couple of pieces on using Upstash Redis with Astro and Deno Fresh , so have a look at those if they are your preferred frameworks.
For the game, I use Upstash to store metadata on existing games, including identifiers for the players in each game. In this short post, we see how you can integrate Upstash Redis with SvelteKit.
We won’t build the app from scratch, though you can find a link to the project open-source repo, if you want to play around with it. Here, we just focus on the steps for integrating Upstash into an existing SvelteKit Server-side Rendered (SSR) app.
@upstash/redispackage to your SvelteKit project:
You can create a Redis instance by importing
Redisas a named import from
For an SSR app, to save including this code on every
+page.server.tsfile, you can add the setup, once, to
src/hooks.server.ts, placing the Redis instance on request
Then, in a
+page.server.tsfile, within the
loadfunction access the Redis instance via
This works within
+page.server.tsfiles, where the
localsobject is available. Use the previous code with other files. Either way, remember to update the
.envfile with your Upstash credentials.
You can now create, read, update and delete records, using a key as a collection identifier.
For the game, I use Redis hashes,
which allow constant time get and set operations. The game collection
contains records; each an object with two fields. I run hashset
Readoperation using the
Here are some examples of Redis Hashset Create, Read, Update and Delete (CRUD) operations, using the Upstash API:
That should be enough to get you going, but please let me know if anything needs more explanation. Drop a comment below or reach out via your preferred contact method.
In this post, on Upstash as SvelteKit real-time game database, we saw how you can use Redis Upstash with SvelteKit. More specifically, we saw:
- how to add Upstash Redis dependencies to your SvelteKit project;
- how to create a Redis instance ; and
- some basic CRUD operations with the Upstash API.
Please see the full repo code on the Rodney Lab GitHub repo . I do hope you have found this post useful and can use the code in your own SvelteKit project. Let me know if you have any suggestions for improvements to the game. Drop a comment below or reach out on other channels.
- The SvelteKit `hooks.server.ts` file is a great place to initialize databases. It lets you run code on each server request, adding data that you want to be access in the endpoint logic. It is essentially middleware. Add a `src/hooks.server.ts` file to your project, then export a handle function. Within the body of your handle function, add your database instance to the `event.locals` object. For example, we saw, working with Upstash Redis, you might set `event.locals.redis = new Redis();`. Then, in your `+page.server.ts files`, you will have access to the initialized database instance via the `locals` object.
- Upstash offers a serverless Redis service with Node and Deno APKs. The node package is `@upstash/redis`, and provides access to expected Redis APIs. That is, without you needing to host a long-running Redis instance.
- Redis hashes allow you to store key-value pairs in a named hash collection. Creating, reading, updating and deleting a single record are all constant-time operations. By contrast, lists have linear performance for set and update operations, though accessing the head (or first) entry is a constant-time operation. With capacity for over 4 billion key-value pairs, hashes provide plenty of capacity for common use cases.
If you have found this post useful, see links below for further related content on this site. I do hope you learned one new thing from the video. Let me know if there are any ways I can improve on it. I hope you will use the code or starter in your own projects. Be sure to share your work on Twitter, giving me a mention, so I can see what you did. Finally, be sure to let me know ideas for other short videos you would like to see. Read on to find ways to get in touch, further below. If you have found this post useful, even though you can only afford even a tiny contribution, please consider supporting me through Buy me a Coffee.
Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter and also askRodney on Telegram . Also, see further ways to get in touch with Rodney Lab. I post regularly on SvelteKit as well as Search Engine Optimization among other topics. Also, subscribe to the newsletter to keep up-to-date with our latest projects.