DEV Community

Ibz786
Ibz786

Posted on

Using Redis with Nuxt on Windows

#nuxt #redis #microsoft #docker

This is more a self documentation post as I ran into some issues trying to get Redis to work on Windows using Docker

Recently I've been messing around with Nuxt. As a fan of Vue.js and its ecosystem, I've found Nuxt to be an incredibly intuitive framework. There have been some "pain points" but thankfully overcome quite easily

Currently, when messing around with a few concepts, I came to the conclusion that I need to store some data on the server, that could essentially be cached and accessed quickly, without having to constantly hit the DB and do various joins etc.

Nuxt "out of the box" offers standard memory storage on the server side, but with the option to use other means or storage drivers. One of which, being redis

Since I'm using Windows, there's no official driver or way to install and use Redis. However, I came across one solution, Docker. Admittingly, I've heard of Docker, but have never in fact used it... up until this point. So I went ahead on the Docker website, got the Windows installer and installed it

You can install Docker for Windows here: https://docs.docker.com/desktop/setup/install/windows-install/

It's also important to note, that you should also have WSL (Windows Subsystem for Linux) installed. If you don't have it installed you can run the following:

wsl --install
Enter fullscreen mode Exit fullscreen mode

Otherwise if you do, it would be best to update it just in case, using:

wsl --update
Enter fullscreen mode Exit fullscreen mode

Once docker is installed, install redis by running the following command. This should get the latest version:

docker pull redis
Enter fullscreen mode Exit fullscreen mode

Afterwards your ready to start up redis in your docker container. Run the following command:

docker run -p 6379:6379 --name redis1 -d redis
Enter fullscreen mode Exit fullscreen mode

Its important to ensure that 6379:6379 is specificed as this part of the command exposes the docker container port to your local machine (something that I had missed earlier and was going in circles trying to figure out what went wrong)

Also redis1 in this case is the container or image name, and you can name yours anything you wish

This should kick start your Docker Redis container. You can check your containers using the following command:

docker ps
Enter fullscreen mode Exit fullscreen mode

After which you can access your redis container via

docker exec -it redis1 redis-cli
Enter fullscreen mode Exit fullscreen mode

It should show up as 127.0.0.1:6379. You can test if its working by running

ping
Enter fullscreen mode Exit fullscreen mode

And you'll get PONG back

Now to integrate it with Nuxt, simply add redis to your Nuxt app, via

npm i ioredis
Enter fullscreen mode Exit fullscreen mode

And following the Nuxt documentation, I added the config to my Nuxt config
https://nuxt.com/docs/4.x/guide/directory-structure/server#server-storage

export default defineNuxtConfig({
  nitro: {
    storage: {
      redis: {
        driver: 'redis',
        port: 6379,
        host: "127.0.0.1",
      }
    }
  }
})
Enter fullscreen mode Exit fullscreen mode

In your API handler or other logic file, you can run the following

export default defineEventHandler(async (event) => {
  // List all keys with
  const keys = await useStorage('redis').getKeys();

  // Set a key with
  await useStorage('redis').setItem('foo', 'bar');

  // Get a key with
  await useStorage('redis').getItem('foo');

  // Remove a key with
  await useStorage('redis').removeItem('foo');

  return {}
});
Enter fullscreen mode Exit fullscreen mode

And viola! Hope that helps anyone else facing similar issues

Top comments (0)