DEV Community: Rafael Magalhaes

Custom fetch with Interceptors and logs in nuxt 3

Rafael Magalhaes — Thu, 29 Aug 2024 12:06:14 +0000

If you've used Nuxt you've probably encountered the handy useFetch composable:



<script setup lang="ts">
const { data, status, error, refresh, clear } = await useFetch('/api/modules')
</script>

This simplifies fetching data, but what if you have a multitude of APIs that all require authentication? Adding headers to each call gets tedious fast.

Enter interceptors.

To add global interceptors, we'll build a custom composable wrapper around $fetch. This is especially valuable when your API calls consistently need authorization headers.

As a foundation, let's use the same project from my previous blog post on Authentication in Nuxt 3.

let's start by creating a new composable under composable folder composables/useAuthFetch.ts



import type { UseFetchOptions } from 'nuxt/app';

const useAuthFetch = (url: string | (() => string), options: UseFetchOptions<null> = {}) => {
  const customFetch = $fetch.create({
    baseURL: 'https://dummyjson.com',
    onRequest({ options }) {
      const token = useCookie('token');
      if (token?.value) {
        console.log('[fetch request] Authorization header created');
        options.headers = options.headers || {};
        options.headers.Authorization = `Bearer ${token.value}`;
      }
    },
    onResponse({ response }) {
      console.info('onResponse ', {
        endpoint: response.url,
        status: response?.status,
      });
    },
    onResponseError({ response }) {
      const statusMessage = response?.status === 401 ? 'Unauthorized' : 'Response failed';
      console.error('onResponseError ', {
        endpoint: response.url,
        status: response?.status,
        statusMessage,
      });
      throw showError({
        statusCode: response?.status,
        statusMessage,
        fatal: true,
      });
    },
  });

  return useFetch(url, {
    ...options,
    $fetch: customFetch,
  });
};

export default useAuthFetch;

Explanation:

useAuthFetch: Our custom composable. It takes the same arguments as useFetch.
customFetch: Creates a customized $fetch instance with interceptors.
baseURL: By using baseURL option, ofetch prepends it for trailing/leading slashes and query search params for baseURL using ufo:
onRequest: This interceptor runs before every fetch call. It grabs the token from a cookie and adds the Authorization header if a token is present.
onResponse: Runs after a successful fetch, providing logging.
onResponseError: Handles fetch errors, logs details, and throws an error using showError (assuming you have this defined).
return useFetch(...): Finally, we call the original useFetch, but pass in our customFetch to handle the actual requests.

you can find out more about the interceptors here

Now, whenever you need to fetch data from an authenticated API, simply use useAuthFetch instead of useFetch, and the authorization will be handled seamlessly.



<template>
  <div v-if="user">Welcome back {{ user.email }}</div>
  <div v-else>loading...</div>
</template>
<script lang="ts" setup>
const { data: user } = await useAuthFetch('/auth/me');
</script>

When you inspect the network call you can see the baseUrl is correct and the Authorization header is present

Logging

In my interceptors, I have added some logs this can be useful if you have tools like Sentry in your application.

How to add Sentry to Nuxt: https://www.lichter.io/articles/nuxt3-sentry-recipe/

in the onRequest interceptor you could add a breadcrumb to sentry



import * as Sentry from '@sentry/vue';

Sentry.addBreadcrumb({
        type: 'http',
        category: 'xhr',
        message: ``,
        data: {
          url: `${options.baseURL}${request}`,
        },
        level: 'info',
});

```

if your backend returns a `tracingId` you could also add a tag and context with sentry to link errors with an endpoint 

`onResponseError` you could add [context](https://docs.sentry.io/platforms/javascript/enriching-events/context/)  [breadcrumb](https://docs.sentry.io/platforms/javascript/enriching-events/breadcrumbs/) and [tag](https://docs.sentry.io/platforms/javascript/enriching-events/tags/)

```js
import * as Sentry from '@sentry/vue';

Sentry.setContext('http-error', {
   endpoint: response?.url,
   tracingId: 123,
   status: response?.status,
});
Sentry.addBreadcrumb({
 type: 'http',
 category: 'xhr',
 message: ``,
 data: {
  url: response?.url,
  status_code: response?.status,
 },
 level: 'error',
});
Sentry.setTag('tracingId', '123');

replace tracingIdwith whatever custom tracing log your backend returns

My first npm package

Rafael Magalhaes — Sat, 04 Nov 2023 03:43:10 +0000

Recently, I was looking for an API that provided country and city data, but I couldn't find anything that fit the bill. Some APIs had country info but left out the cities, while others were just way too expensive, like Google Places.

The requirements for the country were the name, flag, and country code, and for the city, it was just the name and country.

Then, I found two projects that had exactly what I was looking for:

Cities.json: A super cool GitHub repo with a massive list of cities in a handy JSON format.
Restcountries API: A detailed country data.

Merging Data: The Birth of `[@rrrm/countries](https://www.npmjs.com/package/@rrrm/countries)`

To create a unified solution, I merged data from Cities.json and the Restcountries API. The result is the @rrrm/countries NPM package, named after my initials and the focus of the package.

Key Features of @rrrm/countries

Country and City Information: Access to a wealth of data on countries and cities worldwide.
User-Friendly Integration: An NPM package that simplifies integration into your projects.

Usage


import { findCities, findCountry, getAllCitiesByCountry } from "@rrrm/countries"

// find cities with country information
const lisbon = findCities("lisbon", { withCountry: true })
console.log("findCities-> ", lisbon)

// find a country with all cities
const pt = findCountry("PT", { withCity: true })
console.log("findCountry-> ", pt)

// get all cities for  a country
const citiesBycountry = getAllCitiesByCountry("PT")
console.log("getAllCitiesByCountry-> ", citiesBycountry)

Check out the repository here https://github.com/rafaelmagalhaes/countries

Data Files

I have also created two helper functions to convert the results to JSON or CSV:

convertJson(fileName: string, data: any | Country[] | City[]): Convert data to JSON format and save it to a file.
convertCSV(fileName: string, data: any | Country[] | City[]): Convert data to CSV format and save it to a file.

import { convertJson, convertCSV } from './convert.ts';

const data = [{ /* Your data here */ }];
convertJson('data.json', data);
convertCSV('data.csv', data);

I ended up using this to create a CSV to import the data into my Supabase project.

I have added a folder schema with some SQL migrations to create the tables for the city and country.

This has been a really fun project, and I hope it's useful to any of you.

Authentication in Nextjs

Rafael Magalhaes — Thu, 13 Apr 2023 15:05:56 +0000

