DEV Community: Arnau Espin

Level up your NodeJS Dockerfiles with these 3 tips ⚡🐋

Arnau Espin — Sat, 25 Nov 2023 22:06:04 +0000

Dockerfiles are the blueprints for your containers. They are simple text files with a list of commands that you would normally execute manually to create a container image. The Dockerfile is the source code for your container.

Dockerfiles are easy to write, but they can get complicated quickly. Here are some tips to help you write better Dockerfiles.

I am going to share with you 3 tips that I have learned over the years. These tips will help you write better Dockerfiles. They will make your containers more stable and secure. They will also make your containers smaller and faster. I hope you find them useful.

If your Dockerfile looks like this, it can be improved:

FROM node:lts-alpine
WORKDIR /app
COPY . .
RUN npm install
CMD ["npm", "run", "start"]

1- Choose the right base image

A base image is the starting point for your container. It is the first line in your Dockerfile. The base image is the foundation for your container. It is the operating system and the software that you will use to build your container.

Alpine is the most popular base image for Docker containers. It is a lightweight Linux distribution that is optimized for containers. It is small, fast, and secure. It is a good choice for most containers. But... it is not officially supported by Docker. It is maintained by the Alpine Linux community.

A better approach would be to use the bullseye base image. It is the official Debian base image for Docker. It is maintained by the Debian community. It is a good choice for most containers. It is small, and fast, and if you go for the slim variant, it is also secure and more lightweight.

FROM node:20.9.0-bullseye-slim

Also, specify the version of the base image. This will ensure that your container will always use the same version of the base image. This will make your container more stable and secure. lts is not a version. It is a tag. It is not recommended to use tags for base images. Use the version instead.

2- Do you need to copy everything?

Probably not, I am pretty sure you do not need a .prettierignore or .gitignore among other files in a production Docker container.

You can solve this in 2 ways:

Specify a list of COPY directives for each file/folder.
Specify the list of what you do NOT want to copy in a .dockerignore file.

I prefer specifying a list of the files/folders I want to copy to the image. Despite this, I would recommend you to use a .dockerignore file to avoid copying unnecessary files to the image as it is a good practice.

Also, for security reasons, you should use a user with fewer privileges than root, as by default, Docker images are run by a root user (depending on the base image you are using). You can check this by running whoami in your Dockerfile.

FROM node:20.9.0-bullseye-slim
RUN echo "whoami: $(whoami)" # <--- whoami: root

⚠️ If you are using docker with buildkit instead of the classic engine, pass this arg to the docker command to build: --progress=plain

docker build -t my-node-app --no-cache --progress=plain .

In this base image from node and some others, including alpine base images, we have this node user that we can use instead of root, with fewer privileges. We should add this user to the image and use it instead of root, if possible.

You can find more info regarding the use of USER in a Dockerfile here.

FROM node:20.9.0-bullseye-slim
RUN echo "whoami: $(whoami)" # <--- whoami: root
USER node
RUN echo "whoami: $(whoami)" # <--- whoami: node
# Now we are using the 'node' user instead of root for the rest of the Dockerfile.

The --chown=node:node option ensures that the ownership of the copied files is set to the node user and group.

FROM node:20.9.0-bullseye-slim
WORKDIR /app
USER node
COPY --chown=node:node ./src ./src
COPY --chown=node:node ./package*.json ./

Keep in mind if you set the WORKDIR to /app, it means that the COPY directives, among other directives, will copy the files to the WORKDIR, which you can specify with .

So, it is the same to have:

FROM node:20.9.0-bullseye-slim
WORKDIR /app
COPY --chown=node:node ./src /app/src/

than

FROM node:20.9.0-bullseye-slim
WORKDIR /app
COPY --chown=node:node ./src ./src/

If you run

FROM node:20.9.0-bullseye-slim
WORKDIR /app
RUN echo "Working dir: $(pwd)" # <-- Working dir: /app

You will see the output: Working dir: /app
Both approaches are perfectly valid.

3- Multi-stage builds.

Why? Security and size.

Size: does your final image need to have a package-lock.json, even a package.json ? Probably not, a NodeJS app needs the node_modules folder and the JS source code, usually in a JS project located in a src folder and if it is a TS project, in a dist folder where the compiled code from TS to JS is located.

