Forem: Joseph01

Mastering VPS For Frontend Engineer - Part 3

Joseph01 — Thu, 11 Sep 2025 20:21:07 +0000

Here we're the final round, after we've put our web applications on VPS, now it's time to improve the Developer Experience by adding Docker and CI/CD github actions, so we will get rid from VPS and automate the process 😃.

Checkout previous parts if you're new 👉 Part 2 Part 1

So here is what we'll learn this time

1. Adding Firewall

2. Adding Docker and Docker Compose

3. Automate Deployment with Github CI/CD action

4. Adding Load Balancer

Adding Firewall

Adding firewall is super easy but if you forget this stuff you really face critial security issues and opening doors for attackers, using UFW let us close all the unnecessary ports that are already open by some reasons.

We'll make sure to only open certain Ports are open, including SSH Port, HTTP and HTTPS connections.

Let's install ufw (Uncomplicated Firewall) a package for enabling and disabling access to ports.

sudo apt update
sudo apt install ufw

Now let's enable it and open the ports that we need.

sudo ufw enable

Then enable what we need (SSH, HTTP, HTTPS)

sudo ufw allow 22/tcp
sudo ufw allow 80/tcp
sudo ufw allow 443/tcp

Now lets check all the ports by

sudo ufw status

See all the opened port, and if you've backend you can open a port for that as well

sudo ufw allow 3002/tcp

This we will open 3002/tcp port for backend requests.

Docker & Docker Compose

With Docker, your app will run the same way everywhere, on your computer, your teammate’s computer, or even on a cloud server.

The core principle of Docker is straightforward: we create a Dockerfile that contains all the information needed to run our project. For example, if we have a Next.js app, we specify Node.js as the environment and use npm (or yarn) to run it. In the Dockerfile, we write these instructions step by step.

When we build the Dockerfile, Docker creates something called an image, a snapshot that includes our app, its dependencies, and the environment it needs.

From this image, we can launch a container. A container is a running instance of our app, isolated from everything else, and usually exposed through specific ports (for example, port 3000 for a Next.js app).

Now let's instead using PM2 we will use Docker to build and run our NextJS app.

One more thing before we start with Docker: we’ll be using Docker Compose. Docker Compose is super helpful when you have multiple services or more than one container. Instead of writing multiple docker run commands, you can simply define your services in a docker-compose.yml file and let Compose handle running, managing, and connecting the containers for you.

Installing Docker and Docker Compose

We should setup repository, bellow we can get it for Ubuntu,


sudo apt-get update
sudo apt-get install ca-certificates curl
sudo install -m 0755 -d /etc/apt/keyrings
sudo curl -fsSL https://download.docker.com/linux/ubuntu/gpg -o /etc/apt/keyrings/docker.asc
sudo chmod a+r /etc/apt/keyrings/docker.asc

# Add the repository to Apt sources:
echo \
  "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.asc] https://download.docker.com/linux/ubuntu \
  $(. /etc/os-release && echo "${UBUNTU_CODENAME:-$VERSION_CODENAME}") stable" | \
  sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
sudo apt-get update

Then add the plugin

sudo apt-get update
sudo apt-get install docker-compose-plugin

And verify the installation

docker compose version

Writing Dockerfile

We've to got the our project directory which was under /var/www/frontend/ and create our docker file instruction.

run

cd /var/www/frontend/

create Dockerfile

vi Dockerfile

and fill it with the content, in our case we use nodejs 22 image, and some instruction to build and run our production app.

You can copy paste this or maybe you want to use another version of NodeJS based on your needs

FROM node:22

WORKDIR /app

COPY package*.json ./
RUN npm install

COPY . .

RUN npm run build

EXPOSE 3000

CMD ["npm", "start"]

Now, let’s break it down:

The second line, WORKDIR /app, sets the working directory inside the Docker container. All subsequent commands run from /app.
COPY package*.json ./ copies the package.json and package-lock.json files into the container.
RUN npm install installs all the dependencies listed in those files.
COPY . . copies the rest of your source code into /app.
RUN npm run build builds the Next.js app.
EXPOSE 3000 opens port 3000 inside the container, because Next.js runs on port 3000 by default when started with npm start.
CMD ["npm", "start"] tells Docker how to start the app when the container runs.

As you can see, it’s a straightforward set of instructions. Once this Dockerfile is used to build an image, the image becomes a
ready-to-use environment that can spawn containers anytime, each running your Next.js app in an isolated environment.

Lastly exit and save the file, click Esc and type :wq to save and quite the Dockerfile.

Build Docker Image

Now with our Dockerfile in place we will create an Image from those instructions we put in Dockerfile, before using Docker Compose we will use pure Docker commands, so you see what headache will Docker Compose move away.

Build image by running this command in same directory of our Dockerfile

sudo docker build -t myfrontend:latest .

-t myfrontend → gives the image a name (myfrontend) and tag (latest).

. → means current directory.

Now after it builds successfully, let's run reall container, but first make sure you stop it from pm2 if you running with pm2 with

pm2 stop frontend

Run docker container (container is basically an instance running from the image):

sudo docker run -d -p 3000:3000 --name myfrontend_container myfrontend:latest

With this the docker is running in the background (by using -d mode) and we mapped into port 3000 from our host to 3000 port on container, and we give it a name (with --name) myfrontend_container lastly we should specify the image name as well (the one we just created above) myfrontend:latest.

Now again your app is live on http://localhost:3000, which is we already mapped this to our main domain from nginx config of our NextJS app in Part 1.

Check Containers

You can see and check your running container with

sudo docker ps

This will show all your running containers, in our case we've only one case, if you've more you can add -a at end to list all running and stopped containers.

Now to stop it easily run

sudo docker stop myfrontend_container

This will stop our frontend app, to start it again run

sudo docker start myfrontend_container

now if you want to remove it, lets say you've lots of containers you want to remove some of unused ones, to free up some memory spaces, you can run

sudo docker rm oldfrontend_container

or if you want to even remove an image you can run this

sudo docker rmi oldfrontend:latest

but bare in mind, you should first stop and remove all the containers that uses that image, cause all of them depending on it.

You can list the images you've with

sudo docker images

You can also check the logs of your app, in case of having some issues or bugs,

sudo docker logs myfrontend_container

just give a name of your containers and see the logs, that is it, powerfull yeah! I know, lets make it more powerfull by simplifying it with Docker Compose.

Using Docker Compose

Instead of starting containers manually with long docker run commands, you write all your app’s services (backend, frontend, database, etc.) in one YAML file (docker-compose.yml) and run them with a single command.

Lets write for our NextJS project and create docker file.

Create docker compose yaml file

vi docker-compose.yml

and put fill it with these content

services:
  frontend:
    build:
      context: .
      dockerfile: Dockerfile
    container_name: frontend_app
    ports:
      - "3000:3000"
    restart: always

In Docker Compose, everything runs inside a service (like “mini apps”), we've only one service called frontend, and we tell some information about building, like it's context, that tells Docker to build from the current folder (.), and we explicitly tell which one is the dockerfile (it also default to use Dockerfile) incase you're using different file name, and we give it a name frontend_app, as well as mapping host port 3000 → container port 3000, and to make Docker to restart incase of the container stops or your machine reboots.

Now here is fun part, let's easily run and make the docker up and running

sudo docker compose up -d

-d means running the process in the background, and with this simple command we started the services.

To stop the service

sudo docker compose down

if you check running docker you'll see that frontend_app is in the running list

sudo docker ps

CI/CD Github actions

We currently have our app running on port 3000, but here’s the problem: every time you make a change or push an update, you’d have to manually access the server, rebuild Docker, and restart the container. That’s not only repetitive but also a poor Developer Experience (DX).

Wouldn’t it be great if your app could automatically update in production the moment you push code just like Vercel handles automatic deployments?

That’s where CI/CD (Continuous Integration / Continuous Delivery) with GitHub Actions comes in. As the name suggests, it continuously integrates your changes and delivers them to production. Every time you push code, GitHub Actions can automatically run tests, linting, builds, and even deploy updates to your server.

With CI/CD, you no longer need to log into your server, pull changes, and restart Docker manually, your workflow is automated, your app stays up to date, and you get a much smoother development and deployment process.

All of this is defined in YAML workflow files stored in .github/workflows/.

Now before writing the yaml file for auto deployment with github action we need a couple of thing.

Establishing SSH connection with github, so github can access to our VPS server and do its job, and apparently we will save sensitive information in our GitHub repository variables.