Most developers are familiar with the popular NextAuth.js plugin for handling authentication in Next.js applications. It's a powerful and easy-to-use tool that simplifies the process of adding authentication to your project. However, some developers prefer to avoid using third-party plugins and instead implement authentication themselves using custom code.

In this context, it's worth mentioning that Next.js provides various tools and features for handling authentication without relying on external plugins. One of these tools is middleware, which is a function that runs before your page component is rendered and can be used to implement authentication logic.

Recently, I wrote a blog about implementing authentication in Nuxt 3 using middleware, and I wanted to see if it was possible to achieve the same results in Next.js. In this blog, I will be converting my Nuxt 3 project into a Next.js project and exploring how to use middleware to handle authentication. By the end of this blog, you will have a clear understanding of how to implement authentication in Next.js without relying on third-party plugins.

lets start by creating a blank nextjs project

npx create-next-app@latest

select your options I just used typescript as default

install zustand

npm i zustand

I choose zustand as my state management library because it looks easy and straight forward.

exactly like the tutorial in my Nuxt 3 post, I will be using DummyJSON

store

path: store/useAuthStore.ts


// Importing create function from the Zustand library
import { create } from 'zustand'

// Defining an interface for the store's state
interface AuthStoreInterface {
  authenticated: boolean // a boolean value indicating whether the user is authenticated or not
  setAuthentication: (val: boolean) => void // a function to set the authentication status
  user: any // an object that stores user information
  setUser: (user: any) => void // a function to set user information
}

// create our store
export const useAuthStore = create<AuthStoreInterface>((set) => ({
  authenticated: false, // initial value of authenticated property
  user: {}, // initial value of user property
  setAuthentication: (val) => set((state) => ({ authenticated: val })), // function to set the authentication status
  setUser: (user) => set({ user }), // function to set user information
}))

Overall, this code creates a store for authentication-related state in a React application using Zustand. It provides methods to set and update the authentication and user information stored in the state.

Layout

I also wanted to play around with the new layouts feature in next so I created a layout folder

path: layouts/DefaultLayouts/index.tsx

// Importing necessary components and functions
import Navbar from '~/components/Navbar' // a component for the website navigation bar
import Footer from '~/components/Footer' // a component for the website footer
import { useEffect } from 'react' // importing useEffect hook from react
import { getCookie } from 'cookies-next' // a function to get the value of a cookie
import { useAuthStore } from '~/store/useAuthStore' // a hook to access the authentication store

// Defining the layout component
export default function Layout({ children }: any) {
  // Getting the token value from a cookie
  const token = getCookie('token')

  // Getting the setAuthentication function from the authentication store
  const setAuthentication = useAuthStore((state) => state.setAuthentication)

  // Running a side effect whenever the token value changes
  useEffect(() => {
    console.log(token) // Logging the token value for debugging purposes
    if (token) {
      setAuthentication(true) // Setting the authentication status to true if a token exists
    }
  }, [token])

  // Rendering the layout with the Navbar, main content, and Footer components
  return (
    <>
      <Navbar />
      <main className="mainContent">{children}</main>
      <Footer />
    </>
  )
}

Pretty straight forward we have our Navbar and Footer component and we wrap the main container between both, we are also calling the store to check if token is there and setting the authentication state

Now just need to use our layout in the _app.tsx file

import '../styles/globals.scss'
import Layout from '~/layouts/DefaultLayout'
import { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

middleware

the code below defines a middleware function to handle user authentication in Next.js. The function checks whether a user has a token (stored in a cookie) to access protected routes. If the user does not have a token and the requested path is not allowed, the middleware will redirect them to the signin page. If the user is already authenticated and tries to access a path that is allowed, the middleware will redirect them to the home page. This function also ignores any routes that start with /api and /_next to avoid running the middleware multiple times.


import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl
  /* ignore routes starting with api and _next (temp solution)
    matchers in next.config isn't working
    without this the middleware will run more than once
   so to avoid this we will ignore all paths with /api and  /_next
   */
  if (
    request.nextUrl.pathname.startsWith('/api/') ||
    request.nextUrl.pathname.startsWith('/_next/')
  ) {
    return NextResponse.next()
  }

  // our logic starts from here

  let token = request.cookies.get('token')?.value // retrieve the token
  const allowedRoutes = ['/auth/signin', '/auth/register'] // list of allowed paths user can visit without the token
  const isRouteAllowed = allowedRoutes.some((prefix) => pathname.startsWith(prefix)) // check path and see if matches our list then return a boolean

  // redirect to login if no token
  if (!token) {
    if (isRouteAllowed) {
      // check if path is allowed
      return NextResponse.next()
    }
    // if path is not allowed redirect to signin page
    return NextResponse.redirect(new URL('/auth/signin', request.url))
  }

  //redirect to home page if logged in
  if (isRouteAllowed && token) {
    return NextResponse.redirect(new URL('/', request.url))
  }
}

Pages

The index page

import Head from 'next/head'

export default function Home() {
  return (
    <div>
      <h1>Homepage</h1>
    </div>
  )
}

The SignIn page


import { NextPage } from 'next'
import { useState } from 'react'
import { setCookie } from 'cookies-next'
import { useRouter } from 'next/router'
import { useAuthStore } from '~/store/useAuthStore' // import our useAuthStore

const SignIn: NextPage = (props) => {
  // set UserInfo state with inital values
  const [userInfo] = useState({ email: 'kminchelle', password: '0lelplR' })
  const router = useRouter()

  // import state from AuthStore
  const setUser = useAuthStore((state) => state.setUser)
  const setAuthentication = useAuthStore((state) => state.setAuthentication)

  const login = async () => {
    // do a post call to the auth endpoint
    const res = await fetch('https://dummyjson.com/auth/login', {
      method: 'post',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        username: userInfo.email,
        password: userInfo.password,
      }),
    })

    // check if response was ok
    if (!res.ok) {
      return console.error(res)
    }
    // retrieve data from the response
    const data = await res.json()

    // check if we have data
    if (data) {
      setUser(data) // set data to our user state
      setAuthentication(true) // set our authentication state to true
      setCookie('token', data?.token) // set token to the cookie
      router.push('/') // redirect to home page
    }
  }

  return (
    <div>
      <div className="title">
        <h2>Login</h2>
      </div>
      <div className="container form">
        <label>
          <b>Username</b>
        </label>
        <input
          type="text"
          className="input"
          placeholder="Enter Username"
          name="uname"
          value={userInfo.email}
          onChange={(event) => (userInfo.email = event.target.value)}
          required
        />
        <label>
          <b>Password</b>
        </label>
        <input
          type="password"
          className="input"
          placeholder="Enter Password"
          value={userInfo.password}
          onChange={(event) => (userInfo.password = event.target.value)}
          name="psw"
          required
        />
        <button onClick={login} className="button">
          Login
        </button>
      </div>
    </div>
  )
}