If your NodeJS app is written in TypeScript, you might think:

FROM node:20.9.0-bullseye-slim
RUN apt-get update && apt-get install -y # <-- Maybe needed for your app
WORKDIR /app
COPY . /app
RUN npm ci --only=production
RUN npm run build # compile TS to JS
RUN rm -rf /app/src # <------- easy fix
CMD ["node", "dist/index.js"]

Ok... what if to build or install the dependencies, you had to set up an NPM_TOKEN?

FROM node:20.9.0-bullseye-slim
RUN apt-get update && apt-get install -y # <-- Maybe needed for your app
ENV NPM_TOKEN abc1234_=xyz
WORKDIR /app
COPY . /app
RUN npm ci --only=production
RUN npm run build # compile TS to JS
RUN rm -rf /app/src # <------- easy fix
CMD ["node", "dist/index.js"]

If you run docker history <name-of-the-image> you will be able to see the NPM_TOKEN. Of course, you can always run RUN export NPM_TOKEN=123 to remove it from the final image, but it is not the best approach and will still be visible in the docker history.

Also, you had to install some packages like gcc (apt-get update && apt-get install) to compile some NodeJS packages. Of course, you can always remove these packages like gcc but... Check the next approach.

FROM node:20.9.0-bullseye-slim as builder
RUN apt-get update && apt-get install -y # <-- Maybe needed for your app
ENV NPM_TOKEN abc1234_=xyz
WORKDIR /app
COPY . /app
RUN npm ci --only=production
RUN npm run build

# Here down, we are creating a new image from a clean 'node:20.9.0-bullseye-slim' and this will be the final image.
FROM node:20.9.0-bullseye-slim as prod
USER node
WORKDIR /app
COPY --chown=node:node --from=builder /app/node_modules ./node_modules
COPY --chown=node:node --from=builder /app/dist ./dist
ENV production # <-- always good to have it
CMD ["node", "dist/index.js"]

With this approach, you get a much cleaner Docker image without unnecessary stuff and any private ENV arg or similar in it.

Bonus tip ➡️

In Docker images and containers, you do not need to have the dotenv package, since Docker sets the ENV variables for you if you specify them when running the container via --env-file for example.

Conclusion

Writing Dockerfiles is easy, but it can get complicated quickly. These tips will help you write better Dockerfiles. They will make your containers more stable and secure. They will also make your containers smaller and faster.

If you want to learn more about Docker, check out the official Docker docs.

You can connect with me on Github or Linkedin.

rpcbenchmark.com - New SaaS to benchmark RPC Nodes

Arnau Espin — Mon, 21 Aug 2023 17:03:57 +0000

Have you ever needed to compare different RPC nodes for your dApp in Ethereum or Solana? This might be of your interest 👇

What is rpcbenchmark.com

I just published my latest project: rpcbenchmark.com this is a tool to benchmark RPC Nodes from different blockchains like Solana, Ethereum, Near, etc. It has a free plan which is unlimited benchmarks but maximum with 2 RPCs. You can also buy credits at a relatively low price and each benchmark with over 2 nodes is going to cost 1 credit.

How is the benchmark done?

We have different lambda functions deployed in different regions across the globe. These lambdas make 50 concurrent requests to the RPC nodes we wish to compare. We compute the average time of each request and then we return this number as the latency, expressed in ms. As you can see it is very simple.

Here I benchmarked Helius vs HelloMoon Solana Free Tier RPC.

Additionally I am giving away 11 coupons for 5 FREE credits (5€) in rpcbenchmark.com/buy

RPCB2

RPCB3

RPCB4

RPCB5

RPCB6

RPCB7

RPCB8

RPCB9

RPCB10

RPCB11

RPCB12

Tech Stack

The tech stack I used is:

NextJS
Postgre
Kafka
Stripe
DigitalOcean
TRPC
Kysely

Unhex - convert colors to RGB, HEX or HSL in bulk

Arnau Espin — Tue, 20 Sep 2022 21:27:21 +0000

Working on a large codebase with multiple css files, inline styles and tech lead says all colors now gotta be as HSL?

Changing 1 by 1? Forget that.

In this tutorial we will discover unhex - a nodeJS package that replaces all the colors in all the files you choose in a given directory.

Github Repository

npm link

