DEV Community: Up9t

Deploying Single Page Application (SPA) or Static Site Generation (SSG) with Nginx

Up9t — Mon, 23 Feb 2026 06:08:56 +0000

Today, I'm going to share a way to deploy single page application or SPA with Nginx. This is a common way to deploy your frontend especially when you work for a small company or startup.

What's SPA?

Single Page Application (SPA) usually refers to frontend, the web app that only consist of a single HTML page (index.html) but with many javascript scripts. It works by modifies the DOM elements inside it with JavaScript, could be removing, adding and changing HTML elements.

This is great for user interactivity but not so good for Search Engine Optimizations or SEO (how likely it is for your web app to be shown when you search it up on Google or any other search engines) as most of web crawlers don't execute JavaScript, so it only saw that empty index.html with the title and empty root element <div id="root"></div>.

If you really want to have good SEO for your app, you might need to consider using Server-Side Rendering (SSR) instead, or Static Site Generator (SSG). Thanks to the community we can now have many options of web frameworks that support SSG and SSR while still able to use your favorite stack.

How do I know, if I'm using SPA/SSG?

Well, if you use React or Vue and Vite as a bundler, then you could say that you already use SPA or SSG, you can see the final output inside the dist/ directory after executing the build command npm run build.
The good thing about this is your app has small in size, and it is portable, you just need the dist/ directory to deploy your app, you don't need the fat node_modules/ or src/ directory anymore, just the dist/ and you're good to deploy.

The other thing about SPA and SSG is you don't need a server running to make your web works. Well, you still need a server to serve the request from users, but your server doesn't execute the JavaScript, the client (user's browser) does. This is making it possible to deploy them as static files at edge using Content Delivery Network (CDN) for faster retrieval time.

Prerequisites

First thing you need to have the frontend ready, I mean you don't want to deploy a broken site and hoping people don't see it, right?

Second thing you need is a server. A server is basically just a computer, but always active 24/7, doesn't have keyboard, mouse or monitor, just the thing to do computations, you just need to rent them from a hosting provider. Although it's possible to build your own server.

You need a server to make your website accessible to public. Usually, you could just upload your dist/ directory to a CDN service like Cloudflare CDN or AWS CloudFront + S3, but that's not what we're going to do today. We're going to use a self-managed server, which still going to cost you some money.

If you can't afford a server just yet, it's fine, you can still run it from your computer, but it won't be accessible to public. Some cloud providers also offer free tier.

Third thing is a domain (optional). Domain is like this: www.example.com. When you purchase a server, it doesn't usually come with the domain. You can access it, but only through the IP address of that server.

Getting Started

Before we dive into the steps, let me show you a map to give you a clear picture about what we're trying to achieve.

Step 1 is building the project, with npm run build, done.
Now we go to the 2nd step, copy the build files (dist directory) into the server.

You can do this with multiple ways, but I'm going to use sftp here, you need to have ssh access first to the server before being able to use sftp.

SSH File Transfer Protocol, also known as Secure File Transfer Protocol (SFTP), is a network protocol that provides file access, file transfer, and file management over any reliable data stream. Source: wikipedia

Using sftp to transfer file, let's say I have dist/ directory in the /home/yasa/frontend/dist/ and I'm going to put the files in the server user directory as myfiles/ (/home/ubuntu/myfiles/):
1. Using SFTP is like using SSH:
```
# Connect sftp
sftp -i "./Downloads/demopurpose.pem" ubuntu@98.81.71.240
Connected to 98.81.71.240.

# Print current server working directory
sftp> pwd
Remote working directory: /home/ubuntu

# Upload directory to server with "put -r"
sftp> put -r /home/yasa/frontend/dist/ myfiles
Uploading /home/yasa/frontend/dist/ to /home/ubuntu/myfiles
Entering /home/yasa/frontend/dist/vite.svg
100% 1497 2.5KB/s 00:00    
Entering /home/yasa/frontend/dist/assets
index-CwjKBBbM.js 
100% 96KB 72.9KB/s 00:01    
index-CtZswya4.css
100% 15KB  53.6KB/s 00:00    
index.html
100% 457 0.8KB/s 00:00    

# Quit connection
sftp> quit
```
Now I have successfully uploaded the files to the server.

Install & Configure Nginx

Now you have the files on the server, the next step is to install and configure the web server to serve those files to the user. There are many options for web server, but I'm going to use Nginx because it's the most popular, open source and insanely fast too!

Install Nginx:
Installing Nginx is pretty straightforward in most linux distros, here I'm using ubuntu on the server:

# Login to server
ssh -i "./Downloads/demopurpose.pem" ubuntu@98.81.71.240

# Update cache
sudo apt update 

# Install nginx
sudo apt install -y nginx

# Check if nginx service is running
sudo systemctl status nginx

# Start service if it's not
sudo systemctl start nginx

# (Optional) Auto start on system reboot
sudo systemctl enable nginx

Installing done! Just need to configure.

Configure Nginx:

These are what we have so far:

dist/ directory at server /home/ubuntu/myfiles/
nginx installed on the server

Now, if nginx installed correctly, you should be able to see the nginx default webpage through the browser, type your Server IP in the browser:

It might not show if you have firewall blocking the http port. See how to configure firewall below.

We have to configure it to show our page instead of the default page:

You can see the default configuration at /etc/nginx/sites-available/default or /etc/nginx/conf.d/default.conf.

# or cat /etc/nginx/sites-available/default
cat /etc/nginx/conf.d/default.conf

Probably look like this:

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }
}