Sine we already did SSH connection process in first part, you can get instructions from there, in summary you need to do
1- Generate an SSH Key Pair
2- Add Public Key to VPS (to authorized_keys)
3- Add Secrets to GitHub (Now on Github same repository open Settings → Secrets and variables → Actions, add VPS_SSH_KEY, open the file id_ed25519 (private key) and paste the whole content (including -----BEGIN OPEN SSH PRIVATE KEY-----).

Beside this also we need to add two more sensitive information which your vps user and server IP address, add VPS_HOST (your IP), VPS_USER.

Now that we're ready lets create a deploy.yml file under .github/workflows/deploy.yml and paste that code in

name: Deploy to VPS

on:
  push:
    branches: [main] # runs on push/merge to main

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository (for context/logs)
        uses: actions/checkout@v4

      - name: Deploy via SSH
        uses: appleboy/ssh-action@v1.0.0
        with:
          host: ${{ secrets.VPS_HOST }}
          username: ${{ secrets.VPS_USER }}
          key: ${{ secrets.VPS_SSH_KEY }}
          script_stop: true
          script: |
            set -e
            cd /var/www/portfolio

            echo "🔄 Pulling latest code..."
            git fetch origin main
            git reset --hard origin/main

            echo "🛑 Stopping and removing old containers..."
            docker compose down --remove-orphans

            echo "🧹 Cleaning up unused images, volumes, and cache..."
            docker system prune -af --volumes

            echo "📦 Rebuilding Docker images from scratch..."
            docker compose build --no-cache

            echo "🚀 Starting containers..."
            docker compose up -d

            echo "✅ Deployment finished!"
            docker compose ps

Ok, so this makes an automation that deploys your app to a VPS every time you push code to the main branch. Instead of manually logging into your server and rebuilding your app, GitHub does it for you. The workflow runs on a temporary Ubuntu machine, connects to your VPS securely over SSH (using the secrets you’ve added to GitHub), and then executes a series of commands on the server.

Once connected, it pulls the latest code from GitHub, stops and removes old Docker containers, cleans up unused images and volumes, rebuilds fresh Docker images, and finally starts the app again. In short, this setup makes sure your app is always up to date in production automatically, just by pushing code to GitHub.

Load Balancer

With Docker, we can easily run multiple instances of our application. For example, if your web app gets a lot of traffic and starts slowing down, we can create additional instances and distribute users across them. This way, no single instance gets overloaded, and your app stays fast and responsive.

The good news is that NGINX can handle this routing for us. All we need to do is spin up another Docker instance of our app and configure NGINX to send traffic to the new instance. This makes scaling your app simple and efficient.

So first update our docker compose to create two instance of our app instead of one

vi docker-compose.yml

Then simply add another app instance like on port 3001

services:
  frontend:
    build:
      context: .
      dockerfile: Dockerfile
    container_name: frontend_app
    ports:
      - "3000:3000"
    restart: always

  frontend2:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "3001:3000"
    restart: always

And with this it will always create two instance of your app for port 3000 and 3001, and we can tell nginx by going to /etc/nginx/nginx.conf/ and create an upstream object locating both our apps.

upstream nextjsfrontend {

                server localhost:3000;
                server localhost:3001;
        }

Lastly we only left to update the site config to point to our upstream we just create nextjsfrontend, move to your app server config under /etc/nginx/sites-available/frontend/ and make sure to update the location block to point to our nextjsfrontend

location / {
   proxy_pass http://nextjsfrontend;
}

now just restart your nginx and here you go, you've got load balancer setup already.

I hope you enjoyed this tutorials I know it was long, and stay calm and enjoy learning, let me know if you've got any question.

Mastering VPS For Frontend Engineer - Part 2

Joseph01 — Fri, 05 Sep 2025 14:33:05 +0000

In previous article we bought VPS, configured SSH and disabled the root access, which means our custom VPS authentication is ready to be used by us.

Now let's dive into adding more stuff to it

1. Installing and configuring NGINX

2. Setting up Node.js via NVM

3. Deploying a Next.js frontend with NGINX and PM2

4. Serving static React apps directly with NGINX

5. Linking a custom domain and configuring DNS records

6. Adding a subdomain for backend services

7. Securing the server with a free SSL certificate from Let’s Encrypt

Why NGINX ?!

Now our VPS without NGINX can not serve our frontend and backend application, NGINX is responsible to handle large number of connection and its super fast and efficient.

One thing I like the most is Reverse Proxy before requests go to your backend application directly, it will go to NGINX first and direct them to correct service, you can simply say if users hits /api direct them to my python application.

Another thing is Load Balancing, imagine you've a lot of users and sometime lots of users uses your service at the same time, this add a lot more loads to your service and in result makes your app slow, what you can do you can have more than one running instance of your server, and NGINX will handle the traffic distribution and this will makes your service to be much faster.

There is much more about NGINX like SSL/TLS, Security and Concurrency, let's go and configure it.

Let's get started, install by running this on your server

sudo apt update
sudo apt install nginx

Let's quickly get familiar with some of the most used files on NGINX, that you mostly interact with them.

/etc/nginx/nginx.conf This is main global configuration, usually we create separate site configurations in other folder /sites-enabled then we'll just import it here so to be executable by nginx.
/etc/nginx/sites-enabled/ this is where we put our nginx server block config files here, maybe you've portfolio or blog.portfolio, or using this file linked (symbolic linking) with sites-available specific files.
/etc/nginx/sites-available As of best practices it is recommended to put our NGINX config files here and linking it with /sites-enabled directory, (cause nginx will only process files that is under /sites-enabled), technically we can skip the /sites-available directory if we want to but in that case we manually has to import and include the files from the nginx.conf.
/var/www this is conventional location for web server content, means your source file it is not mandatory to put your projects directory here but its recomended to put your projects there, it is just standardized and secure location.

Deploying Frontend

Clone or upload your project source code under /var/www/frontend, here lets assume we've got NextJS Project.

and inside that build your app here for production by

npm run build

this will create .next directory contains statics and server(for server side codes) this is crucial step and prepare our app to run efficiently.

Second create nginx config file under /etc/nginx/sites-available/frontend and add the config,
1- cd /etc/nginx/sites-available/
2- vi frontend
3-

server {
    listen 80;
    listen [::]:80;

    server_name (your_server_ip); # temp for now (we'll use real domain)

    location / {
        proxy_pass http://localhost:3000;
    }
}

let's explain line by line
the server block is our virtual host, it contains a set of rules for single website or app, we can have more for other web apps.

listen 80 this tells nginx to listen for incoming connection on port 80 which is for HTTP traffic, when users types your server IP address they connect via this port. listen [::]:80 this is the same as 80 only it is for IPv6 the first one was for IPv4 addresses.

server_name this define the IP address or the domain name that this block is responding to, right now it is our server's public IP address, later we'll change to be real domain (e.g., example.com)

location / this define how to handle request when users hit the root address, like https://example.com/ this is root address.

lastly proxy_pass http://localhost:3000; will tell NGINX to forward the request from root to our internal port on 3000 which apparently our frontend app will be running on.

4- Now save and exit the file hit Esc from your keyboard and type wq then Enter

5- We should create a symbolic link so we'll create a symbolic file under /sites-enabled to let NGINX process our configuration, by running this command, make sure you're at /etc/nginx/ directory and run this command bellow

sudo ln -s /etc/nginx/sites-available/frontend /etc/nginx/sites-enabled/

Now we'll test before restarting the NGINX server by

sudo nginx -t

If you followed the steps you should be good to go.

Ok, the last step before restarting the NGINX and enable our web app, is to actually run our frontend app on port 3000, we built for production already now lets run it using pm2.

Why PM2

pm2 is a production process manager for Node.js apps, and since our app is NextJS and it may have SSR feature which is needs a node environment to run, otherwise if you only using pure ReactJS or VueJS they're purely static files no need for server side rendering so you'll just define the root in your server config.

So, if you using purely react just add or modify the location block of your NGINX config

    root /var/www/frontend/build;
    index index.html;

    location / {
        try_files $uri /index.html;
    }

This way you don't need to use pm2 because your app is simply a static, one crucial thing here is the location block that tell NGINX to let the React's routing mechanism to handle the routing, cause if you did miss this part a user will hit /about NGINX will look for it under your /frontend/build/about/ and it is not there but if you add the location block it will let reactJS's Javascript-driven routing handles it, now simply restart NGINX with sudo systemctl restart nginx you should see your static files. Tadaa!!

But if you're using NextJS lets install pm2 and run the app with it.

Install pm2

sudo npm install -g pm2

PM2 will let us manage multiple apps, like running, restarting, stopping and generate logs and monitor performance, it is super nice.

Now let's go to the frontend directory where we've our built file and we've got package.json file where there is a script for running that build production file for us.

package.json make sure you've this

  "scripts": {
    "build": "next build",
    "start": "next start",
  },

Now run the PM2 with this and name your running process on pm2

pm2 start npm --name "frontend-app" -- run start

now restart nginx and go to your server's IP address, and you'll see your web app live on VPS, Tada!!!

Add Domain

Of course you'll not share the server's public IP Address! lets add the domain I'll go with namecheap, go ahead and pick a cheap domain in their homepage.

Once you purchased a domain, one easy step left, and it is basically you’ll point your domain’s DNS records (managed at Namecheap) to DigitalOcean’s nameservers.

Let's update the DNS record from the namecheap step by step

Go to Domain List → Manage next to your domain.
Under Nameservers, choose Custom DNS.
Enter these DigitalOcean nameservers:

ns1.digitalocean.com
ns2.digitalocean.com
ns3.digitalocean.com

Save changes (may take up to 24–48 hours globally, but often faster).
Now going back to digitalocean dashboard click on
Networking → Domains.
Add your domain name (e.g., example.com).
Lastly we need to add two records, @ record for root and CNAME record for www so our domain will be available by www.example.com

Click your domain you just added it
You can see a button Create Record
Choose A Record with its value @
Choose CNAME Record with value of www

Now after saving these settings we should wait for propagation process to take in place it may take a few minute or a few hours, just wait patiently if exceeded 48hrs contact the support team to get help.

Finally go ahead and replace the IP Address of our server from the NGINX config to be pointing to our new domain.

etc/nginx/sites-available/frontend

server {
    listen 80;
    server_name example.com www.example.com;   # or your_server_IP
    ...
}

Then restart the NGINX

sudo systemctl restart nginx

Note/ there is one thing, I face it to when I was experimenting with, for my domain I've choose .dev which is managed and owned by google and it requires me to have and active SSL Certificate and from this point I didn't had it so I couldn't access my website, but no worries once we add the certificate our web app will be active and online, just bare in mind that if your domain was not reachable at this point check your domain extension if accessible without SSL or you can check if the propagation has ended by visiting this website DNS Checker

Adding SSL Certificate

So, here we are this is by far one of the most amazing steps, in this step your step you officially marked as a secure site (HTTPS) and google will rank it better (SEO rank HTTPS over HTTP), and all this comes from Let's Encrypt organization and its all free, we can simply by simple commands enable it and make an auto renew when expired, sometime companies or providers will sell these if you're using shared hosting.

Download certbot on Ubuntu/Dabian

sudo apt install certbot python3-certbot-nginx -y

And apply for your domain for both A Record and CNAME Record we just added previously.

sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com

Lastly we'll enable auto renew, cause lets encrypt's certificates will expire in 90 days

sudo certbot renew --dry-run

Now you've officially got your website up and running on VPS, whether it is static web application like ReactJS or it has SSR feature like NextJS.

Note/ if you've got a backend as well do exact same thing we just did it for Nextjs, in summary you'll need these steps

Clone your backend project under /var/www/backend/
Build for production and run it with PM2
Add the NGINX configuration under /etc/nginx/sites-available/backend
Create symbolic link for sites-enabled so NGINX will process it
Add A Record for your sub domain (e.g. api.yourdomain.com)
Restart and Test NGINX configuration
Add SSL Certificate with certbot and enable auto renew

At this stage, our VPS can serve production apps securely with HTTPS. In Part 3, we’ll improve security, add CI/CD, Load balancer and explore containerization.

Mastering VPS For Frontend Engineer - Part 1

Joseph01 — Fri, 15 Aug 2025 08:07:48 +0000

I remember the first time I tried to deploy my web app on a VPS. It was a horrible experience! Then I switched to Cpanel deployment. Ohh, that was even worse than a VPS, lol. After years of taking on multiple full-stack projects, I truly believe if I had taken a course earlier, I would be on another level right now.

So, if you'd love to dive into DevOps, stick with me and practice alongside. We'll cover more things later, like AWS, Docker, and more.

I know you may be asking why a frontend developer needs VPS knowledge when you can deploy an application with one click?

Vercel, Netlify, GitHub, etc...

You're correct, if you're just a "vibe coder"!

To be honest, it has a lot of benefits. For starters, it gives you free SSL, which many providers are now selling you!

Don't stick with only frontend skills in the age of AI. To be honest, as a frontend developer with over 5 years of experience, I don't think we'll survive with only FE skills.

Learn a new skill, open a new horizon. Instead of complaining, explore the world!

As someone who has learned these skills, I can now communicate and better understand what my team is really talking about.

CI/CD, Docker, Redis, Cloudflare, etc...

Here's the thing: today's market is rough! You have to gain more knowledge and not just focus on one area, especially frontend.

And don't worry if you enjoy coding already, you'll find VPS super fun to learn. Many new concepts and pains you currently suffer from will go away.

One last thing: it's super easy to learn but incredibly valuable to have in your skillset.

Let's dive in!

What we'll learn in this article?

You'll learn and master the following points in three articles.

Part 1

1. Setting Up Our Custom VPS

2. Best Practices for Accessing and Using a VPS

Part 2

3. Falling in Love with NGINX

4. Configure a Domain and Subdomain with Free SSL

5. Setting Up Node.js and Next.js applications

Part 3

6. Docker

7. CI/CD and GitHub Actions so you don't need to touch the VPS again, lol!

8. Load Balancer

First Step: Buying a VPS

First, we have to buy a VPS. One of the best providers is DigitalOcean. For learning purposes, it won't cost you anything for the first 2 months. You can click the link below to sign up and get a $200 credit to use on DigitalOcean.

digitalOcean

After that, go ahead and create a Droplet (VPS). Choose and fill out the options. The important thing here is that we're using Ubuntu, so make sure you're using the latest LTS version.

Setup SSH to Login

One of the best security practices is to log in via SSH instead of a password.

SSH login is a secure way to connect to a remote server over the internet using the Secure Shell (SSH) protocol.

So, in a nutshell, with SSH key login, you have:

Public Key → Stored on the server (~/.ssh/authorized_keys) to recognize you.

Private Key → Kept on your local machine and never shared; used to prove your identity when connecting.

From DigitalOcean, click on Add SSH Key as you see below.

Okay, now let's create an SSH key and upload the public key here on DigitalOcean.

It's super easy to create SSH keys. Run:

ssh-keygen

You can give it a name (I'll use frontend-key) or let it be the default name and path (~/.ssh/). It will ask you to create a passphrase (you can skip this if you'd like).

Now you've got two keys:

Private key: ~/.ssh/frontend-key
Public key: ~/.ssh/frontend-key.pub

Note that you can differentiate the public and private keys by their file extension. The public key ends with .pub.

Now, in order to log in to the server, we always have to specify where our private key is by running this command:

ssh -i ~/.ssh/frontend-key root@server_ip

To avoid specifying the private key every time, we can run an ssh-agent and add the private key to it. That way, we can just run ssh root@server_ip to log in to the server.

eval "$(ssh-agent -s)"
ssh-add ~/.ssh/(your_private_ssh_key)

One last thing before we try to access our server: we have to add our public key to the server (remember, the one that ends with .pub is the public key).

Using the cat command, we can display the content inside the .pub file and copy it:

cat ~/.ssh/(your_private_ssh_key).pub

Upload this key to the Add SSH Key section in DigitalOcean.

Disable the root User

The next security best practice is to disable login for the root user. Since the root user is the highest level and can do anything on our system, disabling it protects us from attacks and the risk of unauthorized access.

The first step is to create a new user. We want to be 100% sure the new user works correctly before we disable the root user.

Run this command to create a new user:

adduser newUser

Note: You may need to run this command with sudo if you encounter a permission denied error.

It will ask you to create and repeat a password. You can skip the other questions by simply pressing Enter on your keyboard.

Then, we'll change the group for that user to be sudo so they can run high-level commands, just like the root user.

usermod -aG sudo newUser

Switch to the newly created user:

su newUser

Now, before testing this user, we have to upload the public key into a special file called authorized_keys. Go ahead and create the SSH directory for your new user:

mkdir ~/.ssh
chmod 700 ~/.ssh
cd ~/.ssh
touch authorized_keys

Now you can open that file with the vim or nano editor and paste the public key. You can use the same public key you used for the root user or create a new one. (Note: You may need to run this with sudo, e.g., sudo vi authorized_keys).

The last step is to change the permissions for that file and restart the SSH service:

chmod 644 authorized_keys
systemctl restart ssh

The number 644 means that only we (the owner) can read and write, but other users can only read. You may not understand these numbers, but they all have a meaning. They are represented in octal, which is a base-8 number system.

Each permission is assigned a value:
read (r) = 4
write (w) = 2
execute (x) = 1

You add these values to get the number for each category. For example, to give full read, write, and execute permissions, you'll use 7 (rwx = 4+2+1 = 7). We used three digits together (644), which means the first digit is for the owner, the second is for the group, and the third is for others.

So if you want to give all types of users all permissions, you would say 777 (rwx).

Now, test logging in with this user:

ssh newUser@server_ip

Boom!

Now let's disable the root user.

Switch back to the root user:

sudo -i

Then, go to the SSH daemon configuration file at /etc/ssh/sshd_config to disable root login. Find the line that says PermitRootLogin and change it to no. (But please make sure you've already tested your new sudo user, otherwise you'll lose everything!).

Now our server is ready, and we can securely access it via SSH without the root user.

In Part 2, we will set up NGINX and prepare our server for a full-stack, production-ready deployment.

Cheers!

Designing Print-Ready Components in Your Web App

Joseph01 — Wed, 05 Jun 2024 21:02:01 +0000

In many web applications, there comes a time when you need to add print functionality. Whether it's for printing invoices, reports, or any other custom components, having a seamless and efficient print solution is crucial. In this blog post, I'll demonstrate how to handle printing in your Vue.js application. The approach we'll cover is also applicable to other frameworks, enabling you to design your print components directly in Vue and print them without the need for manual HTML and CSS in a custom script tag.

Approach Explanation

Add Specific Route for Print: Create a dedicated route for your print component to ensure it opens in a new window with the correct context.
Design Your Print Component: Style your print component with all necessary elements, ensuring it appears exactly as desired for printing.
Open Print Page in New Window: Use JavaScript to open the print route in a new window, providing a seamless transition for users.
Print the Component on Mounted: Trigger the print function directly once the component is mounted, ensuring the print dialog appears immediately.
Close the Window After Print: Automatically close the print window after the user completes the print action, enhancing the user experience.

Handling Print in Vue.js

First, let's create a Vue component dedicated to printing. This component will be responsible for rendering the content to be printed and initiating the print action, it is just like a template, The template will contain the content we want to print, including an image and a table with sample data.

<script setup lang="ts">
import { DUMMY_DATA } from '@/DUMMY';
import { ref, watch } from 'vue';

/**
 * This Component is only for printing
 * Design  in vuejs and print what you see
 */

const imageLoaded = ref(false);

// Once header image loaded print & close window
watch(imageLoaded, () => {
  window.print();
  window.close();
});
</script>

<template>
  <Teleport to="body">
    <div class="modal" style="position: absolute; top: 0; left: 0; width: 100%">
      <div id="printContainer" style="background-color: white">
        <table style="width: 100%">
          <thead>
            <tr>
              <td colspan="7" class="invoice-header">
                <div class="header-container">
                  <div>
                    <img
                      width="100"
                      src="@/assets/logo.svg"
                      @load="imageLoaded = true"
                    />
                  </div>
                  <h1>Your Company</h1>
                  <h3>Your Address</h3>
                </div>
              </td>
            </tr>
            <tr>
              <th>Product</th>
              <th>Unit Price</th>
              <th>Amount</th>
              <th>Total Price</th>
            </tr>
          </thead>

          <tbody>
            <tr v-for="item in DUMMY_DATA" :key="item.id">
              <td>{{ item.product }}</td>
              <td>{{ item.unitPrice }}</td>
              <td>{{ item.amount }}</td>
              <td>{{ item.totalPrice }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </Teleport>
</template>

Here I've a table that I want to display some data, note that I've used an image in my invoice, so the approach is directly printing the opened window, inorder to make sure image is loaded I've added a simple state to indicate image is loaded or not, so only print after image is completly loaded, you can omit this if you don't have image on your template and directly onMounted the component print that window.

Also note that I use Teleport to move the content to the body for printing.

And here is the important part which is CSS specific styles for printing

<style>
/* General print styles here  */
#printContainer {
  table {
    width: 100%;
    border-collapse: collapse;
    break-inside: auto;
    page-break-inside: auto;
  }
  .header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  table td,
  table th {
    padding: 1.5mm;
    border: 2px solid #ccc;
    border: 2px solid #ccc;
    vertical-align: top;
    font-size: inherit;
  }
  table td.invoice-header {
    border: none;
  }

  table th {
    text-align: left;
    vertical-align: bottom;
    color: rgb(0, 0, 30);
    background-color: #04aa6d;
  }

  tr:nth-child(even) {
    background-color: #f2f2f2;
  }

  tr:hover {
    background-color: #ddd;
  }

  thead {
    display: table-header-group;
  }
  tfoot {
    display: table-footer-group;
  }
  tr {
    page-break-inside: avoid;
    page-break-after: auto;
  }
  table td,
  table th,
  table tr {
    /* Prevent elements from being split across pages in paginated media (like print) */
    break-inside: avoid;
    /* Automatically insert a page break after the element, if needed */
    break-after: auto;
  }
}
/* Apply styles only when the document is being printed */
@media print {
  /* Apply styles to the printed page */
  @page {
    size: auto;
    /* Set the page margins, hide default header and footer */
    margin: 0.15in 0.3in 0.15in 0.3in !important;
  }

  body {
    /* Ensure that colors are printed exactly as they appear on the screen */
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}
</style>

Importance of Print-Specific Styles

When implementing print functionality in your web application, it's essential to define specific styles that ensure your content is presented correctly when printed. Here, we'll discuss the crucial styles used in our Vue.js print component and their importance in achieving a high-quality printed output.

 table {
    width: 100%;
    border-collapse: collapse;
    break-inside: auto;
    page-break-inside: auto;
  }

break-inside: auto; page-break-inside: auto; Prevents elements from being split across pages.

Repeat the header and footer when printing

thead {
  display: table-header-group;
}
tfoot {
  display: table-footer-group;
}

display: table-header-group; display: table-footer-group; Ensures the table headers and footers are repeated on each printed page.

Prevent split rows across pages

tr {
  page-break-inside: avoid;
  page-break-after: auto;
}

page-break-inside: avoid; Prevents rows from being split across pages.
page-break-after: auto; Automatically inserts a page break after the row if needed.

Print Media Query

@media print {
  @page {
    size: auto;
    margin: 0.15in 0.3in 0.15in 0.3in !important;
  }

  body {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}

Remove default header and footer when printing

Using margin on printed page we can hide the default header and footer of the page, here is the worked value for me is margin: 0.15in 0.3in 0.15in 0.3in

Print exact colors in the page

print-color-adjust: exact; -webkit-print-color-adjust: exact; Ensures that colors are printed exactly as they appear on the screen, maintaining the intended design.

Conclusion

In this article, we've covered how to handle printing in your Vue.js application by defining print-specific styles and ensuring components are print-friendly. This approach, applicable to other frameworks as well, helps create a seamless print experience. Key elements include setting appropriate print styles, managing page breaks, and ensuring color accuracy. For a complete working sample and detailed implementation, check out the GitHub repository. Thank you for reading!

JavaScript Closures in Action: Real-World Applications

Joseph01 — Sun, 05 May 2024 17:12:47 +0000

If you just started out learning javascript and spends a few month with it, or even if you've used javascript for a while, chances are you probably didn't face an issue that required knowledge of javascript closure, or actually maybe behind the scene you already used closure without realizing it.

Closures are considered an advanced topic in javascript, understanding closures is crucial for writing more complex and efficient JavaScript code, let's start to learn more about it.

Understanding Closures

Closures occur when a function is defined within another function (the outer function) and has access to variables from the outer function's scope.

As we all know functions in javascript have access to variables outside of their scope.

 const c = 10;

 const add = (a, b) => {
     return a + b + c; 
 }

 console.log(add(1,1))

As you can see we accessed variable 'c' even though it is outside of add function.

When javascript first created it didn't support classes, so at that time developers used factory function which is a function that returns an object not a value, here is a simple example of factory function

function createCounter(){
    let value = 0;

    function increment(){
        return ++value
    }

    return {
        increment    
    }
}

Let's create a couple of counters to see what is going on

const counter1 = createCounter();
const counter2 = createCounter();

console.log(counter1.increment()); // 1
console.log(counter1.increment()); // 2
console.log(counter2.increment()); // 1

Now as you see each counter has its own value and keep tracks of it, but how is javascript doing that?! the answer is closure, closure tells us increment() function has access to value variable, but remember each time createCounter() get called we're creating a new value variable so each time incrment() will get access to its own copy of a value variable.

So we can just call closure HIDDEN STATE, and ofcourse its pretty usefull in object oriented programming.

Implementing Memoization Funciton with Closure

One of the core concept of web or programming in general is memoization, it is also a technique that applied in dynamic programming, basically memoization is realy just a fancy word for caching, so we are just caching the result of the function so that we don't excute the function if we know the result.

const add = (a, b) => {
    return a + b;
}

add(1,2); // Excute
add(1,2); // Excute
add(2,2); // Excute

Normally when we call a function javascript will not cache the result for you, it is just calling and excute the function but if we add a memoizaiton it will only excute when the result is changing,

So here is the solution of creating a memoization function that takes a function as its argument and handle the HIDDEN STATE (closure) to track the result of the function's excustion

function memoize (fn){
    let cache = {}
    return function(...args){
        const key = JSON.stringify(args);
        if(key in cache) {
            return cache[key]
        }
        cache[key] = fn(...args);
        return cache[key]
    }
}

We used cache variable as a HIDDEN STATE and stored the function parameters as key and result of the function as the value in a Hash Map, with that we can use our memoize function like this

const add = memoize((a, b) => {
    return a + b;
})

console.log(add(1,2)); // Excute
console.log(add(1,2)); // Doesn't Excute
console.log(add(2,2)); // Excute

Conclusion

In conclusion, closures are a powerful and often misunderstood concept in JavaScript. They allow functions to retain access to variables from their lexical scope, even after the outer function has finished executing. Closures are essential for creating private variables, implementing function factories, and optimizing code through techniques like memoization. Understanding closures is crucial for writing more complex and efficient JavaScript code.

Structure Your Project Standartly

Joseph01 — Tue, 13 Feb 2024 17:55:09 +0000

So, you're writing code & building projects one after another, there is the possibility that you just don't care about how you structure your projects, the thing that matters is finishing the project delivering a feature, or completing a task.

But, after a while, you left the project then came back, and boom!! You don't know what is going on (especially if the project you built is a little bit) you may spend days to reunderstand the project, which happens to almost all new developers especially self-taught ones unless you are blessed by a good mentor to clear the way you'll go through in the future.

It is now time to revamp the way you structure your project, this will show your projects stand out from those who mess up even the small-sized projects, in this blog I will discuss two approaches that are very useful and standard for you to build scalable and maintainable projects, as well as discuss avoid No-Approach way of structuring your project, but first let's understand what is the Frontend Architecture.

Frontend Architecture

Frontend architecture refers to how the code of an application is organized and structured. It outlines how different modules within the system communicate with one another, defines the interfaces of individual modules, and prescribes best practices for their development.

An effective front-end architecture is essential for maintaining a manageable and comprehensible codebase. It significantly streamlines the process of implementing new features, refactoring existing code, and preventing unexpected errors. The optimal architecture comprises modules that are loosely interconnected and closely aligned in purpose

Avoid Classical Structure Approach

If you still don't know what is the classic approach to avoid it, how it look like! actually there is no specific rules for it, if you follow youtube tutorial projects, most of them(if not all) are using that way because it is simple and easy to comeup with, it typically looks like this

There is a lot of problems with this approach, like navigating through the project becomes challenging due to poor organization, making it difficult to locate components and comprehend their relationships within the codebase. As a result, the learning curve for new developers steepens significantly, requiring an extended period to familiarize themselves with the project's intricacies. Maintenance becomes an arduous task over time, compounded by the accumulation of code complexity and the presence of unexpected bugs stemming from subpar code quality. Ultimately, these factors contribute to prolonged feature delivery timelines, impeding the project's overall progress and efficiency.

It is fine to use this approach if your project doesn't need future updates or maintenance, or simple project, otherwise there is no reason for using this appreaoch.

Modular Approach

One alternative approach or structure for the classic approach is using the module approach for your small or medium-sized project since it is easy to understand also using this will prepare you for an advanced approach for a large code basis which is FSD(we'll have a look next).

In most cases, it consists of only four parts: pages, modules, components, and UI.

UI: This directory contains UI components like buttons, selects, and inputs.
Components: This directory houses less independent pieces of code, such as ProductCard. However, items within this directory should not contain specific business logic to ensure high reusability.
Modules: This directory is designated for independent modules of the application. For instance, SignInForm serves as an isolated module with its own logic and objectives.
Pages: This directory manages the application routes.

Overall, this approach surpasses the "Classical" one, offering a more robust structure. Its benefits are evident and pronounced:

Enhanced project navigation, simplifying the discovery of components, functions, and more.
Clear and intuitive structure, facilitating ease of understanding.
Reduced coupling and increased cohesion within the system.
Improved maintenance and scalability.
Expedited feature delivery resulting from significantly enhanced developer experience.
Accommodation for larger developer teams, enabling seamless collaboration.

While this approach offers clear advantages, it may not be ideal for extensive and intricate projects. Managing a large volume of features and business logic can pose challenges within this architecture.

Feature Sliced Design (FSD)

Feature Sliced Design stands out as one of the most contemporary and dependable architectural paradigms crafted specifically for front-end projects. It seamlessly adapts to various business scenarios, addresses common challenges, and offers an intuitive experience for newcomers to development.

In "Feature Sliced Design," a project is structured into layers, with each layer comprising slices, and each slice containing segments. Before delving deeper into the intricacies of layers, slices, and segments, it's beneficial to first gain a broad understanding of the overall framework.

The top-level folders of "Feature Sliced Design" are referred to as "Layers," constituting the initial level of application segmentation. These layers adhere to a predefined set, some of which are optional. Currently, there are seven standardized layers:

Shared Layer: This encompasses reusable functionalities independent of business logic, such as UI-kit components, helpers, and loggers.
Entities Layer: Here reside the project-specific business entities, such as User, Payments, and Products.
Feature Layer: Comprising user stories and code that directly adds business value, like ChangePassword or MakePayment functionalities.
Widgets Layer: Housing components that amalgamate entities and features, facilitating the creation of composite elements like UserSettings or PaymentsList.
Pages Layer: This layer constitutes the application pages, crafted by combining entities, features, and widgets to create comprehensive user interfaces.
Processes Layer: Hosting complex inter-page scenarios, such as authentication and captcha functionalities.
App Layer: Serving as the repository for application settings, styles, and providers, exemplified by components like withAuth HOC.

Feature Sliced Design offers numerous advantages that make it a highly favorable choice. It outperforms other approaches across various aspects. Here are the main pros:

Business and User-Centric: The architecture is structured around fulfilling business requirements and user needs effectively.
Controlled Logic Reusability: It promotes the systematic reuse of logic, ensuring efficient utilization across different parts of the application.
Resilience to Changes: The design maintains stability even in the face of frequent changes and refactoring, minimizing disruptions to the development process.
Scalability: It exhibits high scalability both in terms of architectural growth and team expansion, accommodating project evolution and increased workforce seamlessly.
Incremental Adoption: "Feature Sliced Design" allows for gradual integration and adoption, enabling teams to transition smoothly without major overhauls.
Technology Stack Agnostic: It offers independence from specific technological stacks, allowing flexibility in choosing tools and frameworks best suited for the project.
Standardization: The architecture promotes uniformity and consistency, facilitating ease of understanding, maintenance, and collaboration among team members.
Comprehensive Documentation and Support: With robust documentation and a thriving community, "Feature Sliced Design" ensures accessibility to resources and assistance for developers.

Conclusion

Neglecting project structure in favor of rapid feature delivery can lead to significant challenges in the long term. Returning to a disorganized codebase can be daunting, particularly for new developers, and can hinder maintenance and scalability efforts. By adopting a modular approach or embracing the Feature Sliced Design architecture, developers can ensure their projects are scalable, maintainable, and adaptable to future changes. Prioritizing project structure not only enhances developer productivity but also improves code quality, streamlines maintenance efforts, and ultimately leads to more successful and sustainable projects.

Nextjs Page Transition With Framer-Motion

Joseph01 — Sun, 28 Jan 2024 22:14:51 +0000

Creating seamless and visually engaging transitions between pages has become an integral aspect of enhancing user experience. Next.js, a popular React framework, offers a powerful combination with Framer Motion, a declarative motion library for React, to bring life to page transitions, let's get started.

Setup The Project

Create a nextjs project by running this command

npx create-next-app@latest

This will fire the nextjs project with the latest release (in my case is version 14.1.0), feel free to set up your next project as you want, I'm going to use typescript with app router, and tailwinds for styling, clean up the root page app/page.tsx from the nextjs starter page, mine is like this

app/page.tsx

export default function Home() {
  return (
    <section className="p-4">
      <div className="container">
        <h1 className="text-2xl font-bold">Home Page</h1>
        <p className="w-1/2 font-medium py-2">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias
          natus minima exercitationem perferendis hic maxime nihil officia
          fugit, illo asperiores fugiat odit harum, dicta cumque ad atque
          assumenda! Saepe dolores repellendus animi harum ex voluptatibus
          quaerat unde obcaecati quo consequuntur sequi, autem deleniti?
          Eligendi ipsa impedit cupiditate accusantium delectus quidem.
        </p>
      </div>
    </section>
  );
}

Also, I'm going to add two more pages with the same content to the animation to look cleaner, app/about/page.tsx and app/contact/page.tsx, and add a header component for simple navigation between the pages header.tsx and use it in the layout
header.tsx

import Link from "next/link";

export default function Header() {
  return (
    <header>
      <nav className="p-4">
        <ul className="container flex gap-8">
          <li>
            <Link href="/">Home</Link>
          </li>
          <li>
            <Link href="/about">About</Link>
          </li>
          <li>
            <Link href="/contact">Contact</Link>
          </li>
        </ul>
      </nav>
    </header>
  );
}

Add Framer Motion

To install framer-motion simply run the command below

npm install framer-motion

Now after installing the framer-motion we gonna create a Transition.tsx component to define our base page transition using framer-motion, hers is the code for that component

"use client";

import { motion } from "framer-motion";

export default function Transition({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <motion.div
      initial={{ y: 20, opacity: 0 }}
      animate={{ y: 0, opacity: 1 }}
      transition={{ ease: "easeInOut", duration: 0.75 }}
    >
      {children}
    </motion.div>
  );
}

As you can see this component is a client component so we marked it as a client component using use client on top of the component declaration, basically we're using motion from framer-motion and using initial, animate, and transition props we can define the page animation.

Using Nextjs Template To Render Animation Pages

You may ask why we can't just use Layout.tsx to wrap our pages with the Transition.tsx component, Just like this

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import Header from "./header";
import Transition from "./trasnition";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Page Transition",
  description: "Using framer-motion to add trasition between pages",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <Header />
        <Transition>{children}</Transition>
      </body>
    </html>
  );
}

The problem is you can only see the animation for the first render (initial load), then, if you navigate to other pages, Nextjs will not rerender those pages from the layout, so that the Transition will not render for that page, So, for that case Template.tsx comes as a handy solution, here is the definition of Template from Nextjs doc

Unlike layouts that persist across routes and maintain state, templates create a new instance for each of their children on navigation. This means that when a user navigates between routes that share a template, a new instance of the component is mounted, DOM elements are recreated, state is not preserved, and effects are re-synchronized.

Now create template.tsx under the app directory, and copy paste the code from the Transition.tsx component, and rename the component name to Template(), like below

"use client";

import { motion } from "framer-motion";

export default function Template({ children }: { children: React.ReactNode }) {
  return (
    <motion.div
      initial={{ y: 20, opacity: 0 }}
      animate={{ y: 0, opacity: 1 }}
      transition={{ ease: "easeInOut", duration: 0.75 }}
    >
      {children}
    </motion.div>
  );
}

And here you go! we have added the page transition for the project, you can customize the transition the way you want, and have a better experience, if you have any questions feel free to ask.

Github Source Code

How To Grow As a Frontend Developer in 2024

Joseph01 — Sat, 06 Jan 2024 14:17:56 +0000

As we step into 2024, the realm of frontend development continues its rapid evolution, demanding a proactive approach to growth and skill enhancement. With over three years of experience in the field, I've come to realize the paramount importance of continually expanding one's skill set and staying abreast of the latest advancements in the industry.

1. Mastering Core Technologies

Revisiting the core trio of HTML, CSS, and JavaScript remains a cornerstone of frontend development. As a seasoned frontend developer, honing these foundational skills is a perpetual process, ensuring a solid understanding of the building blocks upon which all frontend technologies are constructed.

2. Exploring Advanced Frameworks and Libraries

Delving into advanced frontend frameworks such as React, Vue.js, or Angular is pivotal in keeping pace with the ever-evolving ecosystem. As a frontend developer committed to growth, staying updated with the latest features and updates of these frameworks remains a priority.

3. Version Control Systems and Collaboration Tools

In the collaborative landscape of development, proficiency in version control systems like Git and collaborative platforms such as GitHub is indispensable. Understanding these tools' nuances and leveraging them for efficient teamwork has been instrumental in my growth as a frontend developer.

4. Continuous Learning and Adaptability

Embracing a growth mindset and continually adapting to emerging technologies and trends is a philosophy that has driven my career progression. The frontend domain's dynamic nature demands adaptability and a hunger for learning, traits I actively cultivate in my professional journey.

5. Soft Skills and Professional Development

Recognizing the significance of soft skills alongside technical prowess has been pivotal in my career growth. Effective communication, teamwork, and problem-solving are indispensable skills that complement technical expertise and contribute to overall professional development.

6. Building Projects and Contributions

Fostering personal projects, contributing to open-source initiatives, and nurturing a robust portfolio have been an ongoing endeavor. Showcasing skills through practical implementations and real-world contributions has been a testament to my dedication to growth and learning.

As I conclude this reflection on growth as a frontend developer in 2024, it's clear that the journey to mastery is an ongoing expedition rather than a destination. Embracing a growth-oriented mindset, staying passionate about learning, and continually adapting to the ever-changing landscape remain my guiding principles in this exciting field.

Practical Applications of the Next.js 14 Image Component: Hands-on Examples

Joseph01 — Thu, 14 Dec 2023 20:24:02 +0000

Introduction

In today's web development landscape, optimizing images is pivotal for performance and user experience. While Next.js offers an Image component for image optimization, crafting a reusable image solution tailored to specific application needs proves invaluable.

This blog explores the significance of a customizable image component beyond Next.js' defaults. We'll dive into the benefits of creating a bespoke image component, enabling versatile image handling for diverse use cases in Next.js applications. Let's uncover how this customizable approach enhances image management, elevates user experience, and optimizes performance across Next.js projects.

Setting Up Next.js & Required Libraries

You can easily create nextjs app in my time 14 by running

npx create-next-app@latest

I'll stick with javascript and tailwindcss, feel free to use typescript if you want, I'll provide repo link at the end.

After creating your project, we have to install three more libraries that we need for the image component that we gonna create

npm install sharp plaiceholder @plaiceholder/next

We need these packages to convert our images to base64 for blurDataUrl the next image component requires us when we want to use external images.

Since we are using remote images from a remote source, in my case I will use Unsplash, so we have to add Unsplash image API into next config remotePatterns, as well as add the image formats

const nextConfig = {
  images: {
    formats: ["image/avif", "image/webp"],
    remotePatterns: [
      {
        hostname: "images.unsplash.com",
      },
    ],
  },
};

Creating a Reusable Image Component

Our image component is very simple you can copy and paste the code below, I named BaseImage since it will be my base Image component throughout my project

"use client";
import React, { useState } from "react";
import placeholderImage from "@/assets/placeholder.jpg";
import Image from "next/image";
import defaultBlur from "@/assets/blurData";

export default function BaseImage({ src, width, height, blurData, ...rest }) {
  const [imgSrc, setImgSrc] = useState(src);

  return (
    <Image
      src={imgSrc}
      width={width}
      height={height}
      placeholder="blur"
      blurDataURL={!!blurData ? blurData : defaultBlur}
      onError={() => {
        setImgSrc(placeholderImage);
      }}
      {...rest}
    />
  );
}

Notice that the component is a client component because we are using a state to set the fallback src image, and we're passing the blurData of a remote image that we gonna use, notice we also have a default blur data, case remote image has some problem to access it we will show our fallback blur data.

Creating base64 util function

Before we use our BaseImage component, we have to add a function that takes our remote source and returns a base64 of that image so then we'll be able to use that as a blurDataUrl for that image, here is the implementation

import { unstable_noStore } from "next/cache";
import { getPlaiceholder } from "plaiceholder";

async function getBlurData(src) {
  unstable_noStore();
  try {
    const buffer = await fetch(src).then(async (res) => {
      return Buffer.from(await res.arrayBuffer());
    });

    const data = await getPlaiceholder(buffer);
    return data;
  } catch (err) {
    console.error("Error fetching or processing image:", err);
    return { base64: "", img: "" };
  }
}

export { getBlurData };

Note that the function I created under the root of app/lib/utils.js because the plaiceholder package is working under the nodejs environment so we have to put it under the app directory.

Example: Implementing in a Card Component

Here is an example of how to use our image component with a grid card container

import { getBlurData } from "@/app/lib/utils";

import React from "react";
import BaseImage from "./BaseImage";
import Link from "next/link";

const data = [
  {
    id: 1,
    title: "Cat 1",
    description:
      "Cat 1 is a playful and energetic feline who loves to explore and chase toys around the house.",
    imgSrc:
      "https://images.unsplash.com/photo-1646753522408-077ef9839300?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8NjZ8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60",
  },
  {
    id: 2,
    title: "Cat 2",
    description:
      "Cat 2 is a calm and affectionate furry friend who enjoys lounging in cozy spots and getting cuddles.",
    imgSrc:
      "https://images.unsplash.com/photo-1651950519238-15835722f8bb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8Mjh8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60",
  },
  {
    id: 3,
    title: "Cat 3",
    description:
      "Cat 3 is an adventurous and curious cat who loves exploring the outdoors and climbing trees.",
    imgSrc:
      "https://images.unsplash.com/photo-1651950537598-373e4358d320?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8MjV8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60",
  },
  // This is for an error image
  // {
  //   id: 4,
  //   title: "Cat 2",
  //   description:
  //     "Cat 3 is an adventurous and curious cat who loves exploring the outdoors and climbing trees.",
  //   imgSrc:
  //     "https://images.unsplash.com/photo-1651950537598-373e4358d3202?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8MjV8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60",
  // },
];

const Cards = () => {
  return (
    <section className="w-fit mx-auto grid grid-cols-1 lg:grid-cols-3 md:grid-cols-2 justify-items-center justify-center gap-y-20 gap-x-14 mt-10 mb-5">
      {data.map((x) => (
        <Card key={x.id} {...x} />
      ))}
    </section>
  );
};

async function Card({ imgSrc, title, description }) {
  const { base64 } = await getBlurData(imgSrc);
  return (
    <div className="bg-white shadow-md rounded-xl duration-500 hover:scale-105 hover:shadow-xl">
      <Link href="#">
        <div className="relative h-80">
          <BaseImage
            blurData={base64}
            src={imgSrc}
            alt={title}
            fill
            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 30vw"
            className="object-cover rounded-t-xl"
          />
        </div>
        <div className="px-4 py-3 w-72">
          <p className="text-lg font-bold text-black truncate block capitalize">
            {title}
          </p>
          <div className="flex items-center">
            <p className="text-lg font-semibold text-gray cursor-auto my-3">
              {description}
            </p>
          </div>
        </div>
      </Link>
    </div>
  );
}

export default Cards;

Implementation with Two-Section Layout

import React from "react";
import BaseImage from "./BaseImage";
import { getBlurData } from "@/app/lib/utils";

const LAYOUT_URL =
  "https://images.unsplash.com/photo-1465146344425-f00d5f5c8f07";
const TwoSectionLayout = async () => {
  const { base64 } = await getBlurData(LAYOUT_URL);

  return (
    <section className="text-gray-600 body-font">
      <div className="w-11/12 max-w-4xl bg-orange-400 grid grid-cols-1 sm:grid-cols-12 mx-auto items-center  px-5 py-24 ">
        <div className="lg:pr-24 md:pr-16 col-span-12 md:col-span-6 md:text-left mb-16 md:mb-0 text-center">
          <h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">
            Before they sold out
            <br className="hidden lg:inline-block" />
            readme gluten
          </h1>
          <p className="mb-8 leading-relaxed">
            Copper mug try-hard pitchfork pour-over freeway heirloom neutral air
            plant cold-pressed tacos poke beard tote bag. Heirloom echo park
            mash tote bag selvage hot chicken authentic tumeric truffaut hexagon
            try-hard chambray.
          </p>
          <div className="">
            <button className="inline-flex text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg">
              Button
            </button>
          </div>
        </div>
        <div className="w-full relative  h-[600px] col-span-12 md:col-span-6 ">
          <BaseImage
            fill
            sizes="(min-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
            className="object-cover rounded"
            alt="hero"
            src={LAYOUT_URL}
            blurData={base64}
          />
        </div>
      </div>
    </section>
  );
};

export default TwoSectionLayout;

Conclusion

Optimizing images is integral to web development's performance and user appeal. Throughout this exploration, we've emphasized the pivotal role of a tailored image component in Next.js, surpassing default capabilities.

Github link: Source Code

Enhancing Your Next.js App with the Image Component: A Comprehensive Guide

Joseph01 — Mon, 04 Dec 2023 05:03:39 +0000

In the realm of web development, Next.js has emerged as a frontrunner, offering a robust framework for building performant and SEO-friendly React applications. Among its many advantages, Next.js provides a dedicated Image component, specifically designed to optimize image rendering and enhance website performance.

What is the Next.js Image Component?

The Next.js Image component is an extension of the standard HTML element, tailored to address the challenges of image optimization in modern web development. It leverages a combination of techniques, including image resizing, automatic format selection, and lazy loading, to ensure that images are delivered efficiently and seamlessly.

Why Use the Next.js Image Component?

There are several compelling reasons to adopt the Next.js Image component in your web development projects:

1. Image Optimization: The component automatically optimizes images for different device sizes and screen resolutions, ensuring that only the appropriate size is loaded for each device, reducing bandwidth usage and improving page load times.

2. Lazy Loading: Lazy loading defers the loading of non-critical images until they are visible in the viewport, further enhancing page load performance. This technique is particularly beneficial for pages with numerous images.

3. Image Formats: The component intelligently selects the most suitable image format based on browser compatibility and file size, optimizing image delivery for different browsers and devices.

4. SEO Benefits: By optimizing image loading and file sizes, the Image component contributes to improved search engine rankings, as search engines prioritize websites with fast loading times and efficient image handling.

5. Developer Experience: The component simplifies image handling in Next.js applications, providing a consistent and declarative interface for managing images across different pages and components.

How Does the Next.js Image Component Affect Website Performance?

The Next.js Image component significantly impacts website performance in several ways:

1. Reduced Bandwidth Usage: By optimizing image sizes and formats, the component minimizes the amount of data transferred, leading to faster loading times and lower bandwidth consumption.

2. Improved Page Load Times: Lazy loading and image optimization techniques contribute to faster page rendering, resulting in a smoother and more responsive user experience.

3. Enhanced SEO: Optimized image handling improves search engine rankings, attracting more organic traffic to your website.

4. Streamlined Development: The component's declarative syntax and automatic optimization reduce development time and simplify image management in Next.js applications.

Implementing the Next.js Image Component

Integrating the Image component into your Next.js application is straightforward:

import Image from 'next/image';

<Image
  src="/path/to/image.jpg"
  width={1200}
  height={600}
  alt="Image description"
/>

The required props include src, width, height, and alt. Additionally, you can customize the component's behavior using optional props like loader, fill, sizes, and quality.

Real-World Examples

To illustrate the practical application of the Next.js Image component, consider the following examples:

Example 1: Image on Top of Card with Title and Description

import Image from 'next/image';

<div className="card shadow-sm">
  <Image
    src="/path/to/image.jpg"
    width={300}
    height={300}
    alt="Image description"
  />
  <h2>Card Title</h2>
  <p>Card description.</p>
</div>

Example 2: Image Grid Container with Tailwind CSS Styling
You can have a nicely & easily displaing a group of responsive and optimized images with grid

import Image from 'next/image';

<div className="grid grid-cols-3 gap-4 p-6">
        <div className="card relative h-[200px]">
          <Image
            src="image"
            fill
            sizes="100vw"
            style={{ objectFit: "cover" }}
            alt="Image description"
          />
        </div>
        <div className="card relative h-[200px]">
          <Image
            src="image"
            fill
            sizes="100vw"
            style={{ objectFit: "cover" }}
            alt="Image description"
          />
        </div>
        <div className="card relative h-[200px]">
          <Image
            src="image"
            fill
            sizes="100vw"
            style={{ objectFit: "cover" }}
            alt="Image description"
          />
        </div>
      </div>

These examples demonstrate the versatility of the Next.js Image component in creating visually appealing and performant web applications.

Conclusion

The Next.js Image component stands as an invaluable tool for optimizing image rendering and enhancing website performance in Next.js applications. Its ability to automatically optimize images, leverage lazy loading, and select appropriate image formats makes it an essential tool for building performant and SEO-friendly web applications. Embrace the Image component and elevate your Next.js projects to new heights of efficiency and user experience.

Why Webpack? Exploring Its Role in Web Development

Joseph01 — Fri, 24 Nov 2023 16:55:35 +0000

Ever found yourself knee-deep in a web development project, juggling JavaScript files, wrestling with CSS dependencies, and wondering why your site's performance resembles rush hour traffic? Trust me, I've been there!

As a fellow web developer, I've often pondered the same question: What's the deal with Webpack? What sorcery lies behind those configurations and why does it even exist? You know the drill – creating a website from scratch using HTML, CSS, and JavaScript seems like a breeze at first, until your project grows larger and suddenly resembles a tangled ball of yarn. Cue the headache-inducing manual dependency management!

But fear not, fellow developers! Enter Webpack – the unsung hero of modern web development. It's not just another tool in the shed; it's the Swiss Army knife you've been searching for in the wild wilderness of code chaos.

Webpack isn't just about bundling modules; it's a game-changer, a guardian angel, if you will, that swoops in to streamline your development workflow, optimize performance, and tame the unruly beast that is web application dependencies.

Introduction to Webpack

At its core, webpack isn't merely a tool; it's a game-changer. It redefines how developers approach organizing and bundling code, offering a robust solution that streamlines development workflows, optimizes performance, and transforms the way web applications are delivered to end-users.

Webpack functions as the backbone of many modern web projects, taking disparate modules, assets, stylesheets, and scripts, and intelligently bundling them into optimized bundles. But it's not just about bundling; webpack empowers developers by providing a sophisticated ecosystem of loaders, plugins, and optimizations, allowing for tailored and efficient workflows.

Through its powerful configuration capabilities, webpack orchestrates the transformation of code, optimizing assets, and handling dependencies seamlessly. It simplifies tasks that were once cumbersome, such as code splitting, lazy loading, and tree shaking, ensuring optimal performance and a leaner, more responsive web application.

Benefits of Leveraging Webpack in Your Project

1. Efficient Module Bundling:

Organized Codebase: Webpack facilitates a modular approach, allowing you to split your code into smaller, manageable modules.

Dependency Management: It creates a dependency graph and bundles these modules efficiently, reducing HTTP requests and optimizing load times.

2. Performance Optimization:

Code Splitting: Webpack enables code splitting, allowing for the loading of essential code upfront and fetching additional code as needed, improving initial load times.

Minification & Compression: It optimizes JavaScript, CSS, and other assets by minifying and compressing them, reducing file sizes for faster downloads.

3. Enhanced Development Workflow:

Dev Server & Hot Module Replacement (HMR): Offers a development server with HMR support, allowing for real-time updates to the application without a full reload, speeding up development.

Loaders & Plugins: An extensive ecosystem of loaders and plugins automates tasks such as transpiling, optimizing images, and more, enhancing productivity.

4. Customizable Configuration:

Flexible Configuration: Allows tailoring the build process through configuration, enabling developers to adjust settings, including specific loaders/plugins, and fine-tune optimizations as per project needs.

5. Ecosystem and Community:

Rich Ecosystem: Webpack has a vibrant ecosystem with a wide range of plugins and loaders, offering solutions for various development needs.

Active Community: Being widely adopted, webpack has a supportive community that provides resources, tutorials, and continual updates.

6. Industry Standardization:

Widely Adopted: It has become an industry-standard tool, with many modern web projects and frameworks integrating Webpack into their development processes.

7. Optimized Production Builds:

Production-Ready Builds: Webpack prepares optimized production builds, including code minification, tree shaking to remove dead code, and asset optimization.

Using Webpack For Your Project

In this section, we'll delve into the practical application of Webpack, utilizing it to power up a web project built purely with HTML, CSS, and JavaScript. By implementing Webpack, we'll illustrate firsthand how it optimizes code organization, enhances performance, and simplifies asset management.

- Project Setup
First, create an empty directory and name it whatever you like, I will name mine 'Webpack-tut', after that open terminal and initialize npm, then install webpack and webpack-cli

npm init -y
npm install webpack webpack-cli --save-dev

We'll begin by making a slight adjustment to our directory arrangement. This involves dividing our codebase into distinct sections: the "source" directory (./src), where our primary code is written and edited, and the "distribution" directory (./dist), which houses the optimized output of our build process. The "source" segment encompasses the code we actively work on, while the "distribution" section holds the minimized and optimized code intended for loading in the browser. This modification in our directory structure ensures a clearer organization of our project components and facilitates an efficient build process.

dist/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Webpack Tut</title>
   </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

Now in src/index.js let's say we required to use lodash, one way is to include the lodash through HTML like this

<script src="https://unpkg.com/lodash@4.17.20"></script>

This method of managing JavaScript projects presents several challenges:

It's not instantly obvious that the script relies on an external library.
Incorrect or missing dependencies can lead to dysfunctional application behavior.
Including unused dependencies compels the browser to download unnecessary code, impacting performance.

So, we will use webpack to handle this.

Now install lodash from terminal

npm install --save lodash

src/index.js

import _ from 'lodash';

 function component() {
   const element = document.createElement('div');

  // Lodash, now imported by this script
   element.innerHTML = _.join(['Hello', 'webpack'], ' ');

   return element;
 }

 document.body.appendChild(component());

In this configuration, index.js makes a clear requirement for the presence of lodash, assigning it as _ without polluting the global scope. By specifying a module's dependencies, webpack utilizes this data to construct a dependency graph. This graph is then utilized to create an optimized bundle, ensuring that scripts execute in the appropriate sequence.

Now remove the lodash script from the dist/index.html

Also, change the js loaded to be main.js, because once we run the npx webpack it will generate the dist/main.js as the output, from the entry (src/index.js).

Now run

npx webpack

Launch the index.html file located in the dist directory using your browser. If the process is successful, you'll witness the text 'Hello webpack' displayed on the page.

Add Webpack Configuration
From version 4 onwards, webpack operates without necessitating configuration. However, for more intricate project requirements, webpack facilitates a configuration file. This approach proves more efficient than manually entering multiple commands into the terminal. Hence, let's proceed to create one.

Create Webpack config file and paste this code

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
 mode: 'development'
}

Loading CSS
In order to import a CSS file from within a JavaScript module, you need to install and add the style-loader and css-loader to your module configuration:

npm install --save-dev style-loader css-loader

And update the config file

 const path = require('path');

 module.exports = {
   entry: './src/index.js',
   output: {
     filename: 'bundle.js',
     path: path.resolve(__dirname, 'dist'),
   },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
 };

Loaders within webpack can be linked together in a chain. Each loader in this chain applies transformations to the processed resource. The chain operates in reverse order, wherein the initial loader provides its output (resource with applied transformations) to the subsequent loader, continuing in this manner. Eventually, webpack anticipates JavaScript to be returned by the ultimate loader in the chain.

Maintaining the sequence of loaders is crucial: 'style-loader' should precede 'css-loader'. Deviating from this sequence might lead to webpack encountering errors.

Add style.css under the src/ directory, and now you can import it from your js files, like this

import './style.css';

Run npx run webpack and open the dist/index.html file, in the browser look at the html content from inspect, and yohoo! you see the CSS file bing imprted by webpack during the build

Loading Images

Add this into your module rule in the config file
webpack.config.js

     {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },

Now you can import images like this in your js files

import MyImage from './webpack.jpg'

and again run the command to build your app again

Using Watch Mode
Running the build command every time is an annoying process, you can add a watch command from your package.json file so anytime you change something this command will run for you instead of running npx run webpack, now add this into your scripts in package.json
package.json

    "watch": "webpack --watch",

For a comprehensive understanding and to leverage webpack's full potential, it's highly recommended to delve into its official documentation. Exploring the documentation unveils a vast array of possibilities, additional features, advanced configurations, and best practices that can further enhance your web development projects. Embracing the documentation is key to harnessing the complete power of webpack and customizing it to suit specific project needs, making your development journey more efficient and rewarding.

Conclusion

In conclusion, webpack stands as an indispensable tool in modern web development, revolutionizing the way developers manage, organize, and optimize their projects. Its ability to efficiently bundle modules, optimize assets, and streamline development workflows has made it a cornerstone in building robust, performant web applications.

By providing a sophisticated ecosystem of loaders, plugins, and a configurable setup, webpack empowers developers to create leaner, faster, and more maintainable codebases. The seamless integration of webpack into projects ensures improved performance, reduced load times, and a more structured approach to managing dependencies.

Building Stunning Docs: Diving Deep into Docusaurus Customization

Joseph01 — Sun, 19 Nov 2023 11:56:40 +0000

In the realm of web development, documentation stands as a cornerstone for successful projects. Enter Docusaurus—a streamlined, open-source documentation framework designed to simplify the creation of elegant and intuitive documentation websites.

Docusaurus offers a powerful yet straightforward approach to crafting documentation. With Markdown-based content creation and user-friendly workflows, it empowers developers to focus on content without the hassle of intricate HTML, while ensuring flexibility and ease of navigation.

In this comprehensive guide, we delve into the intricacies of Docusaurus, exploring its features, setup, customization options, and advanced functionalities. Join us on this journey as we uncover the art of leveraging Docusaurus to create compelling and effective documentation sites.

Docusaurus

Docusaurus functions as a static-site generator that constructs a single-page application, enabling rapid client-side navigation and harnessing React's robust capabilities to imbue your site with interactivity. While it comes equipped with pre-built documentation features, its versatility extends to the creation of diverse sites, including personal websites, products, blogs, marketing landing pages, and more.

Installation

To create Docusaurus run the command below in your terminal, it will scaffold the new Docusaurus project with its latest version (currently v3)

npx create-docusaurus@latest my-website classic --typescript
There are more templates to choose from when you create the Docusaurus app but we stick with the standard documentation, a blog, and custom pages which is a classic template, and to use with typescript add the flag --typescript to the end of the command.

Note/ make sure you have installed node v18 or above

Project Structure

After running the command you have your project structured like this,

├── blog
│ ├── 2019-05-28-hola.md
│ ├── 2019-05-29-hello-world.md
│ └── 2020-05-30-welcome.md
├── docs
│ ├── doc1.md
│ ├── doc2.md
│ ├── doc3.md
│ └── mdx.md
├── src
│ ├── css
│ │ └── custom.css
│ └── pages
│ ├── styles.module.css
│ └── index.js
├── static
│ └── img
├── docusaurus.config.js
├── package.json
├── README.md
├── sidebars.js
└── yarn.lock

/blog/ - This directory contains all the markdown files, of your site blogs, you can simply add a new blog by using markdown, or simply remove a blog file by deleting its file, you can combine the markdown with MDX, resulting a well-written blog post.
/docs/ - Just like the blog directory you can create markdown files for your docs, the order of the sidebar is sequential based on your file, but you can customize the order in sidebars.ts.
/src/ - Here we can add all the pages and components of our application, under the pages directory you can easily create any other pages of your website, the root is pages/index.tsx add another page like pages/showcase now showcase page is available under http://localhost:3000/showcase.
/static/ - Static directory. Any contents inside here will be copied into the root of the final build directory
/docusaurus.config.js - This is the site configuration file, where you can add the metadata, navbar links, footer links, and title, etc...
/sidebars.js as we mentioned above used to specify the order of documents in the sidebar

You can run the app by running
npm run start

Congratulations! You have just created your first Docusaurus site, let's see what we can do with it.

Docursaurus config

The Docusaurus configuration file serves as the control center for shaping and customizing your Docusaurus-powered website. This essential file, often named docusaurus.config.js, encapsulates various settings and options that govern the behavior, appearance, and functionality of your site.

Within this configuration file, developers wield the power to define crucial parameters, such as site metadata, navigation structure, theme customization, plugin integration, and more. It acts as the foundation upon which the entire website is built, allowing users to tailor and fine-tune their site to meet specific project requirements and preferences.

By editing the Docusaurus configuration file, developers can seamlessly adjust the site's branding, manage navigation menus, enable or disable features, configure SEO settings, and incorporate plugins to enhance the site's capabilities. This centralized file not only simplifies the customization process but also provides a structured approach to efficiently manage and scale the website.

With its comprehensive yet accessible structure, the Docusaurus configuration file empowers developers to shape their website's identity and functionality, ensuring a tailored and polished online presence aligned with their vision and objectives.

Override Theme Components

One of the coolest things that I like is Overriding components from an existing theme or building your own theme from the ground up.

This process is called Component Swizzling.

[Swizzling] comes from Objective-C and Swift-UI: method swizzling is the process of changing the implementation of an existing selector (method). For Docusaurus, component swizzling means providing an alternative component that takes precedence over the component provided by the theme.

What does this mean in practice? for example, you want to have a different footer rather than using a config file to add footer items, so for that, you can create a /theme directory under the /src directory, and create /Footer/index.tsx now Docusaurus will no longer use its default Footer that comes from the classic template.

But there is one step left we have to run a command to swizzle the footer away for that run the command below
npm run swizzle @docusaurus/theme-classic Footer -- --eject
By cloning the component from the Docusaurus package into our workspace, we've gained complete control over the appearance and style of the site's footer. This allows us the freedom to customize this specific element while retaining the ability to utilize other components from the theme, ensuring compatibility with future updates as well.

Using ThemedImage

Docusaurus supports themed images: the ThemedImage component (included in the themes) allows you to switch the image source based on the current theme.

import ThemedImage from '@theme/ThemedImage';

<ThemedImage
  alt="Docusaurus themed image"
  sources={{
    light: useBaseUrl('/img/docusaurus_light.svg'),
    dark: useBaseUrl('/img/docusaurus_dark.svg'),
  }}
/>;

Conclusion

As we conclude this journey, it's clear that Docusaurus isn't just a documentation framework; it's a catalyst for developers seeking streamlined, elegant, and effective solutions in presenting their projects. Its user-centric approach, rich features, and adaptability make it an indispensable asset in the toolkit of developers, teams, and organizations striving for excellence in their online presence.