Go to your project root directory and run npx unhex@latest a CLI inquirer will appear. Select which file extensions you wish to modify, ignore any files (like node_modules) and you are ready to go!

All the files matching your configuration will be parsed and modified to whatever color representation you chose!

React animation onDestroy (removed from the DOM)

Arnau Espin — Thu, 14 Jul 2022 20:47:05 +0000

Hello and welcome to this post about animating a transition in React when a component is destroyed, AKA removed from the DOM.

I usually face issues when applying some fadeIn/fadeOut transition on a React component or JSX element. Because when the component/element is removed from the DOM I can no longer apply any transition.

Let's write some basic React app with a counter which is increased by 1 every second.
We display the counter and below it we display a react image whenever the count is divisible by 3.

Demo here.

// Disable React Strict mode for this example
function App() {
  const [count, setCount] = useState(0);
  const [isDivisibleByThree, setIsDivisibleByThree] = useState(false);

  useEffect(() => {
    if (count !== 0 && count % 3 === 0) setIsDivisibleByThree(true);
  }, [count]);

  useEffect(() => {
    setInterval(() => {
      setCount((p) => (p += 1));
    }, 1000);
  }, []);

  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        gap: "50px",
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <div>
        <h1>count is {count}</h1>
      </div>
      <p>
        {isDivisibleByThree && (
          <img ref={imageRef} src={reactLogo} alt="react logo"/>
        )}
      </p>
    </div>
  );
}

We can animate whenever the <img> is visible with the following CSS.
This way when the image first appears it will have some slide-in animation, moving from top to bottom.