It's pretty easy to read right?

server {
    # listening on port 80, standard http server.
    listen       80; 

    # you can set it according to your domain (after you do domain registration), 
    # usually when you have multiple domains pointing to this server ip.
    server_name  localhost; 

    # url location
    location / {
        # root directory
        root   /usr/share/nginx/html;

        # automatically looking for index.html or index.htm if not specified in the url.
        index  index.html index.htm;
    }
}

First, you can see the root is in /usr/share/nginx/html or sometimes var/www/html.

root   /usr/share/nginx/html;

You can do it in two ways:

Move the dist/ to that directory.

mv /path/to/dist /usr/share/nginx/html; 
# or /var/www/html depending on your "root" in the nginx configuration

Change the configuration root.

root   /path/to/your/dist;

I'm usually sticking with the default, so I'm going to leave it as is and move my dist/ to the default directory instead.

mv /home/ubuntu/myfiles /usr/share/nginx/html

And then I'm going to add this line in the nginx configuration:

# First attempt to serve request as file, then
# as directory, as url, then fall back to displaying a 404.
try_files $uri $uri/ /index.html =404;

Edit the configuration file with nano:

sudo nano /etc/nginx/conf.d/default.conf

It's going to look like this:

server {
    listen       80;
    server_name  localhost;

    # other config  ...

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html =404; # Added this line
    }

    # other config ...
}

Configure firewall.

Firewall is a network security system that monitors and controls incoming and outgoing network traffic based on configurable security rules. (Source: wikipedia)

There are multiple firewalls available, iptables and nftables are usually the built in firewall in linux, so you don't need to install anything, but it is quite low level and not easy to work with. So, I'm going to use the higher level ones, ufw and firewall-cmd respectively. You should only use either of them not both.

ufw (unclomplicated firewall):
This is typically the firewall most Ubuntu user use.