export default SignIn

The code provided is sufficient to implement authentication in Next.js without using the NextAuth plugin. However, it should be noted that this code only supports email and password authentication, and not Single Sign-On (SSO) options like Google or GitHub. During a project that involved converting a Nuxt 3 project to a Next.js project, I found Zustand to be a useful tool. In comparison to Redux and Context, Zustand is lightweight and more preferable.

The middleware function in Next.js is a valuable addition. However, I did encounter some issues with the matchers while using it, but was able to find workarounds to solve the problems.

Full project layout

components/
   - Footer 
   - Navbar
layouts/
  - DefaultLayout
pages/
 - auth/         
    - login.tsx    <-- login page
    - register.tsx     <-- /register page
  - index.tsx  <- homepage
  - _app.tsx <-  nextjs app file
store/
  - useAuthStore.ts  <- zustand store
styles/
  - globals.scss  <- global styleguide
middleware.ts  <- middleware file in root of project

Preview: https://next-auth-example-mu-two.vercel.app/
Repo: https://github.com/rafaelmagalhaes/next-auth-example

Generating Dynamic Routes for Static Site Generation with Nuxt 3

Rafael Magalhaes — Sat, 18 Mar 2023 18:02:03 +0000

Static Site Generation (SSG) is an increasingly popular approach for building websites that combines the benefits of server-side rendering with the simplicity of static site hosting. Nuxt 3 is a powerful framework for building static sites that includes support for generating dynamic routes, allowing you to create static pages for every possible route parameter. In this blog post, we will explore how to generate dynamic routes for static site generation with Nuxt 3.

What is Dynamic Route Generation?

Dynamic routes are routes that are generated based on dynamic data, such as user-generated content or data from an API. For example, a blog site might have a dynamic route for each blog post, where the route includes the post's slug. Generating dynamic routes allows you to create static pages for each possible route, improving site performance and SEO.

How to Generate Dynamic Routes in Nuxt 3:

To generate dynamic routes in Nuxt 3, we need to fetch all of our data during build time and pass this to our nitro config to render the routes, at the moment this is not possible yet with command generate .

Current git issue: https://github.com/nuxt/nuxt/issues/13949

the solution I'm writing about was originally done by the user Smef

Let's start by modifying the nuxt.config.js file. In this example I will be using my Directus CMS endpoint to fetch all the blogs I have.

We will need to install axios first I've found that I can't use the composable useFetch inside the nuxt.config



import axios from 'axios'
// create a function to fetch the routes from the API
const getPostRoutes = async () => {
  const response = await axios.get(
    'https://sli1n332.directus.app/items/posts?filter={%22status%22:%22published%22}&sort=-date_created'
  );
  // return the array of routes
  return response?.data?.data.map((post) => `/post/${post.slug}`);
};
export default defineNuxtConfig({
ssr: true, // this should be set to true for static websites
 hooks: {
    async 'nitro:config'(nitroConfig) {
      // fetch the routes from our function above
      const slugs = await getPostRoutes();
      // add the routes to the nitro config
      nitroConfig.prerender.routes.push(...slugs);
    },
  },
})

In this example the ssr property is set to true, indicating that the website should be built using server-side rendering.

The hooks property is an object containing a list of functions that are executed during different stages of the Nuxt.js build process. In this code block, the nitro:config hook is used to add the generated routes to the Nitro config object.

Inside the nitro:config hook, the getPostRoutes function is called to fetch the post routes from the API. The routes are then added to the nitroConfig.prerender.routes array using the push method.

now if we run the command

npm run generate 
yarn generate

We should see that our pages are being generated by the crawler

If we have a look inside the .output/public folder we can see the HTML for each of my blog posts

Top 5 plugins for Nuxt 3

Rafael Magalhaes — Tue, 07 Mar 2023 00:25:04 +0000

vueUse

VueUse is a collection of essential Vue 3 composition APIs. These APIs are designed to help developers build complex applications more easily. The plugin offers a wide range of utilities and helpers that can help to streamline the development process. VueUse is perfect for developers who want to get the most out of the composition API and build scalable and efficient applications.

Tailwind

Tailwind is a popular CSS framework that provides a set of utility classes for building responsive and customizable web interfaces. With Tailwind, developers can quickly and easily create beautiful interfaces without having to write a lot of CSS code. The Nuxt Tailwind plugin provides an easy way to integrate Tailwind with your Nuxt 3 project.

@sidebase/nuxt-auth

The nuxt-auth plugin wraps NextAuth.js, It provides an easy-to-use authentication solution for Nuxt 3 projects. The plugin supports a wide range of authentication providers, including JWT, OAuth, Google and Firebase. With @sidebase/nuxt-auth, developers can quickly add authentication functionality to their applications without having to write a lot of code.

Nuxt-trpc

Nuxt-trpc is a lightweight framework for building TypeScript-powered RPC APIs with Next.js or Nuxt.js. It provides a powerful set of tools for building server-side APIs that are type-safe and easy to use. With Nuxt-trpc, developers can build scalable and maintainable APIs that are optimized for performance.

Pinia

Pinia is a modern and lightweight state management solution for Vue.js. It provides a reactive store that can be used to manage the state of your application. With Pinia, developers can easily manage the state of their application without having to worry about boilerplate code. The Nuxt Pinia plugin provides an easy way to integrate Pinia with your Nuxt 3 project.

The DevOnly component in Nuxt 3: A developer's best friend

Rafael Magalhaes — Mon, 06 Mar 2023 23:16:53 +0000

Introduction

Nuxt 3 is the latest version of the popular Vue.js framework for building server-side rendered applications. One of the new features in Nuxt 3 is the <DevOnly> component, which is designed to help developers debug and test their applications more easily. In this blog post, we'll take a closer look at what the <DevOnly> component is, how it works, and how you can use it in your own Nuxt 3 projects.

What is the DevOnly component?

The devonly component is a special component that only renders in development mode. When you build your Nuxt 3 application for production, the devonly component is automatically removed from the final output. This makes it ideal for testing and debugging purposes, since you can use it to add temporary code or functionality that won't affect your production application.

How to use the DevOnly component in Nuxt 3

Using the <DevOnly> component in Nuxt 3 is easy. You can use it like any other component, but with a special tag that indicates it should only be rendered in development mode. Here's an example:

<DevOnly>
  <div>Debugging information goes here</div>
</DevOnly>

In this example, the div element will only be rendered in development mode. If you build your application for production, it will be automatically removed.

Best practices for using the devonly component

While the <DevOnly> component can be a useful tool for debugging and testing your Nuxt 3 application, it's important to use it wisely. Here are a few best practices to keep in mind:

Use the devonly component sparingly. Only add it to your code when you really need to debug or test something.
Don't rely on the devonly component for actual functionality in your application. It should only be used for temporary debugging or testing purposes.
Test your application thoroughly in development mode before deploying to production. The devonly component can help you

Building a website builder with React

Rafael Magalhaes — Tue, 28 Feb 2023 14:07:16 +0000

In this blog post, we will explore how to create a website builder using React and GrapesJS. React is a popular JavaScript library for building user interfaces, while GrapesJS is an open-source web page builder that allows users to create custom web pages through a drag-and-drop interface. By combining the two, we can create a powerful and customizable website builder that is both user-friendly and efficient. We will start by setting up a new React project and integrating GrapesJS into our application. By the end of this tutorial, you will have a fully functional website builder built with React and GrapesJS, ready to be deployed and used for creating custom web pages.

Creating the project

npx create-react-app my-app

let's install the required packages

npm i grapejs grapesjs-blocks-basic grapesjs-plugin-forms grapesjs-preset-webpage

grapesjs-preset-webpage gives us a basic set of blocks we can use on the template builder
grapesjs-plugin-forms this plugin contains block for form elements, like buttons, dropdowns
grapesjs-preset-webpage allow us to set mobile, desktop views and includes extra blocks, and allows us to export and import HTML

Inside app.js we can include the imports required


import {useEffect} from "react";

import 'grapesjs/dist/css/grapes.min.css' // import grapejs styles

import grapesjs from "grapesjs";  

// import plugins we just installed
import websitePlugin from 'grapesjs-preset-webpage';
import basicBlockPlugin from 'grapesjs-blocks-basic'
import formPlugin from 'grapesjs-plugin-forms'

We can now initiate the grapejs plugin

      grapesjs.init({
         container: '#gjs'
         plugins: [websitePlugin,basicBlockPlugin,formPlugin],
       })

we have the container option we need to pass the id of the HTML element we want grapejs to render too

the plugins option is a list of plugins from grapejs we can add them there

complete code


import {useEffect} from "react";

import grapesjs from "grapesjs";
import 'grapesjs/dist/css/grapes.min.css'
import websitePlugin from 'grapesjs-preset-webpage';
import basicBlockPlugin from 'grapesjs-blocks-basic'
import formPlugin from 'grapesjs-plugin-forms'


function App() {

    useEffect(() => {
       grapesjs.init({
         container: '#gjs',
         width: '100%',
         plugins: [websitePlugin,basicBlockPlugin,formPlugin],
       })
    },[])

    return (
        <div id="gjs"></div>
    );
}

export default App;

if we run the project we should see a blank canvas ready to create a website

It is also possible to customise it and have it look to match your needs I will drop and example bellow

Repo: https://github.com/rafaelmagalhaes/website-builder

Create an RSS feed with Nuxt 3

Rafael Magalhaes — Fri, 24 Feb 2023 00:01:33 +0000

What is RSS?

An RSS feed is a structured file format used to publish frequently updated content such as blog posts, news articles, and podcasts. It allows readers to easily access and subscribe to new content without having to visit the website directly. RSS feeds are important because they save time and provide a convenient way to keep up-to-date with multiple sources of information from a single platform. They are commonly used by publishers, bloggers, and news outlets to distribute content to their audiences.

Benefits of having RSS feed

Creating an RSS feed for your website can provide several benefits, including:

Convenience: RSS feeds allow readers to easily access and stay updated on multiple sources of content in one place without having to visit each website individually. This saves time and provides a more convenient user experience.
Increased engagement: RSS can help increase engagement with your audience by allowing readers to share your content on social media or other platforms easily. This can lead to more traffic and greater visibility for your website.
Search engine optimization: RSS feeds can help improve your website's search engine rankings by providing a steady stream of fresh, relevant content. This can help increase your website's visibility and drive more traffic to your site.

Setting up a Nuxt 3 project

In this tutorial I will show you how to generate an RSS feed in nuxt 3 using server routes, this should provide a good insight on how the new server feature in nuxt 3 works with nitro

lest create a new project

npx nuxi init nuxt3-rss

cd into nuxt3-rss install depencies, we also need to add the rss package

npm i rss && npm i -D @types/rss

Creating a server route for your RSS feed

Nuxt 3 is powered by a new server engine, Nitro.

the server directory works like the page directory with a file-based routing system for your API routes

Nuxt automatically scans files inside the ~/server/api, ~/server/routes, and ~/server/middleware directories to register API and server handlers with HMR support.



server/
  api/         
    test.ts    <-- /api/test
  hello.ts     <-- /hello

for this tutorial, we are going to focus on the server routes instead of the API

Files inside the ~/server/api are automatically prefixed with /api in their route. For adding server routes without /api prefix, you can instead put them into ~/server/routes directory.

for example



// server/routes/hello.ts
export default defineEventHandler(() => 'Hello World!')

Given the example above, the /hello route will be accessible at http://localhost:3000/hello.

We need to create a server directory at the root of the project and a routes folder inside server directory



mkdir server
cd server
mkdir routes

inside server/routes create rss.ts file



// server/routes/rss.ts
export default defineEventHandler(() => 'RSS page!')

navigate to http://localhost:3000/rss and make sure everything is working

here's an RSS example that we are going to try dynamically render



<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
  <channel>
    <title>My Website</title>
    <link>http://www.example.com/</link>
    <description>My website's RSS feed</description>
    <lastBuildDate>Tue, 22 Feb 2023 12:00:00 GMT</lastBuildDate>
    <item>
      <title>Article Title</title>
      <link>http://www.example.com/article1</link>
      <description>This is the first article on my website.</description>
      <pubDate>Tue, 21 Feb 2023 12:00:00 GMT</pubDate>
    </item>
    <item>
      <title>Another Article Title</title>
      <link>http://www.example.com/article2</link>
      <description>This is the second article on my website.</description>
      <pubDate>Mon, 20 Feb 2023 12:00:00 GMT</pubDate>
    </item>
  </channel>
</rss>

In this example, the rss tag specifies the version of the RSS format used (in this case, version 2.0). The channel tag contains information about the RSS feed, such as the website's title, description, and link. Each item tag represents an individual article in the feed, with a title, link, description, and publication date.

Our object is to fetch a list of items from an API, loop over each article and include them in the item tag in our RSS fed

I'm going to make use of dev.to API to get a list of my arctiles




// server/routes/rss.ts

import RSS from 'rss';