img {
  animation: slide-in 0.5s ease-in-out;
}
p {
  height: 5rem;
  width: 5rem;
}
@keyframes slide-in {
  0% {
    opacity: 0;
    transform: translateY(-50%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

So... how can we animate when the <img> element is removed from the DOM.

Let's create a custom hook called useHandleDestroyAnimated, this hook accepts a ref (from the useRef hook) from the HTML element we wish to animate on destroy.

Before hiding the <img> through setting the isDivisibleByThree state to false, we animate its destruction after 1000ms, then, we set the state to false.

async function sleep(ms: number) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

function useHandleDestroyAnimated<T extends HTMLElement>(
  ref: MutableRefObject<T | null>
): [boolean, (_: boolean) => void] {
  const [state, setState] = useState(false);

// everytime the state or ref change, if state is true, we animate the destroy of the component.
  useEffect(() => {
    if (state) {
      handleDeletion(ref);
    }
  }, [ref, state]);

  function handleDeletion<T extends HTMLElement>(
    element: MutableRefObject<T | null>
  ) {
    const style = element?.current?.style;
    if (!style) return;
    sleep(1000).then(() => {
      style.transition = "all 0.5s";
      style.transform = "translateY(-50%)";
      style.opacity = "0";
      sleep(1000).then(() => {
        setState(false);
      });
    });
  }
  return [state, setState];
}

Let's add the ref from the useRef hook to the App.tsx:

const imageRef = useRef<HTMLImageElement | null>(null);
.....
.....
.....
 <p>
        {isDivisibleByThree && (
          <img ref={imageRef} src={reactLogo} alt="react logo" />
        )}
      </p>

The final code is:

import { useEffect, useState, MutableRefObject, useRef } from "react";
import reactLogo from "./assets/react.svg";
import "./App.css";

async function sleep(ms: number) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

const styles = Object.freeze({
  opacity: "0",
  transform: "translateY(-50%)",
  transition: "all 0.5s",
});

function useHandleDestroyAnimated<T extends HTMLElement>(
  ref: MutableRefObject<T | null>
): [boolean, (_: boolean) => void] {
  const [state, setState] = useState(false);

  useEffect(() => {
    if (state) {
      handleDeletion(ref);
    }
  }, [ref, state]);

  function handleDeletion<T extends HTMLElement>(
    element: MutableRefObject<T | null>
  ) {
    const style = element?.current?.style;
    if (!style) return;
    sleep(1000).then(() => {
      style.transition = styles.transition;
      style.transform = styles.transform;
      style.opacity = styles.opacity;
      sleep(1000).then(() => {
        setState(false);
      });
    });
  }
  return [state, setState];
}

function App() {
  const [count, setCount] = useState(0);
  const imageRef = useRef<HTMLImageElement | null>(null);
  const [isDivisibleByThree, setIsDivisibleByThree] =
    useHandleDestroyAnimated(imageRef);

  useEffect(() => {
    if (count !== 0 && count % 3 === 0) setIsDivisibleByThree(true);
  }, [count]);

  useEffect(() => {
    setInterval(() => {
      setCount((p) => (p += 1));
    }, 1000);
  }, []);

  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        gap: "50px",
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <div>
        <span>count is {count}</span>
      </div>
      <p>
        {isDivisibleByThree && (
          <img ref={imageRef} src={reactLogo} alt="react logo" />
        )}
      </p>
    </div>
  );
}

export default App;

I hope you found this useful!

You can follow me on:

Github

Breaking down an advanced Typescript type!

Arnau Espin — Thu, 19 May 2022 22:17:57 +0000

Introduction

Hello and welcome to my post about breaking down some advanced types in typescript!

On this example we have a Type which receives a string of a number "12" and provides 12.

type Twelve = StringToNumber<"12"> // 12

Code

type StringToNumber<
  Len extends string,
  Arr extends unknown[] = []
> = `${Len}` extends `${Arr["length"]}`
  ? Arr["length"]
  : StringToNumber<Len, [...Arr, unknown]>;

type One = StringToNumber<"1"> // 1

So, wtf did we just read? Well, it is a type that takes a string and its output is that string parsed to a number.

So let's suppose we have:

type One = StringToNumber<"1"> // 1

// 1st time this type is used by `type One = StringToNumber<"1">`
type StringToNumber<
  Len extends string, // The string we are passing "1". It is a generic that we restrict to 'string' using the 'extends' keyword.
  Arr extends unknown[] = [] // Another generic, in this case an array of unknown which by default is an empty array.
> = `${Len}` extends `${Arr["length"]}` // Is the template literal `1` == `[].length` ? At the start, the Arr is an empty array, so the length is 0. So 1 extends 0 is false. Think about extends in this case as '==' .
  ? Arr["length"] // If so, we return the length of the array.
  : StringToNumber<Len, [...Arr, unknown]>; // Else, we call again (recursive) the StringToNumber type and we pass the 2 generic types: Len="1" and the Arr which at the moment is [unknown], since [...Arr, unknown] becomes [unknown] due to spreading Arr which is an empty array.

// The 2nd iteration, called by the recursivity from the previous statement.
type StringToNumber<
  Len extends string, // The string we are passing "1" (again)
  Arr extends unknown[] = [] // Now we are actually passing an array, which at the moment is [unknown] of length 1.
> = `${Len}` extends `${Arr["length"]}` // `1` == [unknown].length ? Now this is true, because Arr.length is 1
  ? Arr["length"] // Now, we return the length of the array, which is 1
  : StringToNumber<Len, [...Arr, unknown]>;

Conclusion

Typescript complex types can be sometimes hard to read, no doubt on that, although if they are broken down step by step can become somewhat clear.

You can follow me on:

Github

Cache a response in Vercel using SSR and serverless functions in SvelteKit

Arnau Espin — Fri, 13 May 2022 16:16:27 +0000

TLDR

I will show how we can cache the response of an API using Vercel caching and a serverless function (function that is executed during Server Side Rendering in this case and not on client). In this case of the BTCUSD price obtained from a call to the Binance API.

Introduction

Hello and welcome to my second post. Today, I will show you how we can cache the response of a function that runs on the server (Vercel in this case) to optimize the number of calls this functiom does to an external API. This means that the API call will be done on the server and not on client, reducing the payload of the user accessing the website.

Application

Let's suppose we have a website that everytime is rendered it fetches the price of Bitcoin from the Binance API. This means that everytime a user accesses our site, it fetches data from the Binance API. If we have 100 visits in 1 minute, from visit 50th on, the user will get a 429 HTTP ERROR (too many requests). Is it needed to call the API multiple times to obtain BTCUSD price which will barely change during those seconds? - Probably not.

So let's see how we can solve this by caching the BTCUSD price on Vercel. Let's suppose we have 3 clients that access our website, the first one will be the one that calls the serverless function and caches the response for that function for 3600seconds.

Code

In this case we only want to cache the response if we actually get a price number from the Binance API. We can use bodyShouldBeCacheable or any other valid method.

// src/routes/api/btcusd.ts
import type { RequestHandler } from '@sveltejs/kit'

const BTCUSDT= 'https://api1.binance.com/api/v3/ticker/price?symbol=BTCUSDT'

export const get: RequestHandler = async () => {
    const getBtcUsdtPrice = async (): Promise<number | undefined> => {
         try{
             const data = await fetch(BTCUSDT)
             const { price } = await data.json()
             return price
         } catch(err) {
             return undefined
         }
    }

    const body = await getBtcUsdtPrice()
    const bodyShouldBeCacheable = !isNaN(body)

    return {
        status: 200,
        body,
        headers: {
            'Cache-Control': bodyShouldBeCacheable 
             ? 'max-age=3600, public' 
             : 'no-cache',
        },
    }
}

// src/routes/index.svelte

const btcPrice: Writable<number> = writable(0)

const fetchAndUpdateExchanges = async () => {
    const response = await fetch('/api/exchanges')
    const btcPriceData= await response.json()
    btcPrice.set(btcPriceData)
}

Conclusion

Using SSR is always good choice to reduce the amount of data the end user is downloading to render your site, specially if running on mobile phone with limited data to use, or slow connections.
On the other hand Vercel will not let you render data on server for free (completely) forever, so, caching a response will also aid your pocket!

You can follow me on:

Github

Shared state of a store among multiple clients in Svelte Kit using SSR

Arnau Espin — Sat, 30 Apr 2022 10:53:16 +0000

TLDR

Welcome to my first post, what I will show here is how to share a svelte store among multiple clients, that means if I have a store that displays a counter which is increased every 5 seconds, all the clients will see the same value of the counter, no matter when they opened our site.
That is useful when we attempt to feed the same data to all our clients and avoiding repetitive fetch requests, in case we have a data store that grabs info from an API, not a counter store.

Introduction

Hello, in this post I will describe how we can have a common svelte store that its state is shared among all our clients using it in the load function of Svelte-kit.

According to the Load function in the official docs

Mutating any shared state on the server will affect all clients, not just the current one.

Application

So, now you might be wondering, what is the use case for this?

Let's imagine that in our page index.svelte we are fetching the price of the top 10 stocks from an API that limits its requests to 20requests/min. If we have 3 clients opening our site at the same time (30 requests), the 3rd one will have an HTTP ERROR 429 (Too many requests).The data will be the same for all 3 clients, so do we need to fetch the data 3 times?

Well, if our site uses Client Side Rendering, yes, there is not another way to achieve it, but what if we use Server Side Rendering?

Of course, you could have a server running along and use Redis or something else, but how do you "cache" on a serverless website?

Using the approach I presented you, it sort of saves the state of the store and share it among all the clients, this way only 1 request is done by the first client. And this state will live until you update it in the setInterval

So, let's see some code on how to implement this.

Code

The following image describes what we are attempting to:

In this example let's suppose we have a common store e.g. a Counter store, which is gonna increment by 1 every 5 seconds.


// store.ts
export const count = writable(0)
export const dateNow = writable(Date.now())

//index.svelte
<script context="module" lang="ts">
    import type { Load } from '@sveltejs/kit'
    import { get } from 'svelte/store'
    import { count, dateNow } from '../lib/store'

    // we need hydrate to be false for this to work
    export const hydrate = false 

    export const load: Load = async ({ fetch }) => {

        const FIVE_SEC_MS = 5 * 1000
        setInterval(() => {
            if (Date.now() - get(dateNow) > FIVE_SEC_MS) {
                count.update((n) => n + 1)
                dateNow.update(Date.now)
            }
        }, FIVE_SEC_MS)

        return {}
    }
</script>

<script lang="ts">
    let countValue: number = 0

    count.subscribe((value) => {
        countValue = value
    })

</script>

<span>
    {countValue}
</span>

We have a setInterval which is gonna be running on the background every 5 seconds, in case there is a new client, the setInterval is gonna be rebuilt causing asynchronous behavior we are trying to avoid, this will happen no matter what, but in order to keep all the clients synced we use the dateNow store this way only 1 simultaneous update will occur.
Then we check that the (dateNow store - the current time) is greater than 5 seconds, this way we make sure that we keep all clients synced.

Video:

You can find the source code here

You can follow me on:

Github