Install ufw (if you haven't):

sudo apt update
sudo apt install -y ufw

Enable the firewall:

Allowing ssh port (important!):

Make sure you're allowing the ssh port first before enabling the firewall (it can lock you out of the system). Do as follows:
```
sudo ufw allow ssh
# or sudo ufw allow 22/tcp

sudo ufw enable
```

Check firewall status:

sudo ufw status

# example output:
Status: active

To                         Action      From
--                         ------      ----
22/tcp                     ALLOW       Anywhere                  
22/tcp (v6)                ALLOW       Anywhere (v6)

In this step you shouldn't be able to access your server through the browser anymore because there is no firewall rule to allow http port, we're going to allow that in the next step.

Allowing HTTP port:

sudo ufw allow http
# and allow "https" if necessary

sudo ufw status
# example output
Status: active

To                         Action      From
--                         ------      ----
22/tcp                     ALLOW       Anywhere                  
80/tcp                     ALLOW       Anywhere                                
22/tcp (v6)                ALLOW       Anywhere (v6)             
80/tcp (v6)                ALLOW       Anywhere (v6)

Now you can access your web again in the browser.

firewalld:
Firewalld is usually being used in Red Hat linux distributions, I personally like this more than ufw.

Install, start and enable on start firewalld:

sudo dnf update
sudo dnf install -y firewalld

sudo systemctl start firewalld
sudo systemctl enable firewalld

SSH port is usually allowed by default.

Allow HTTP port:

# Permanent rule will stay upon restart
sudo firewall-cmd --permanent --add-service=http

# Permanent config need to reload
sudo firewall-cmd --reload

# Check if http service has been allowed
sudo firewall-cmd --list-services

Now, you could access your web app in the browser once again.

Next step

There are more steps you need to do, but I'm not going to cover them in this article, here are some of them:

Registering domain for your server.
Allow port 443 (HTTPS) in the firewall configuration.
Configuring TLS (after domain registration).
And many more.

Conclusion

Deploying frontend app (SPA/SSG) in the server is quite easy with Nginx. You could utilize tools like SFTP to transfer the files to your server, and use UFW/firewall-cmd to easily configure the firewall.

Converting HEIC/HEIF Image in Node.js with Sharp Library

Up9t — Fri, 10 Oct 2025 02:41:25 +0000

Goal: At the end of this article, you should be able to convert heic/heif image extension to jpeg/webp/png in your Nodejs project without using any external cloud service. I'll provide a practical github repository for this, see the end.

I want to share my experience using the Sharp library from the Node Package Manager (NPM) to convert images with heic extension. First, let's talk about the problems.

Background

There are many problems. First is, Why did I have to mind the .heic extension?

The problem comes from the iPhone users, they produce this .heic extension as the output of the image from their camera. This behaviour is different from an Android phone, which usually outputs .jpeg or .jpg.

This makes thing more complicated on the backend side because browsers don't usually support displaying .heic image out-of-the-box. As a backend engineer, I'm the one who takes the responsibility for converting the images that aren't supported by the browser to display, to one that is widely compatible. In addition to that, I have to resize the image so it can load faster when displayed on the browser. Most of my customers are using iPhones, that's why I really have to consider this as an issue.

I had to either convert it to .jpeg or .webp. Webp is a good choice because it has a smaller file size than jpeg.

The other problem is, Sharp library doesn't come out-of-the-box with support for converting the .heic extension to something else. So, what should I do in this scenario?

Solution

On the sharp's documentation, I was excited to find out that it may has the capability to process images with the heic extension. It is possible because Sharp actually uses a library called libvips as the underlying backend for processing the image.

Libvips has heic support, but why doesn't my Sharp library support it?

That's because, When we install the sharp library with npm install sharp, it'll also download the libvips prebuilt binary inside the node_modules directory. Sharp will use that binary, but it has limited support for the variety of image extensions. What we can do to make it to have a wider support is to do a custom, manual installation of the libvips. I'm talking about building libvips from source.

Let's do it!

Essentially, you only need 2 steps:

Install node-gyp and node-addon-api in your existing Node.js project.
Build libvips from source and configure sharp to use our custom built.

1. Install node-gyp and node-addon in your existing node project.

This step is pretty straightforward.

npm add node-gyp node-addon-api

That's it, first step is done. Now let's go to the second step.

2. Build `libvips` from source and configure `sharp` to use our custom built.

Here's how we're going to do it:

Install essential build tools.
Install ninja & meson (build from source).
Install libvips and its dependencies.
Test the libvips installation.
Reconfigure sharp to use our custom built libvips.

Phew, that's a lot of steps. Let's go through each of them one by one.

I assume you were using Debian-based linux.

I highly recommend you to use a Docker container with a Debian image. I will provide a fullly working Dockerfile below.

Install essential build tools

Here's where we're going to install git, Python, and other essential build tools.

# Install dependencies
sudo apt-get update && \
sudo apt-get install -y curl python3 git build-essential pkg-config

Install ninja & meson (build from source).

Install ninja:

# Install ninja
git clone --branch=v1.13.2 --depth=1 https://github.com/ninja-build/ninja.git && \
cd ninja && \
./configure.py --bootstrap && \
chmod +x ninja && \
sudo mv ninja /usr/local/bin/ninja

Now, install meson:

# Install meson
git clone --branch=1.10.2 --depth=1 https://github.com/mesonbuild/meson.git && \
cd meson && \
./packaging/create_zipapp.py --outfile meson.pyz --interpreter '/usr/bin/env python3' && \
chmod +x meson.pyz && \
sudo mv meson.pyz /usr/local/bin/meson

Install libvips and its dependencies.

Let's install its dependencies first.

# install build dependencies
sudo apt-get update && \
sudo apt-get install -y --no-install-recommends \
python3 build-essential pkg-config libglib2.0-dev libexpat1-dev libheif-dev \
liblcms2-dev libjpeg-dev libpng-dev libwebp-dev libexif-dev libde265-dev libx265-dev

Now, install and build libvips.

This may take a while

# Build libvips
git clone --branch=v8.18.2 --depth=1 https://github.com/libvips/libvips.git && \
cd libvips && \
meson setup build --prefix /usr/local -Dmagick=disabled && \
cd build && \
meson compile && \
meson test && \
meson install && \
sudo ldconfig && \
cd .. && \
rm -rf libvips

Test the libvips installation.

At this stage, you will have libvips installed on your machine, you can test if it was installed properly.

vips --version
# vips-8.18.2

Check if our vips installation support heif/heic.

vips -l | grep heif
# You'll see output something like this:
# VipsForeignLoadHeif (heifload_base), load a HEIF image, priority=0
# VipsForeignLoadHeifFile (heifload), load a HEIF image (.heic, .heif, .avif), priority=0, is_a, get_flags, header, load

Reconfigure sharp to use our custom built libvips.
```
npm explore sharp -- npm run build
```

At this point, you should be able to convert the heic/heif file to webp, jpeg, png and vice versa.

Code Example

// server.ts

import { readFile } from "node:fs/promises";
import express from "express";
import multer from "multer";
import sharp from "sharp";

const fileStore = multer({
  // ...multer options here with disk storage
});

const app = express();

app.post("/convert", fileStore.single("image"), async (req, res) => {
  const filePath = req.file?.path;
  const formatToMimeType = {
    webp: "image/webp",
    jpeg: "image/jpeg",
    jpg: "image/jpeg",
    png: "image/png",
  } satisfies Partial<Record<keyof sharp.FormatEnum, string>>;

  const FALLBACK_FORMAT = "webp";
  const format =
    (req.body?.format as keyof typeof formatToMimeType) || FALLBACK_FORMAT;

  const content = await readFile(filePath).catch(() => null);

  if (!content) {
    res.status(400).send("failed to read content");
    return;
  }

  // call sharp as usual.
  // resize the image to 640px height.
  // set either the height or the width, sharp will maintain the aspect ratio.
  const transformer = sharp(content)
    .resize({
      height: 640,
    })
    .toFormat(format);

  res.setHeader("content-type", formatToMimeType[format]);

  transformer.on("error", (err) => {
    console.error("failed to transform image", err);
  });

  transformer.pipe(res);

  // clean up

  return;
});

app.listen(8080);

The minimum frontend example:

<!-- index.html -->

<form action="http://localhost:8080/convert" method="post" enctype="multipart/form-data">
    <input type="file" name="image">
    <select name="format">
        <option value="jpeg">JPEG</option>
        <option value="png">PNG</option>
        <option value="webp">WEBP</option>
    </select>
    <input type="submit" value="submit">
</form>

Try to check this repository I made, if you find any problem: https://github.com/up9t/image-conversion-node-demo

Dockerfile

Here's the full Dockerfile for building and running your nodejs app with sharp.

Make sure you have already include node-gyp, node-addon-api, and sharp packages in your package.json file.

Here's the Dockerfile looks like:

ARG NINJA_VERSION=v1.13.2
ARG MESON_VERSION=1.10.2
ARG LIBVIPS_VERSION=v8.18.2

FROM node:25-trixie AS base
FROM node:25-trixie-slim AS base-slim
FROM debian:trixie AS debian-base

# Install meson and ninja
FROM debian-base AS install-tools
ARG NINJA_VERSION
ARG MESON_VERSION
WORKDIR /build
# Install dependencies
RUN apt-get update && \
    apt-get install -y curl python3 git build-essential pkg-config
# Install ninja
RUN git clone --branch=${NINJA_VERSION} --depth=1 https://github.com/ninja-build/ninja.git && \
    cd ninja && \
    ./configure.py --bootstrap && \
    chmod +x ninja && \
    mv ninja /usr/local/bin/ninja
# Install meson
RUN git clone --branch=${MESON_VERSION} --depth=1 https://github.com/mesonbuild/meson.git && \
    cd meson && \
    ./packaging/create_zipapp.py --outfile meson.pyz --interpreter '/usr/bin/env python3' && \
    chmod +x meson.pyz && \
    mv meson.pyz /usr/local/bin/meson


# Download libvips
FROM base AS download-vips
ARG LIBVIPS_VERSION
WORKDIR /downloads
RUN apt-get update && \
    apt-get install -y --no-install-recommends \
    curl git
RUN git clone --branch=${LIBVIPS_VERSION} --depth=1 https://github.com/libvips/libvips.git


# Build libvips
FROM base AS build-vips 
WORKDIR /libvips
# Install build dependencies
RUN apt-get update && \
    apt-get install -y --no-install-recommends \
    python3 build-essential pkg-config libglib2.0-dev libexpat1-dev libheif-dev \
    liblcms2-dev libjpeg-dev libpng-dev libwebp-dev libexif-dev libde265-dev libx265-dev
# Copy build tools from the install-tools stage
COPY --from=install-tools /usr/local/bin/ninja /usr/local/bin/ninja
COPY --from=install-tools /usr/local/bin/meson /usr/local/bin/meson
COPY --from=download-vips /downloads/libvips .
# Build libvips
RUN meson setup build --prefix /usr/local -Dmagick=disabled && \
    cd build && \
    meson compile && \
    meson test && \
    DESTDIR=/opt/vips meson install


# Install node modules and build
FROM base AS builder
WORKDIR /app
COPY --from=build-vips /opt/vips/usr/local /usr/local
RUN ldconfig
COPY ./package.json ./package-lock.json .
RUN npm ci
# Rebuild sharp if necessary, the doc says it automatically detects the vips global installation
RUN npm explore sharp -- npm run build
COPY . .
# Remove/comment the line below if you don't need npm run build for your project
RUN npm run build


# Run
FROM base-slim AS runner
ARG USERNAME=node
WORKDIR /app
# Install runtime dependencies
RUN apt-get update && \
    apt-get install -y --no-install-recommends \
    libglib2.0-0 libexpat1 libheif1 liblcms2-2 libjpeg62-turbo \
    libpng16-16 libwebp7 libexif12 libde265-0 libx265-215 \
    libfftw3-double3 libwebpmux3 libwebpdemux2 libpangocairo-1.0-0 libpango-1.0-0 \
    libcairo2 libpangoft2-1.0-0 libfontconfig1 libtiff6 librsvg2-2 libopenexr-3-1-30 libopenjp2-7 && \
    rm -rf /var/lib/apt/lists/*
COPY --from=build-vips /opt/vips/usr/local /usr/local
RUN ldconfig
RUN chown ${USERNAME}:${USERNAME} /app
COPY package.json package-lock.json ./
RUN npm ci --omit=dev
COPY --from=builder /app/node_modules/sharp ./node_modules/sharp
COPY --from=builder /app/dist ./dist
USER ${USERNAME}
ENTRYPOINT ["npm"]
CMD ["start"]

Conclusion

The default sharpjs package doesn't include vips with heic support, it's up to the developer to build vips from source with wider support.

The above Dockerfile is a good starting point to build a Node.js app with Sharp and Vips support for heic images.

Checkout my github repository if you want to look more into the code in practical: https://github.com/up9t/image-conversion-node-demo

How Does BCrypt Verification Work?

Up9t — Thu, 20 Mar 2025 23:58:43 +0000

Have you ever wondered how can a hashing algorithm verify?

Before we going into that, we have to know that our password that we used to enter on a website, is going through one-way hashing function, thanks to it, your password is only known by ourself, even the server's owner shouldn't know about it.

Differs from encryption which is designed to be able to decrypt the contents, Hashing is only one way, that mean you hash it, you can't no longer retrieve it's original content. How does that work?

How does hashing work?

Before we learn about Bcrypt hashing and verification, I will try to explain to you a simple hashing concepts.

Let's say you have a password, your password is pass123
Each letter will be then transform into another letter using some algorithms. For example pass123, p transform to m, a transform to c and so on. But it's only one way, if p transform to m, doesn't mean that m will transform into p

Your password: pass123 might transform into D32rASDF and will always transfrom into D32rASDF everytime you enter pass123. So in practice, you can compare it, like these:


if (hash(input_password) === hash(stored_password_in_database)) {
  // user login succeed
}

WAIT A MINUTE!, But in advance hashing algorithm like BCrypt, Argon2 and any other strong hashing algorithm will produce different hash result, even if you pass the same password.


bcrypt("pass123")
// result: $2a$12$G/bzOjiOAeFTHhvvImkRMeXQ9IiMK6Z38wcMs4H1W0wQ.ry7Loc1a

bcrypt("pass123")
// result: $2a$12$e1sitHZPq0KFuJ.G9dOmn.wKtfEwVp5O8qElZ.xzqOmQ5ZmA6BYm6

Then, this will never work again.

if (bcrypt("pass123") === bcrypt("pass123")) {
  // user login always failed
}

How does it verify then?

It actually simple, instead of having your password passed straight into a hash function and get a result. It has another variable that stores random letters, this variable is called salt, this salt will help hashing algorithm makes more unpredictable result, they also have cost variable. Cost is the measure of the resources needed to calculate a hash.

According to Wikipedia, this is the structure of bcrypt:

$2<a/b/x/y>$[cost]$[22 character salt][31 character hash]

For example, with input password abc123xyz, cost 12, and a random salt, the output of bcrypt is the string

$2a$12$R9h/cIPz0gi.URNNX3kh2OPST9/PgBkqquzi.Ss7KIUgO2t0jWMUW
\__/\/ \____________________/\_____________________________/
Alg Cost      Salt                        Hash

Where:

$2a$ : The hash algorithm identifier (bcrypt)
12: Input cost (2^12 i.e. 4096 rounds)
R9h/cIPz0gi.URNNX3kh2O: A base-64 encoding of the input salt
PST9/PgBkqquzi.Ss7KIUgO2t0jWMUW: A base-64 encoding of the first 23 bytes of the computed 24 byte hash

As you can see from above, BCrypt stores the algorithm, cost, and salt alongside the hash result. You couldn't get bcrypt to work with only the hash.

Important note:

If you had the algorithm, cost, and salt, you could get the same hashing result, this mean you could compare it

Take a look at this code:

import bcrypt from "bcryptjs";

// your input
const inputPassword = "pass123";

// implement the function
function bcryptHash(input) {
    const cost = 12;
    const salt = bcrypt.genSaltSync(cost);
    const hash = bcrypt.hashSync(inputPassword, salt);

    return hash;
}

// generate hash by calling the function
// this result is then stored on the database
const result = bcryptHash(inputPassword);

// print to the console
console.log(result);

If I execute the same file, it will of course generate 2 different hash

node index.js
# result = $2b$12$XfT3eq.O3t.NeklIEbzgKOfLZZgHSrYSBKNk5.f5IngnP/Z6/Xo/u

node index.js
# result = $2b$12$FSmg5sXtB.XdJH2fFTrV7uBVKaiSdueu7FUcGSTXhoBnPssrjPvmC

But, it has some similarities, it starts with $2b$12$, which the algorithm followed by the cost, then the 22 letter after is the salt

From the result, we now know that:

Algorithm is start with 2b
Cost is 12
We need to the salt


// assume this is the string of password that you get from the database
const storedPassword = "$2b$12$FSmg5sXtB.XdJH2fFTrV7uBVKaiSdueu7FUcGSTXhoBnPssrjPvmC";

// remove the prefix, then get the 22 letters of salt
const salt = storedPassword.replace("$2b$12$", "").substring(0, 22);

// salt = "FSmg5sXtB.XdJH2fFTrV7u"

The salt is: FSmg5sXtB.XdJH2fFTrV7u

Now, instead of generating a new salt, you assign the salt that is extracted, and combines it with algorithm and the cost at the suffix


// this will give you fixed hash result
function bcryptFixedHash(input) {
    // const cost = 12;
    // const salt = bcrypt.genSaltSync(cost);

    // combines the alg, cost and salt together
    const salt = "$2b$12$" + "FSmg5sXtB.XdJH2fFTrV7u";

    const hash = bcrypt.hashSync(inputPassword, salt);

    return hash;
}


const inputPassword = "pass123";

const storedPassword = 
"$2b$12$FSmg5sXtB.XdJH2fFTrV7uBVKaiSdueu7FUcGSTXhoBnPssrjPvmC";

const inputHash = bcryptFixedHash(inputPassword);

// now you get the exact same hash
// inputHash = $2b$12$FSmg5sXtB.XdJH2fFTrV7uBVKaiSdueu7FUcGSTXhoBnPssrjPvmC

Comparing the hash

Now that you get the same hash, you could compare it to verify the user


if (storedPassword === inputHash) {
    // user login succeed
}

In addition, you could use the safe compare equal function rather than === to compare, but that wouldn't be neccesary since the bcrypt hash result is always different and thus irrelevant to timing attack or similar.

Thank you!

Laravel 11+: Use Minio for File Storage as AWS S3 Free Alternative

Up9t — Fri, 28 Feb 2025 14:18:29 +0000

We might begin with stores our files like images on the filesystem. But when the times our application got bigger, we might want to separate things up, by using a dedicated service to stores objects.

For example, the most common way to store objects which is AWS's Simple Storage Service or S3 to be short. But that comes with the downside. Since it was a third-party service, we can't just use it for free. (Actually, they have free tier but with limited spaces)

Fortunately, there is a Free, Open Source and S3 Compatible alternative called Minio. With it, you can self-host the S3 compatible storage on your own.

Preparation

Minio

First, we need to have Minio, we can install it in a variety of ways. In this example, I will use Docker. If you don't want to use docker, you should check the Official Documentation.

# compose.yaml

services:
  Laravel:
    # build:
    #   context: .
    #
    networks:
      - my-network # use the same network as minio

  # Here's our minio
  storage:
    image: quay.io/minio/minio:RELEASE.2025-02-03T21-03-04Z
    restart: always
    command: ["server", "/data", "--console-address=:9001"]
    networks:
      - my-network # use the same network as your app
    env_file:
      - ./secrets/minio.env # we will specify this file later
    volumes:
      - object-storage:/data

networks:
  my-network: # declare a network

volumes:
  object-storage: # for persistent data

Let me brief explain what's on the storage section above:

image: quay.io/minio/minio:RELEASE.2025-02-03T21-03-04Z:

for the image we are going to pull from the quay registry, and the tag we are going to use is RELEASE.2025-02-03T21-03-04Z.

You can use other tags too for example latest.

command: ["server", "/data", "--console-address=:9001"]:

first it will execute command server.

then the storage path will be on /data

the --console-address=:9001 meaning that will expose the console or the UI on the port 9001, while the API was exposed on port 9000 (by default)

We also need to specify the environment variable, but we're going to ignore it for now.

Laravel

On our Laravel's application, we need to install the AWS S3 packages using composer. Type the following on terminal:

composer require league/flysystem-aws-s3-v3 "^3.0" --with-all-dependencies

Configuration

We now need to do some configurations.

Minio

On Minio's side we need to create root user. We will later use that user to create a new user specifically for our application.

A root user is the highest level of access you can have on a computer system. It is essentially the "superuser" with the ability to perform any task, including those that are restricted to normal users.

To create that, we have to provide 2 variables:

MINIO_ROOT_USER: the name for the root user
MINIO_ROOT_PASSWORD: the password for the root user

If you take a look at the compose.yaml file above, you will see this:

    env_file:
      - ./secrets/minio.env

Here, we are saying that the variables will be stored on a file called minio.env that is on secrets directory. Let's create one, make sure it's on the same level as the compose.yaml file.

create .env file for minio

mkdir secrets && cd $_ && touch minio.env

On the new created minio.env file, fill with these:

MINIO_ROOT_USER=root # can be whatever you want
MINIO_ROOT_PASSWORD=insert-whatever-password

Now, you can login to the Minio's Console.

docker compose up -d

On the browser, go to localhost:9000 or localhost:9001

Doesn't matter which port. If you use browser, minio will redirect you to port 9001 even if you type the port 9000

It's going to look like this.

Creating User

After successful login, go to the Identify -> User Section, and try to create new user.

Dont forget to check on the Read Write policy.

Creating Bucket

Now, you need to create a bucket for your application.

What is a bucket?
Just that imagine that you have a bucket, then you can put your toys, your stuff in it. In this case we store our object like files or images.

Go to the Buckets section and click on the Create Bucket button

Type on the bucket name field, then click Create Bucket.

Laravel

On Laravel you need to change the AWS variables.

AWS_ACCESS_KEY_ID=username
AWS_SECRET_ACCESS_KEY=password

you can ignore the AWS_DEFAULT_REGION and let it be there

Fill the bucket name.

AWS_BUCKET=bucket-name-here

And you need to change the AWS_ENDPOINT to point to your storage service.

AWS_ENDPOINT="http://storage:9000"

Also you need to create another variable called AWS_URL. It's basically the endpoint with bucket name:

AWS_URL="http://storage:9000/bucket-name-here"

Please note that I'm using the name service from the compose.yaml file.

Last, but not least, you need to change the AWS_USE_PATH_STYLE_ENDPOINT to true

AWS_USE_PATH_STYLE_ENDPOINT=true

Here's what our variables look like.

AWS_ACCESS_KEY_ID=username
AWS_SECRET_ACCESS_KEY=password
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=bucketname
AWS_USE_PATH_STYLE_ENDPOINT=true
AWS_ENDPOINT="http://storage:9000"
AWS_URL="http://storage:9000/bucketname"

Now, you have to change they way you upload image.

From this.

// controller

$path = $request->file("image")->storePublicly("images");

$url = Storage::url($path);

To this.

// controller

$path = $request->file("image")->storePublicly("images", "s3");

$url = Storage::disk("s3")->url($path);

Make bucket publicly accessible

You can't just paste the url on the browser, it won't let you to view the content of the file.

failed to get Stat() response from server for 1-5000x3333.jpg (version null): Access Denied.

Instead, you need to change the setting of the bucket so that everyone can see the content.

On the Buckets menu, click on your bucket, then change the Access Policy to public

Now, your image should be accessible.

Comment if you make it here!

Learn SSH with Docker

Up9t — Thu, 20 Feb 2025 12:05:08 +0000

Normally, we use Secure Shell (SSH) to access a server, but not all people have a server; one of the main reasons is because it's not cheap to buy a
Virtual Private Server (VPS). But the knowledge about how to use SSH is really important, and all programmers should know about it.

Fortunately, we can use something that can act like a client and a server. Because a server is basically just another computer, we can use virtualization technology like Virtual Machine (VM) or Container like Docker to learn more about SSH.

Concept

Open first terminal then run Ubuntu image within Docker container, then install SSH client, this is act like our local machine.
Open second terminal then run another Ubuntu image within Docker container, then install SSH server, this will be the server that we want to control.
Link those containers using the same network.

Setup

First thing you need is Docker, you can install docker in various way depends on your machine. If you're on Windows, you can install Docker Desktop, for others instalation please refers to the official documentation.

Additionally for Windows users, after the installation, you might want to install Windows Subsystem for Linux (WSL) and integrate with your Docker.

Open your terminal, then type docker version to make sure docker is running.

First Step

Prepare the client

Open a terminal, then run Ubuntu image.

docker run --rm -it --name=client ubuntu:latest bash

Explanation:

docker the base command
run tell docker to run container from image
--rm used to automatically delete container after not using it
-it combinations from --interactive and --tty
ubuntu:latest the name of the image that we will run, we are using image named 'ubuntu' and tag 'latest', which mean the latest version of ubuntu
bash command that we want to execute to the container, this will open bash terminal

After succeeding, you'are now inside the container. Because it is isolated, you can do whatever you want in there, now we need to install SSH client

apt update && apt install -y openssh-client

Note: you have to do apt update first, before install a package

Prepare the host

While the previous terminal opened, open another terminal, and run another Ubuntu image.

docker run --rm -it --name=server ubuntu:latest bash

You'll notice this step will be much faster, because we have already downloaded the image from the first step, and docker just need to running it instead of needed to download again.

Install SSH server

apt update && apt install -y openssh-server

Beginning

Okay it just the beginning, what do we have so far?

We now have a local machine (client) and a host machine (server), that's just like a real-life scenario.

Learn time

So, how does it work?

As we can see, the server is installed the openssh-server and not openssh-client, what's the difference?

Well, when we install the openssh-server, it will install an SSH service, that service will always running and listening, always ready if there are clients that want to be connected to our server. By default, it is listening on port 22.

Different from SSH server, SSH client does not listen on any port on our machine, it simply to connect our local machine to the server that has SSH service running on it.

Let's add security

Wait, wouldn't the other people also able to connect to our server and control them?

You're right!

But don't worry, we also have been thinking about that and that's why there are additional steps to make our server safe and still accessible by us, but not by others. Pstt.. It's called encryption.

To have a better understanding about how it works, let's just started.

Key Generation

On the client container (hope you remember which one), we will generate a key-pair using this command.

ssh-keygen -t ed25519

Explanation:
ssh-keygen command to generate ssh keypair
-t ed25519 specify the used algorithm, this example we use ed25519, another popular option is rsa

You'll be prompted to specify the output file, just press enter on your keyboard to use the default location.

They will also ask you to enter a passphrase and confirmation passphrase, just leave them blank and then press enter.

If successful, they will generate 2 files: id_ed25519 and id_ed25519.pub.

The one with the .pub suffix on their name is the public key, you need to keep this file on your host (server)

The other file is called private key, it's kept on the local machine (client)

Since you're a root user, those files will be stored on directory /root/.ssh

you can see them using the following command

ls /root/.ssh

Note

Okay, from now on, I will just simply called local machine and server,
local machine is the one that you install the openssh-client
server is the one that you install the openssh-server

Public & Private Key

As I said before, you need to keep the private key only on local machine , while store the public key on your server.

There are several ways to move your public key to the server, one common way and the way that is use is simply:

copy the content of public key to your clipboard.
create new file in the server and then paste the content to it.

Alright, let's try it

The following command will output the content of public key file (id_ed25519.pub) then and I want you to manually select and copy the text.

cat /root/.ssh/id_ed25519.pub

After you copy, it should be on your clipboard now. Then switch to the server.

First, create a file called id_ed25519.pub

mkdir /root/.ssh && touch /root/.ssh/id_ed25519.pub

Now, you need to open that file and paste. But wait, since we don't have any editor installed, we have to first install a lightweight text editor called nano, there are other options too like vi and vim but nano is more beginner friendly.

apt install -y nano

Now, we have nano installed on the server, we can now open that file.

nano /root/.ssh/id_ed25519.pub

Now you can paste the content from your clipboard (CTRL+V) then save (CTRL+S) and exit (CTRL+X)

Next Step

Okay, we have installed the public key in the server, so can we access the server now?

Not yet, but we're almost there.

We have to make sure that the server is reachable by our local machine.

Usually, we do this by using ping command.

Reaching the Server

On the local machine, install the tool using this command:

apt install -y iputils-ping

Then, we can check if the server is within our reach.

ping server

As you can see, we got no responses which indicates that the server wasn't reachable from our local machine.

*But why? *

Well, containers can't communicate directly because they are isolated from each other by default. You have to attach them to the same network.

Attach to the same network

Alright, I want you to open new terminal, then do the following.

Create a network

This will create a network called 'my-ssh-network'

docker network create my-ssh-network

Explanation:
docker this is the main command
network subcommand
create used for create something
my-ssh-network this is the name of network that we want to create, it's up to you

Attach network to the client container

docker network connect my-ssh-network client

Attach network to the server

docker network connect my-ssh-network server

Let's try again

From the local computer

ping server

You'll see line by line from the terminal comes out one at the time, that mean it received feedback from the server!

Hey-hey, do you what that mean?

We can finally connected to it!

It's there

Are you ready?
Are you really?
Are you really really- alright, now I want you to do this.

From the local computer type the following and hit enter.

ssh root@server

We did it!
We finally get it to work!

Last Words

Remember, the journey of a thousand miles begins with a single step. Take that step today.

DEV Community: Up9t

Deploying Single Page Application (SPA) or Static Site Generation (SSG) with Nginx

Prerequisites

Getting Started

Next step

Conclusion

Converting HEIC/HEIF Image in Node.js with Sharp Library

Background

Solution

Let's do it!

1. Install node-gyp and node-addon in your existing node project.

2. Build libvips from source and configure sharp to use our custom built.

Code Example

Dockerfile

Conclusion

How Does BCrypt Verification Work?

How does hashing work?

How does it verify then?

Important note:

Comparing the hash

Laravel 11+: Use Minio for File Storage as AWS S3 Free Alternative

Preparation

Minio

Laravel

Configuration

Minio

Laravel

Make bucket publicly accessible

Learn SSH with Docker

Concept

Setup

First Step

Prepare the client

Prepare the host

Beginning

Learn time

Let's add security

Key Generation

Note

Public & Private Key

Next Step

Reaching the Server

Attach to the same network

Let's try again

It's there

Last Words

2. Build `libvips` from source and configure `sharp` to use our custom built.