export default defineEventHandler(async (event) => {
  // wrap everything in a try catch block
  try {
    // fetch data from dev.to
    const response = await fetch(
      'https://dev.to/search/feed_content?per_page=15&page=0&user_id=138553&class_name=Article&sort_by=published_at&sort_direction=desc&approved='
    );

    // throw an error if the response is not ok
    if (!response.ok) {
      throw new Error(response?.status);
    }

    /*
      await for response.json()
      the api returns an object with the result key and result contains all our articles inside an array
      assign result to posts
     */
    const {result:posts} = await response.json();

    // create new rss feed this will be our channel tag with website title and url
    const feed = new RSS({
      title: 'Rafael Magalhaes',
      site_url: 'https://dev.to/rafaelmagalhaes', // link to your website/blog
      feed_url: `https://blog.rrrm.co.uk/rss`, // path to your rss feed
    });
    // loop over each posts
    for (const post of posts) {
      // add item tag to our rss feed with correct data
      feed.item({
        title: post.title, // title from post to item title
        url: `https://dev.to/${post.path}`, // full path to where our article is hosted
        //description: '', // dev.to APIs doesn't return a description, if you have one you can add it here
        date: post.published_at_int, // date post was created
        categories: post.tag_list, // list of tags
      });
    }
    const feedString = feed.xml({ indent: true }); //This returns the XML as a string.

    event.node.res.setHeader('content-type', 'text/xml'); // we need to tell nitro to return this as a xml file
    event.node.res.end(feedString); // send the HTTP response
  } catch (e) {
    // return an error
    return e;
  }
});

Now if we navigate to http://localhost:3000/rss It should return an xml file with a list of our articles

you can find the repository here: https://github.com/rafaelmagalhaes/nuxt3-rss

Dynamically generate open graph images

Rafael Magalhaes — Mon, 13 Feb 2023 17:32:39 +0000

What is open graph

Open Graph Meta Tags are a set of HTML tags that provide information about a webpage to social media platforms. These tags help social media platforms display a preview of the page when it's shared, including the title, description, image, and other relevant details.

The main purpose of Open Graph Meta Tags is to improve the appearance of a shared link on social media, making it more visually appealing and user-friendly. This can increase the chances of the link being clicked on, shared, and engaged with, ultimately leading to increased traffic to the website.

In summary, Open Graph Meta Tags are a simple and effective way to optimize the appearance of your content on social media platforms, helping to increase its visibility and engagement.

What is Tailgraph

TailGraph is a free API to help developers and content creators easily generate OG images using TailwindCSS.

Try out Tailgraph

When I was looking into creating my own OG Image generator I came across this service and I've been using it on my blog to generate OG Images.

It is easy and quick to use, you can customise the layout with tailwind CSS

How to use it

Once you customise the you will receive a URL that contains all of the parameters required to generate the PNG, which may appear cluttered depending on how it is customized.

https://og.tailgraph.com/og?fontFamily=Roboto&title=This%20is%20your%20title&titleTailwind=text-gray-800%20font-bold%20text-6xl&text=And%20this%20is%20your%20secondary%20text&textTailwind=text-gray-700%20text-2xl%20mt-4&logoTailwind=h-8&bgTailwind=bg-white&footer=tailgraph.com&footerTailwind=text-teal-600&t=1676309236521&refresh=1

Applying this to the code

The first thing I did was break down the URL parameters


  const ogParams = {
    fontFamily: 'Roboto',
    title: 'This is your title',
    titleTailwind: 'font-bold text-6xl text-white mt-3',
    text: ''And this is your secondary text',
    textTailwind: 'text-2xl mt-4 text-gray-500',
    logoUrl: 'https://blog.rrrm.co.uk/img/logo.svg',
    logoTailwind: 'text-center text-center m-auto',
    bgTailwind: 'bg-gray-900',
    footer: 'blog.rrrm.co.uk',
    footerTailwind: 'text-teal-600',
    t: '1673017484197',
    refresh: '1',
  };

Your result may differ based on the values you selected, but the title and text fields are the most important.

I want this to be dynamic depending on the article I'm on. So I created a function that accepts title and description as a parameter


const useOgImage = ({
  title,
  description
}) => {
  const ogParams = {
    fontFamily: 'Roboto',
    title, // use the title
    titleTailwind: 'font-bold text-6xl text-white mt-3',
    text: description, // use description
    textTailwind: 'text-2xl mt-4 text-gray-500',
    logoUrl: 'https://blog.rrrm.co.uk/img/logo.svg',
    logoTailwind: 'text-center text-center m-auto',
    bgTailwind: 'bg-gray-900',
    footer: 'blog.rrrm.co.uk',
    footerTailwind: 'text-teal-600',
    t: '1673017484197',
    refresh: '1',
  };

  // convert the object into a string that's readeable by the url
  const paramsToString = Object.entries(ogParams)
    .map(([key, val]) => {
      return `${key}=${encodeURIComponent(val)}`;
    })
    .join('&')

  // return the full image url
  return `https://og.tailgraph.com/og?${paramsToString}`
};

now I can just call the function and pass the required data and it will return me a URL.

useOgImage({
  title: 'Title',
  description: 'New description'
});

Now you just pass this to your meta tag for og:image property

Jsfiddle here: https://jsfiddle.net/gyzpxu8k/6/

Home media server with plex, sonarr, radarr, qbitorrent and overseerr

Rafael Magalhaes — Mon, 06 Feb 2023 12:19:42 +0000

Disclaimer: Neither the author of this article nor the publication nor the developers of codes used in this article condone or encourage downloading, sharing, seeding, or peering copyright material. International laws prohibit such activities which are illegal. This article serves educational purposes only.

How to set up a media server at home

I will be using windows but these steps can be followed for any OS after installing these services

Prerequisites

Make sure you have all applications installed correctly for your system

Jackett

Jackett works as a proxy server: it translates queries from apps (Sonarr, Radarr, SickRage, CouchPotato, Mylar, Lidarr, DuckieTV, qBittorrent, Nefarious etc.) into tracker-site-specific http queries, parses the html response, then sends results back to the requesting software. This allows for getting recent uploads (like RSS) and performing searches. Jackett is a single repository of maintained indexer scraping & translation logic – removing the burden from other apps.

If you installed Jackett correctly you can open it on localhost:9117 or your computers ip 192.168.1.30:9117 you can use this to access it across other devices in your network just make sure you enabled firewall rules

Let's start by adding an indexer to Jackett

Im going to add rarbg, search for rarbg or any indexer you want and click on the configure button

A popup will appear, click the okay button, you should now have a torrent site configured on jackett

Now we can add this to Sonarr and Raddarr

Qbittorent

Once you Qbitorrent installed we need to make sure its accessible over a web gui,
Open Qbittorent application go to settings -> web gui

You can leave the Ip address with * and feel free to change the port number if you already have an application running on that port, I will leave everything in default.
Don't forget to create a password and click apply,

Now to downloads settings on the left menu

Make sure subcategories are selected
Change the download path mine is C:/completed-torrents
Use another path for incompleted torrents C:/downloading-torrents
Make sure those folders exist

Now scroll to Run external program -> Run on torrent finished

Add this in the text field "C:\Program Files\WinRAR\WinRAR.exe" x -r -y "%D*.rar" "%D" this script will check if the torrent has any rar files and will automatically extract them for you. Make sure you have winrar installed

Click apply and go to BitTorrent setting

Enable torrent Queuing this will limit how many download you can have at once. Also, enable Seeding limits some private torrent sites require you to seed to a certain ratio with this you can make sure to stop seeding once that limit has been reached.

Click apply and then Ok and make sure you can reach Qbitorrent from a browser should be on port 8080 if you left it as default.
login with username and password and you should see the torrent on the browser now

Plex

Plex straight forward sign up go over the install process, install plex server add your folder location for movies and tv shows.

Make sure you have created a folder for movies and tvshows on your hard drive

Repeat the same process for TV shows

Click next then finish.

Sonarr

Sonarr monitors multiple feeds for new/upcoming episodes of your favourite shows and will download, sort and rename them. Imagine an ongoing weekly tv show Sonarr will automatically grab every new episode and will add it to your plex library.

Open sonarr in localhost:8989, in windows, make sure to enable firewall rules to access this in other devices on your network
Have a look here https://forums.sonarr.tv/t/cant-access-sonarr-on-a-networked-computer/11195/7

Configuring Indexers

Go to settings -> indexers

In here we are going to connect to jackett

Click on the + button to add a new indexer

As you can see there a few Indexeres available already, but we are going to use Torznab to communicate with our Jackett service

A special "all" indexer is available at /api/v2.0/indexers/all/results/torznab. It will query all configured indexers and return the combined results.

In the URL field use: http://127.0.0.1:9117/api/v2.0/indexers/all/results/torznab

Make sure on the categories dropdown to select everything in TV and same for Anime categories.

Go to Jackett and copy the API key in the top right and paste it in the API Key field in sonarr

name the indexer All and click on the save button

Download clients

Go to download clients in settings and add new download client

Select your Download client mine is qBittorrent so will go ahead and select that,
I will open another modal, enter a name and the username and password you set
If you changed the port number make sure to update that too

It also created a category called tv-sonarr which will put all your sonarr downloads inside a folder called tv-sonarr

Click save

Connect

Now go to settings -> Connect

We now need to connect to plex, so once a show has finished downloading this will notify plex to update the server, click on the add Connections button and select plex media serve

There are a few options here you can also use services like discord to notify you that a show as finished downloaded or been added to plex

Click on Authenticate with Plex.tv, make sure your host is correct then click save.

Media Management

Click on add Root folder, find a path to your tv show folder you set up for plex and add it

This should match the same directory in your plex media server for tv shows

Under Rename Episodes
Select the checkbox

This will rename every file to match that standard

Now click on Save changes at the top of Media Management

Profiles

If you go into settings -> profiles and delete the ones you do not want for example I want all my shows to be at least 1080p quality minimum, Delete all profiles, create a new one and select your desired resolutions, for me it will be 1080p/4k resolutions only

Click on save button

Adding a show

If you go into the series and click add new, search for the show you want, then select the show a modal should appear

I'm going to add House of Dragon

Root folder is being automatically selected since we have only one, and the same for profiles. We can click on start search for missing episodes, but I will do this manually for now since I don't want to download the entire season, click Add button

You can start a search by clicking on the season folder if its a completed show it will download a season pack or you can search per episode

I will search for Episode 1, this will enable a search on using our indexer from jackett.
If we open our torrent client we will see the show downloading

We can notice on Qbitorrent the category for this download is tv-sonarr

The amazing thing about Sonarr is it will now keep monitoring this Show so when season two is released it will automatically grab it and download the episode for you.

Once the download is complete it will be available on Plex

Now if you look in the completed-torrents folder and the tvshow folder, you have two copies at the moment, this is to ensure Sonarr doesn't interfere with the seeding on the torrent client side, because we told Qbittorrent to remove and delete files once it was reached a seed ratio of 1 or passed a certain time whichever comes first. This will ensure the torrent file is seeded and then it will be deleted not to take out space on the HDD

Radarr

Radarr is basically a fork of Sonarr but to manage movies, You can add upcoming movies and once it's available it will grab it and add it to plex

To set up Radarr repeat everything on Sonarr steps.

Overseerr

Overseerr is a request management and media discovery tool built to work with your existing Plex ecosystem.

Overseerr helps you find media you want to watch. With inline recommendations and suggestions, you will find yourself deeper and deeper in a rabbit hole of content you never knew you just had to have.

Overseerr connect with Sonarr and Radarr to facilitate media request all in one place

Quickest way to get started with overseer is to install it with docker compose


version: '3'

services:
  overseerr:
    image: sctx/overseerr:latest
    container_name: overseerr
    environment:
      - LOG_LEVEL=debug
    volumes:
     - ./config:/app/config
    ports:
      - 5055:5055
    restart: unless-stopped

Don't forget to map the correct path to the config folder

Build the docker image and complete the set up when you go to localhost:5055 you will need to log in with your plex account

Once you get to last step it will ask you to add Sonarr and Radarr settings.
You can find the API keys for Sonarr/Radarr in Settings -> General -> Security -> API Key

Starting with Sonarr settings

At this point, you will need the IP of your device as Overseerr is running inside a docker image and it can't access the localhost hostname

Apart from required settings enable these settings too:

Default 4k server,✔️
4K server ✔️
Season Folders ✔️
Enable Scan ✔️
Enable Automatic ✔️
Anime Quality Profile: select your profile
Anime Root Folder: select your root folder
Anime Language: select default language

Test it and then Add Server

Now add Radarr server

Default 4k server,✔️
4K server ✔️
Season Folders ✔️
Enable Scan ✔️
Enable Automatic ✔️
minimum availability: Announced

Add server and finish the setup

You will see your dashboard and you can see all your current media here from Sonarr/Radarr

To request a new show/movie select the movie/show you want to download

Click on the request button on the right side a modal will show and click on request button

The movie should now be added your Radarr library and begin to download

You can see both the movie downloaded and added to your Radarr library, If you add a TV show it will do the same thing

Authentication in Nuxt 3

Rafael Magalhaes — Tue, 24 Jan 2023 22:26:41 +0000

How to add authentication in nuxt 3

I've seen a few tutorials on this subject but most of them cover authentication with Supabase, Amplify or Firebase, most of these services have a nuxt component which makes it easier to add authentication to your website.

If you're like me and use the middleware to handle the authentication state of your application by calling an endpoint which provides a token. I will show you how to do this in nuxt 3.

I will be using DummyJSON fake API to help me do this.

What is DummyJSON?

With DummyJSON, what you get is different types of REST Endpoints filled with JSON data which you can use in developing the frontend with your favourite framework and library without worrying about writing a backend.

Essentially it's a mock API with few endpoints, most importantly it provides a rest login endpoint which returns a fake token.

Creating the project

first lets start by creating a project

npx nuxi init nuxt3-auth

Create the following folders/files in the root of the project

pages
- index.vue
- login.vue
- about.vue
layouts
- default.vue

delete app.vue

Creating required pages

pages/index.vue

<template>
  <div>Hello Home Page</div>
</template>
<script lang="ts" setup></script>

pages/about.vue

<template>
  <div>About Page</div>
</template>
<script lang="ts" setup></script>

The login page is going to be a very simple just username and password fields with a login button

pages/login.vue

<template>
  <div>
    <div class="title">
      <h2>Login</h2>
    </div>
    <div class="container form">
      <label for="uname"><b>Username</b></label>
      <input
        v-model="user.username"
        type="text"
        class="input"
        placeholder="Enter Username"
        name="uname"
        required
      />

      <label for="psw"><b>Password</b></label>
      <input
        v-model="user.password"
        type="password"
        class="input"
        placeholder="Enter Password"
        name="psw"
        required
      />

      <button @click.prevent="login" class="button">Login</button>
    </div>
  </div>
</template>
<script lang="ts" setup>
const user = ref({
  username: '',
  password: '',
});

const login = async () => {
  // TODO send user Data to the login endpoint and redirect if  successful 
};
</script>

Creating our default layout

Nuxt provides a customizable layouts framework you can use throughout your application, ideal for extracting common UI or code patterns into reusable layout components.
Layouts are placed in the layouts/ directory and will be automatically loaded via asynchronous import when used.

Our layout is going to consist of a navbar with Home, About, and Login links, and a footer at the bottom with our content in the middle the <slot/> will automatically be replaced with our code in the pages

layouts/default.vue

<template>
  <div>
    <header>
      <ul>
        <li><nuxt-link to="/">Home</nuxt-link></li>
        <li><nuxt-link to="/about">About</nuxt-link></li>
        <li v-if="!authenticated" class="loginBtn" style="float: right">
          <nuxt-link to="/login">Login</nuxt-link>
        </li>
      </ul>
    </header>
    <div class="mainContent">
      <slot />
    </div>
    <footer>
      <h1>Footer</h1>
    </footer>
  </div>
</template>

Middlewares

Nuxt provides a customizable route middleware framework you can use throughout your application, ideal for extracting code that you want to run before navigating to a particular route.
Route middleware is navigation guards that receive the current route and the next route as arguments.

We are going to create a named route middleware. which is placed in the middleware/ directory and will be automatically loaded via asynchronous import when used on a page.

// middleware/auth.ts
export default defineNuxtRouteMiddleware((to, from) => {
    console.log('From auth middleware')
})

add a console log to verify this is working on our homepage we can now add this middleware

pages/index.vue

<template>
  <div>Hello Home Page</div>
</template>
<script lang="ts" setup>
  definePageMeta({
    middleware: 'auth' // this should match the name of the file inside the middleware directory 
})
</script>

run the code and check and verify if you can see the console.log

in this case, I want to protect every route so how do I make this middleware global? we just need to add the .global suffix to our file like so auth.global.ts and it will automatically run on every route change.

we can now remove this piece of code from the homepage

  definePageMeta({
    middleware: 'auth' // this should match the name of the file inside the middleware directory 
})

Store with Pinia

I'm going to create an auth store to handle login and the authenticated state. I've already covered an article on how to set up Pinia in nuxt 3. Pinia and Nuxt 3

// store/auth.ts

import { defineStore } from 'pinia';

interface UserPayloadInterface {
  username: string;
  password: string;
}

export const useAuthStore = defineStore('auth', {
  state: () => ({
    authenticated: false,
    loading: false,
  }),
  actions: {
    async authenticateUser({ username, password }: UserPayloadInterface) {
      // useFetch from nuxt 3
      const { data, pending }: any = await useFetch('https://dummyjson.com/auth/login', {
        method: 'post',
        headers: { 'Content-Type': 'application/json' },
        body: {
          username,
          password,
        },
      });
      this.loading = pending;

      if (data.value) {
        const token = useCookie('token'); // useCookie new hook in nuxt 3
        token.value = data?.value?.token; // set token to cookie
        this.authenticated = true; // set authenticated  state value to true
      }
    },
    logUserOut() {
      const token = useCookie('token'); // useCookie new hook in nuxt 3
      this.authenticated = false; // set authenticated  state value to false
      token.value = null; // clear the token cookie
    },
  },
});

We have two actions authenticateUser and logUserOut

authenticateUser function receives a payload of username and password, then we make a post request using the useFetch hook to /auth/login endpoint from dummyjson, we pass username and password in the body.
we should receive a response like so

{
  "id": 15,
  "username": "kminchelle",
  "email": "kminchelle@qq.com",
  "firstName": "Jeanne",
  "lastName": "Halvorson",
  "gender": "female",
  "image": "https://robohash.org/autquiaut.png?size=50x50&set=set1",
  "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MTUsInVzZXJuYW1lIjoia21pbmNoZWxsZSIsImVtYWlsIjoia21pbmNoZWxsZUBxcS5jb20iLCJmaXJzdE5hbWUiOiJKZWFubmUiLCJsYXN0TmFtZSI6IkhhbHZvcnNvbiIsImdlbmRlciI6ImZlbWFsZSIsImltYWdlIjoiaHR0cHM6Ly9yb2JvaGFzaC5vcmcvYXV0cXVpYXV0LnBuZz9zaXplPTUweDUwJnNldD1zZXQxIiwiaWF0IjoxNjM1NzczOTYyLCJleHAiOjE2MzU3Nzc1NjJ9.n9PQX8w8ocKo0dMCw3g8bKhjB8Wo7f7IONFBDqfxKhs"
}

if we have data we save the token to the cookies

logUserOut this function simply removes the token from the cookies

Finalising

now we need to modify the middleware, login and layouts

Login page

now we can import our auth store and finish the login function

pages/login.vue


<script lang="ts" setup>
import { storeToRefs } from 'pinia'; // import storeToRefs helper hook from pinia
import { useAuthStore } from '~/store/auth'; // import the auth store we just created

const { authenticateUser } = useAuthStore(); // use authenticateUser action from  auth store

const { authenticated } = storeToRefs(useAuthStore()); // make authenticated state reactive with storeToRefs

const user = ref({
  username: 'kminchelle', 
  password: '0lelplR',
});
const router = useRouter();

const login = async () => {
  await authenticateUser(user.value); // call authenticateUser and pass the user object
  // redirect to homepage if user is authenticated
  if (authenticated) {
    router.push('/');
  }
};
</script>

layouts

in the default layout we now display a login/logout button according to the state of our app and handle the logout event

adjust the navbar to show and or hide the buttons based on the authenticated state

        <li v-if="!authenticated" class="loginBtn" style="float: right">
          <nuxt-link to="/login">Login</nuxt-link>
        </li>
        <li v-if="authenticated" class="loginBtn" style="float: right">
          <nuxt-link @click="logout">Logout</nuxt-link>
        </li>

add the following to the script in layouts/default.vue

<script lang="ts" setup>
import { storeToRefs } from 'pinia'; // import storeToRefs helper hook from pinia
import { useAuthStore } from '~/store/auth'; // import the auth store we just created

const router = useRouter();


const { logUserOut } = useAuthStore(); // use authenticateUser action from  auth store
const { authenticated } = storeToRefs(useAuthStore()); // make authenticated state reactive with storeToRefs

const logout = () => {
  logUserOut();
  router.push('/login');
};
</script>

middleware

Now in middleware, we can handle the authentication based on the value of the token in the cookies.

export default defineNuxtRouteMiddleware((to) => {
  const { authenticated } = storeToRefs(useAuthStore()); // make authenticated state reactive
  const token = useCookie('token'); // get token from cookies

  if (token.value) {
    // check if value exists
    authenticated.value = true; // update the state to authenticated
  }

  // if token exists and url is /login redirect to homepage
  if (token.value && to?.name === 'login') {
    return navigateTo('/');
  }

  // if token doesn't exist redirect to log in
  if (!token.value && to?.name !== 'login') {
    abortNavigation();
    return navigateTo('/login');
  }
});

Preview

Repo: github

Docker and Nuxt 3

Rafael Magalhaes — Tue, 03 Jan 2023 23:17:00 +0000

Lets start by creating a Dockerfile in the root of the project

Dockerfile



# use node 16 alpine image
FROM node:16-alpine

# create work directory in app folder
WORKDIR /app

# install required packages for node image
RUN apk --no-cache add openssh g++ make python3 git

# copy over package.json files
COPY package.json /app/
COPY package-lock.json /app/

# install all depencies
RUN npm ci && npm cache clean --force

# copy over all files to the work directory
ADD . /app

# build the project
RUN npm run build

# expose the host and port 3000 to the server
ENV HOST 0.0.0.0
EXPOSE 3000

# run the build project with node
ENTRYPOINT ["node", ".output/server/index.mjs"]

now lets make a docker-compose file

docker-compose.yml



version: "3"

services:
  nuxt-docker-example:
    container_name: nuxt-docker-example
    build:
      context: .
      dockerfile: DockerFile
    ports:
      - "3000:3000"

build the docker image

docker compose up --build you can add -d at the end to run it in the background

if everything went alright, open localhost:3000 and we can see the project running.

Docker image size

If we look over at the docker desktop and see the image size its over 850MB

We can reduce the size of the image by adjusting the Dockerfile using multi-stage builds

Docker multi stage

Multistage builds make use of one Dockerfile with multiple FROM instructions. Each of these FROM instructions is a new build stage that can COPY artifacts from the previous stages. By going and copying the build artifact from the build stage, you get rid of all the unnecessary packages and files. All these steps create additional layers, and you want to eliminate them from the final image. thus reducing the size of the final image

lets adjust the dockerfile



# use node 16 alpine image as build image
FROM node:16-alpine as builder

# create work directory in app folder
WORKDIR /app

# install required packages for node image
RUN apk --no-cache add openssh g++ make python3 git

# copy over package.json files
COPY package.json /app/
COPY package-lock.json /app/

# install all depencies
RUN npm ci && npm cache clean --force

# copy over all files to the work directory
ADD . /app

# build the project
RUN npm run build

# start final image
FROM node:16-alpine


WORKDIR /app

# copy over build files from builder step
COPY --from=builder /app/.output  app/.output
COPY --from=builder /app/.nuxt  app/.nuxt

# expose the host and port 3000 to the server
ENV HOST 0.0.0.0
EXPOSE 3000

# run the build project with node
ENTRYPOINT ["node", ".output/server/index.mjs"]

the first line of code in the file changed to

FROM node:16-alpine as builder

this tells docker that this stage is just for building our application

after npm run build command we added another FROM command
FROM node:16-alpine because this is a new stage we specified a WORKDIR again, then we copied over the files from the build stage to the final stage.

And that's it, the image size is now 364MB! A big difference from the previous 886MB

)

DEV Community: Rafael Magalhaes

Custom fetch with Interceptors and logs in nuxt 3

Logging

My first npm package

Merging Data: The Birth of [@rrrm/countries](https://www.npmjs.com/package/@rrrm/countries)

Key Features of @rrrm/countries

Usage

Data Files

Authentication in Nextjs

store

Layout

middleware

Pages

Generating Dynamic Routes for Static Site Generation with Nuxt 3

What is Dynamic Route Generation?

How to Generate Dynamic Routes in Nuxt 3:

Top 5 plugins for Nuxt 3

vueUse

Tailwind

@sidebase/nuxt-auth

Nuxt-trpc

Pinia

The DevOnly component in Nuxt 3: A developer's best friend

Introduction

What is the DevOnly component?

How to use the DevOnly component in Nuxt 3

Best practices for using the devonly component

Building a website builder with React

Creating the project

complete code

Create an RSS feed with Nuxt 3

What is RSS?

Benefits of having RSS feed

Setting up a Nuxt 3 project

Creating a server route for your RSS feed

Dynamically generate open graph images

What is open graph

What is Tailgraph

How to use it

Applying this to the code

Home media server with plex, sonarr, radarr, qbitorrent and overseerr

How to set up a media server at home

Prerequisites

Jackett

Qbittorent

Plex

Sonarr

Configuring Indexers

Download clients

Connect

Media Management

Profiles

Adding a show

Radarr

Overseerr

Authentication in Nuxt 3

How to add authentication in nuxt 3

What is DummyJSON?

Creating the project

Creating required pages

Middlewares

Store with Pinia

Finalising

Login page

layouts

middleware

Preview

Docker and Nuxt 3

Docker image size

Docker multi stage

Merging Data: The Birth of `[@rrrm/countries](https://www.npmjs.com/package/@rrrm/countries)`