DEV Community: Akilesh

Kamal Deploy A failed attempt

Akilesh — Thu, 30 Jul 2026 05:42:47 +0000

Part 1 : Happy ending

05-09-2025 - It workings I did manage to deploy using kamal and

Assumiung you have a rails application setup with postgres db

Replace

config/deploy.yml

# Name of your application. Used to uniquely configure containers.
service: form_build

# Name of the container image.
image: 2112akilesh/form_build

# Deploy to these servers.
servers:
  web:
    - 140.245.16.xxx
  # job:
  #   hosts:
  #     - 192.168.0.1
  #   cmd: bin/jobs

# Enable SSL auto certification via Let's Encrypt and allow for multiple apps on a single web server.
# Remove this section when using multiple web servers and ensure you terminate SSL at your load balancer.
#
# Note: If using Cloudflare, set encryption mode in SSL/TLS setting to "Full" to enable CF-to-app encryption.
proxy:
  ssl: true
  host: form.akilesh.in 
# Credentials for your image host.
registry:
  # Specify the registry server, if you're not using Docker Hub
  # server: registry.digitalocean.com / ghcr.io / ...
  username: 2112akilesh 

  # Always use an access token rather than real password when possible.
  password:
    - KAMAL_REGISTRY_PASSWORD

# Inject ENV variables into containers (secrets come from .kamal/secrets).
env:
  secret:
    - RAILS_MASTER_KEY
    - POSTGRES_PASSWORD
  clear:
    # Run the Solid Queue Supervisor inside the web server's Puma process to do jobs.
    # When you start using multiple servers, you should split out job processing to a dedicated machine.
    SOLID_QUEUE_IN_PUMA: true

    # Set number of processes dedicated to Solid Queue (default: 1)
    # JOB_CONCURRENCY: 3

    # Set number of cores available to the application on each server (default: 1).
    # WEB_CONCURRENCY: 2

    # Match this to any external database server to configure Active Record correctly

    # Use form_build-db for a db accessory server on same machine via local kamal docker network.
    # DB_HOST: postgresql://postgres:postgres@140.245.16.247:5432/form_build-db
    DB_HOST: form_build-db
    POSTGRES_USER: form_build
    POSTGRES_DB: form_build_production
    # Log everything from Rails
    # RAILS_LOG_LEVEL: debug

# Aliases are triggered with "bin/kamal <alias>". You can overwrite arguments on invocation:
# "bin/kamal logs -r job" will tail logs from the first server in the job section.
aliases:
  console: app exec --interactive --reuse "bin/rails console"
  shell: app exec --interactive --reuse "bash"
  logs: app logs -f
  dbc: app exec --interactive --reuse "bin/rails dbconsole"

# Use a persistent storage volume for sqlite database files and local Active Storage files.
# Recommended to change this to a mounted volume path that is backed up off server.
volumes:
  - "form_build_storage:/rails/storage"

# Bridge fingerprinted assets, like JS and CSS, between versions to avoid
# hitting 404 on in-flight requests. Combines all files from new and old
# version inside the asset_path.
asset_path: /rails/public/assets

# Configure the image builder.
builder:
  arch: amd64

# Use a different ssh user than root
ssh:
  user: ubuntu

# Then, configure the `postgres` accessory
accessories:
  db:
     image: postgres:latest
     host: 140.245.16.247
     # Change to 5432 to expose port to the world instead of just local network.
     port: "127.0.0.1:5432:5432"
     # options:
     #    restart: always
     env:
       clear:
         DB_HOST: form_build-db
         POSTGRES_USER: form_build
         POSTGRES_DB: form_build_production
       secret:
         - POSTGRES_PASSWORD
     files:
       - config/setup.sql:/docker-entrypoint-initdb.d/setup.sql
     volumes:
       - data:/var/lib/postgresql/data
     # directories:
     #  - data:/var/lib/postgresql/data

config/setup.sql

CREATE DATABASE form_build_production;
CREATE DATABASE form_build_production_cache;
CREATE DATABASE form_build_production_queue;
CREATE DATABASE form_build_production_cable;

config/database.yml

# PostgreSQL. Versions 9.3 and up are supported.
#
# Install the pg driver:
#   gem install pg
# On macOS with Homebrew:
#   gem install pg -- --with-pg-config=/usr/local/bin/pg_config
# On Windows:
#   gem install pg
#       Choose the win32 build.
#       Install PostgreSQL and put its /bin directory on your path.
#
# Configure Using Gemfile
# gem "pg"
#
default: &default
  adapter: postgresql
  encoding: unicode
  # For details on connection pooling, see Rails configuration guide
  # https://guides.rubyonrails.org/configuring.html#database-pooling
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>

development:
  <<: *default
  database: form_build_development
  password: <%= ENV["POSTGRES_PASSWORD"] %>
  # The specified database role being used to connect to PostgreSQL.
  # To create additional roles in PostgreSQL see `$ createuser --help`.
  # When left blank, PostgreSQL will use the default role. This is
  # the same name as the operating system user running Rails.
  #username: form_build

  # The password associated with the PostgreSQL role (username).
  #password:

  # Connect on a TCP socket. Omitted by default since the client uses a
  # domain socket that doesn't need configuration. Windows does not have
  # domain sockets, so uncomment these lines.
  #host: localhost

  # The TCP port the server listens on. Defaults to 5432.
  # If your server runs on a different port number, change accordingly.
  #port: 5432

  # Schema search path. The server defaults to $user,public
  #schema_search_path: myapp,sharedapp,public

  # Minimum log levels, in increasing order:
  #   debug5, debug4, debug3, debug2, debug1,
  #   log, notice, warning, error, fatal, and panic
  # Defaults to warning.
  #min_messages: notice

# Warning: The database defined as "test" will be erased and
# re-generated from your development database when you run "rake".
# Do not set this db to the same as development or production.
test:
  <<: *default
  database: form_build_test

# As with config/credentials.yml, you never want to store sensitive information,
# like your database password, in your source code. If your source code is
# ever seen by anyone, they now have access to your database.
#
# Instead, provide the password or a full connection URL as an environment
# variable when you boot the app. For example:
#
#   DATABASE_URL="postgres://myuser:mypass@localhost/somedatabase"
#
# If the connection URL is provided in the special DATABASE_URL environment
# variable, Rails will automatically merge its configuration values on top of
# the values provided in this file. Alternatively, you can specify a connection
# URL environment variable explicitly:
#
#   production:
#     url: <%= ENV["MY_APP_DATABASE_URL"] %>
#
# Read https://guides.rubyonrails.org/configuring.html#configuring-a-database
# for a full overview on how database connection configuration can be specified.
#
production:
  primary: &primary_production
    <<: *default
    host: <%= ENV["DB_HOST"] %>
    database: form_build_production
    username: form_build
    password: <%= ENV["POSTGRES_PASSWORD"] %>
  cache:
    <<: *primary_production
    database: form_build_production_cache
    migrations_paths: db/cache_migrate
  queue:
    <<: *primary_production
    database: form_build_production_queue
    migrations_paths: db/queue_migrate
  cable:
    <<: *primary_production
    database: form_build_production_cable
    migrations_paths: db/cable_migrate

Dockerfile

# syntax=docker/dockerfile:1
# check=error=true

# This Dockerfile is designed for production, not development. Use with Kamal or build'n'run by hand:
# docker build -t form_build .
# docker run -d -p 80:80 -e RAILS_MASTER_KEY=<value from config/master.key> --name form_build form_build

# For a containerized dev environment, see Dev Containers: https://guides.rubyonrails.org/getting_started_with_devcontainer.html

# Make sure RUBY_VERSION matches the Ruby version in .ruby-version
ARG RUBY_VERSION=3.4.2
FROM docker.io/library/ruby:$RUBY_VERSION-slim AS base

# Rails app lives here
WORKDIR /rails

# Install base packages
RUN apt-get update -qq && \
    apt-get install --no-install-recommends -y curl libjemalloc2 libvips postgresql-client && \
    rm -rf /var/lib/apt/lists /var/cache/apt/archives

# Set production environment
ENV RAILS_ENV="production" \
    BUNDLE_DEPLOYMENT="1" \
    BUNDLE_PATH="/usr/local/bundle" \
    BUNDLE_WITHOUT="development"

# Throw-away build stage to reduce size of final image
FROM base AS build

# Install packages needed to build gems
RUN apt-get update -qq && \
    apt-get install --no-install-recommends -y build-essential git libpq-dev libyaml-dev pkg-config && \
    rm -rf /var/lib/apt/lists /var/cache/apt/archives

# Install application gems
COPY Gemfile Gemfile.lock ./
RUN bundle install && \
    rm -rf ~/.bundle/ "${BUNDLE_PATH}"/ruby/*/cache "${BUNDLE_PATH}"/ruby/*/bundler/gems/*/.git && \
    bundle exec bootsnap precompile --gemfile

# Copy application code
COPY . .

# Precompile bootsnap code for faster boot times
RUN bundle exec bootsnap precompile app/ lib/

# Precompiling assets for production without requiring secret RAILS_MASTER_KEY
RUN SECRET_KEY_BASE_DUMMY=1 ./bin/rails assets:precompile

# Final stage for app image
FROM base

# Copy built artifacts: gems, application
COPY --from=build "${BUNDLE_PATH}" "${BUNDLE_PATH}"
COPY --from=build /rails /rails

# Run and own only the runtime files as a non-root user for security
RUN groupadd --system --gid 1000 rails && \
    useradd rails --uid 1000 --gid 1000 --create-home --shell /bin/bash && \
    chown -R rails:rails db log storage tmp
USER 1000:1000

# Entrypoint prepares the database.
ENTRYPOINT ["/rails/bin/docker-entrypoint"]

# Start server via Thruster by default, this can be overwritten at runtime
EXPOSE 80
CMD ["./bin/thrust", "./bin/rails", "server"

If you use any other database or get a config with your Docker_user_name, Application_name, serverip, Domain_name use this tool

https://dailydevtools.com/kamal_config

Part 2 : Sad Ending

Not a bid fan of kamal-deploy but the hype around it is real

You need to do some prep work before jumping in

Create a VPS
Add Fire wall rules (Enable port 80 & 443)
Connecting VPS using SSH
Add A record to your DNS
Lets deploy ← In this blog

Install kamal

Assuming you have ruby installed

gem install kamal

Setup docker in your local and VPS

Install docker locally I am using Debian refer this **link & additionally I wanted to install tis package to**

sudo apt update
sudo apt install -y [docker.io](http://docker.io/)
apt install docker-buildx-plugin

Kamal SSH setup for non root user run the below command in your VPS

sudo apt update
sudo apt upgrade -y
sudo apt install -y docker.io curl git
sudo usermod -a -G docker app

Start Docker server locally

sudo systemctl start docker   // Start  Docker 
sudo systemctl status docker  // Check Docker Status
sudo usermod -aG docker $USER  // Making sure kamal had access to run docker without sudo privilege

you might also want to set permission to instance sudo usermod -aG docker ${USER}

Restart your device

inside our config/deploy
lets set thing up

add your image name

Paste your VPS ipv4 to servers:

Uncomment your ssh: line and add your ssh config it may vary depending on your case for me I need to use different user name instead of root refer doc if you have other case

Make sure your .yml file is formatter correctly otherwise you will get error similar to ERROR (Psych::SyntaxError): (<unknown>): did not find expected key while parsing a block mapping at line 2 column 1

go to your docker hub and create a access token make sure to give read and write access copy your access key and save it in a .env

KAMAL_REGISTRY_PASSWORD=xxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Push your env to kamal

kamal env push

or add it in your local linux environment (I personally went with this)

export KAMAL_REGISTRY_PASSWORD=xxxxxxxxxxxxxxxxxxxxxxxxxxxx

and restart your file in your project directory

kamal setup

If you face your self with Releasing the deploy lock error run this command
kamal lock release to release the lock nice little feature

I am using postgres database so ill configure it to
update your accessories: & production: section in deploy.yml

update the init file

    files:
      - config/init.sql:/docker-entrypoint-initdb.d/setup.sql

create a init file

I tried kamal with rails 5 and docker I somehow find myself stuck in between error even after multiple hours of googling and successfully deploying it initially the following build fails I just gave up now back with kamal and rails 8 ( I know I am not clear with my error and explanation but it is what it is fuck off)

Even while writing this post I went through a hard time to figure our what went wring and how to fix it and even for the n-th time I coudnt able to pull it out in 1st try but yes its like

Add A name record to your DNS pointing it to your VPS ip address

day 3 still Kamal deploy fucks me
I dont think you will get a perfectly polished outcome after this blog its trial and error method

in your .kamal/secret pass production.key

# RAILS_MASTER_KEY=$(cat config/master.key)
RAILS_MASTER_KEY=$(cat config/credentials/production.key)

Pass your application host name

DB_HOST=

31/05/2025 — Not giving up today

Starting from scratch

Use this tool to generate kamal config https://dailydevtools.com/kamal_config

Delete the database in the server if already exist

Other Tools to check https://containrrr.dev/watchtower/

Enable port 80 & 443 check https://www.digitalocean.com/community/tutorials/how-to-set-up-a-firewall-with-ufw-on-ubuntu#step-1-making-sure-ipv6-is-enabled

Fuck Kamal I am switching to plain DOCKER implementation

29 April 2026

Use latest Ubuntu server 22.04+

If old Ubuntu versoin is used install docker manually

sudo apt update
sudo apt install -y ca-certificates curl gnupg

sudo install -m 0755 -d /etc/apt/keyrings
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo tee /etc/apt/keyrings/docker.asc > /dev/null
sudo chmod a+r /etc/apt/keyrings/docker.asc
echo \
"deb [arch=amd64 signed-by=/etc/apt/keyrings/docker.asc] https://download.docker.com/linux/ubuntu focal stable" | \
sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
sudo apt update

```jsx
sudo systemctl enable --now docker
sudo usermod -aG docker ubuntu
```

Prepare deploy.yml

# Name of your application. Used to uniquely configure containers.
service: drop_share

# Name of the container image (use your-user/app-name on external registries).
image: 2112akilesh/drop_share

# Deploy to these servers.
servers:
  web:
    - 141.148.209.128

proxy:
  ssl: false
  host: dropshare.akilesh.in

registry:
  username: 2112akilesh

# Access token stored in `.kamal/secrets`
  password:
    - KAMAL_REGISTRY_PASSWORD

# Inject ENV variables into containers (secrets come from .kamal/secrets).
env:
  secret:
    - RAILS_MASTER_KEY
  clear:
    SOLID_QUEUE_IN_PUMA: false

# Aliases are triggered with "bin/kamal <alias>". You can overwrite arguments on invocation:
# "bin/kamal logs -r job" will tail logs from the first server in the job section.
aliases:
  console: app exec --interactive --reuse "bin/rails console"
  shell: app exec --interactive --reuse "bash"
  logs: app logs -f
  dbc: app exec --interactive --reuse "bin/rails dbconsole --include-password"

# Use a persistent storage volume for sqlite database files and local Active Storage files.
# Recommended to change this to a mounted volume path that is backed up off server.
volumes:
  - "drop_share_storage:/rails/storage"
  - "db:/rails/db"

asset_path: /rails/public/assets
builder:
  arch: amd64

# I have stored my ssh key in <my_project>/ssh/my_ssh.key
# dont forget to add ssh to .gitignore
ssh:
  user: ubuntu
  keys:
    - ssh/ssh-key-2026-04-14.key

Add custom domain

configure your DNS

add a A record with vps public ip addresss

Optimise VPS

sudo fallocate -l 1G /swapfile
sudo chmod 600 /swapfile
sudo mkswap /swapfile
sudo swapon /swapfile
echo '/swapfile none swap sw 0 0' | sudo tee -a /etc/fstab

kamal setup

kamal deploy

Revue Newsletter Subscribe from ur Web

Akilesh — Fri, 17 Jul 2026 08:51:53 +0000

🪦 In memory of Revue

WTF is Revue

Get api key

Login/Create a Revue account after successfully creating a account move to integration page and scroll to the bottom you will see a link to request access for the api

Provide the requested details to review the account and for what type of usage we will be using the API for ans submit information.

Once your account is verified and review process is complete a email will be sent to your account. this process will take some time so stay calm and look at my bio unit you receive your mail 😜.

After receiving your mail check your integrations panel bottom you will have your API key located below.

Coding part

import { useState } from 'react';

const Subscribe = () =>
{
    const [ email, setEmail ] = useState( '' );
    const [ error, setError ] = useState( '' );
    const [ success, setSuccess ] = useState( '' );

    const subscribeMe = async ( event ) =>
    {
        event.preventDefault();

        const res = await fetch( "/api/subscribe", {
            body: JSON.stringify( { email: email } ),
            headers: { 'Content-Type': 'application/json' },
            method: "POST",
        } );

        const { error, message } = await res.json();
        if ( error )
        {
            setError( error );
        } else
        {
            setSuccess( message );
        }
    };

    return (
        <div>
            <p>
                Sign up for my newsletter
            </p>
            <form onSubmit={ subscribeMe }>
                <input
                    value={ email }
                    onChange={ ( e ) => setEmail( e.target.value ) }
                    placeholder="Enter your mail address"
                    type="email"
                    autoComplete="email"
                    required
                />
                <button
                    type="submit"
                >
                    Subscribe
                </button>
            </form>

            { success
                ?
                <span>
                    { success }
                </span>
                :
                <span>
                    { error }
                </span>
            }
        </div>
    );
};

export default Subscribe;

Official doc

Revue API doc

To verify, the email address got added successfully, got to the subscribers page of your account. You should see this new email id added,

Custom Theme with MUI/Material and MUI/Joy

Akilesh — Sat, 19 Apr 2025 17:54:01 +0000

Below implementation custom color's with Mui/Joy & Material with Next.js `/page` route

Create a ThemeProvider component which we will be using it to store our custom theme, I have added custom colors and break points feel free to use it as your starting point.

CssVarsProvider is deprecated works for now but need to replace it in future releases

ThemeProvider.tsx

import {
    extendTheme as materialExtendTheme,
    CssVarsProvider as MaterialCssVarsProvider,
    THEME_ID as MATERIAL_THEME_ID,
} from '@mui/material/styles';
import { CssVarsProvider as JoyCssVarsProvider } from '@mui/joy/styles';
import CssBaseline from '@mui/material/CssBaseline';

declare module '@mui/material/styles' {
    interface Palette {
        white: {
            main: string;
            light: string;
            contrastText: string;
        }
        black: {
            dark: string;
            main: string;
            light: string;
            lightest: string;
        }
    }
we
    interface PaletteOptions {
        white?: {
            main: string;
            light: string;
            contrastText: string;
        }
        black?: {
            dark: string;
            main: string;
            light: string;
            lightest: string;
        }
    }
}

const theme = {
    colorSchemes: {
        light: {
            palette: {
                background: {
                    default: '#FAFAFF', // Winter
                    paper: '#FAFAFF', // Winter
                },
                primary: {
                    main: '#00008B',  // Royal
                    contrastText: '#FAFAFF',
                    light: '#E6E6F0',
                    dark: '#dfdff7',
                },
                secondary: {
                    main: '#0A64BC',  // Sea
                    contrastText: '#FAFAFF',
                },
                success: {
                    main: '#157811' // Wealth
                },
                warning: {
                    main: '#D53F55' // Red Rose
                },
                white: {
                    main: '#FAFAFF', // Winter
                    light: '#FFFFFF', // vennila white
                    contrastText: '#1B2D44',
                },
                black: {
                    dark: '#0A0A0A', // Jet
                    main: '#1B2D44', // Midnight
                    light: '#666666', // Platinum 40
                    lightest: '#D9D9D9', // Platinum
                },

            },
        },
    },
    breakpoints: {
        values: {
            xs: 0,
            sm: 481,
            md: 769,
            lg: 1025,
            xl: 1201
        }
    },

} satisfies Parameters<typeof materialExtendTheme>[0];

const materialTheme = materialExtendTheme(theme);

export default function ThemeProvider({ children }: { children: React.ReactNode }) {
    return (
        <MaterialCssVarsProvider theme={{ [MATERIAL_THEME_ID]: materialTheme }}>
            <JoyCssVarsProvider>
                <CssBaseline enableColorScheme />
                {children}
            </JoyCssVarsProvider>
        </MaterialCssVarsProvider>
    );
}

Lets import and wrap ThemeProvider around our main _app.jsx

_app.jsx

import ThemeProvider from './ThemeProvider';

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

Example usage

import { Button} from '@mui/material';

<Button
    type="submit"
    sx={{
        backgroundColor: 'primary.main',
        color: 'white.light',
        fontWeight: '500',
        fontSize: '14px',
        textTransform: 'none',
        borderRadius: '100px',
    }}
>
    Save
</Button>

My take

From my personal experience I feel mui/joy doesn't hold its position comparing to its elder brother mui/material Its not a fair comparison cause its still in beta version still I tried and at the end of the day I dont have the seamless integration feeling even after I got everything work together.

I dont recommend to use it in your production environment (have fun testing in your side project’s) there is long way to go. I highly suggest you to stick with mui/material no need to make thing's complicated than they are.

Embed Substack Signup Form in React

Akilesh — Tue, 19 Dec 2023 05:30:40 +0000

" This article is published using Lamento🍋

I have used substackapi to achieve this Custom Embed Substack Signup Form

Configuration:

substackUrl: Copy your Substack domain URL and replace akileshio.substack.com with yours ```

substackUrl: "akileshio.substack.com",

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b3pvrfr53fhrilrd5g6l.png)

* **theme**: To customize colors you can use pre-defined style `purple`, `orange` or `green` in theme or if you wanted to add your own colors scheme add `custom` in theme and add your colors to `primary, input, email & text`

theme: "custom",
colors: {
primary: "#FFFFFF",
input: "#334155",
email: "#FFFFFF",
text: "#000000",
}


**Here is your final code:**

import React, { useEffect } from 'react';

const SubstackWidget = () => {
useEffect(() => {
// Define the CustomSubstackWidget on the window object
window.CustomSubstackWidget = {
substackUrl: "akileshio.substack.com",
placeholder: "example@gmail.com",
buttonText: "Subscribe",
theme: "custom",
colors: {
primary: "#FFFFFF",
input: "#334155",
email: "#FFFFFF",
text: "#000000",
},
};

// Create a new script element
const script = document.createElement('script');

// Set the source of the script to the Substack widget script
script.src = "https://substackapi.com/widget.js";
script.async = true;

// Append the script to the body
document.body.appendChild(script);

// Cleanup function to remove the script when the component unmounts
return () => {
  document.body.removeChild(script);
}

}, []);

return (

);
};

export default SubstackWidget;


I you want to make your users redirect to custom URL after they signup, visit (substackapi)[https://substackapi.com/] to Unlock  Custom Redirect for $3.99/month.

What is BUN

Akilesh — Tue, 26 Sep 2023 04:21:26 +0000

'' This article is published using Lamento🍋

The All Rounder:

Bun is a all in one toolkit for JavaScript developer helps us to do the same task (running, building, testing, and debugging) but faster

What's the point of having hi-end gaming PC when the player isn't good at the game he is just bad but faster

What makes BUN special? it's fast

What makes BUN fast? BUN is written in ZIG and uses JavaScriptCore engine which powers WebKit browsers such as Safari while Node and Deno uses V8. . The team has spent a ton of time optimizing it

Bun has 4 main trump cards: 🎴

JavaScript runtime" 🏃

Node.js compatibility & BUN APIs

A node and Deno alternative but has built-in support for Node APIs which makes existing node.js project and npm package works fine with bun. Although most of the Node API works with BUN but its not completely compatible with Node do cheack this Node.js compatibility to know more about supported APIs. BUN has its own standard-library APIs are designed to be fast and easy-to-use.

How BUN handles ESM issue

Bun supports both CommonJS and ES modules there is no need to including "type": "module" in package.json and it can even use import and require(), in the same file

import lodash from "lodash"; const express = require('express')

Database:

Bun has built-in support for SQLite. Which has written in written in native code to be faster.

Framework:

BUN can be paired with Server frameworks (Express, Koa, and Hono), full-stack frameworks (Next.js, Remix, Nuxt, Astro, SvelteKit, Nest, SolidStart, and Vite)

Package manager"💼

BUN isn't the first one who has tried to speed up NPM, there are yarn and pnpn who have their own way of doing things

To attain it's peak performance bun has 2 main ingredient's

Global Module Cache: The system stores copies of software modules that has previously downloaded from the npm registry. Instead of repeatedly downloading the same packages it stores in global module cache and uses them when ever needed. pnpm to uses this method
Fastest System Calls: System calls are fundamental functions provided by the operating system that allow programs to interact with the hardware. It optimizes its interactions with the underlying operating system to ensure that it performs tasks as efficiently as possible.

Its possible to use BUN as a package manager even when its not used as a runtime

Bundler"📦

Bun is a JavaScript and TypeScript bundler and minifier that can be used to bundle code for the browser, Node.js, and other platforms. It's heavily inspired by esbuild and provides a compatible plugin API.

bun build ./index.tsx --outdir ./build

Bun's fast native bundler is now in beta

Bun introduces JavaScript Macros are used to make a sequence of computing instructions available to the programmer as a single program statement. Macros runs JavaScript functions at bundle-time. The value returned from these functions are directly inlined into the bundle.

Testing libraries"🧪

Bun has a built-in testing module bun:test that is fully Jest-compatible . Tests are executed with the Bun runtime

It supports:

TypeScript and JSX

Snapshot testing
Lifecycle hooks
UI & DOM testing
Watch mode with --watch
Script pre-loading with --preload

Tests are written in JavaScript or TypeScript with a Jest-like API. Refer to Writing tests for full documentation.

Installing bun:

Mac/Linux/WSL ( Windows Subsystem for Linux )

CURL:

curl -fsSL https://bun.sh/install | bash

NPM:

npm install -g bun

Windows : Sadly windows user's cant able to experience bun at the moment as it is in highly experimental phases. Join #windows channel on BUNs Discord for updates.

Using WSL ( Windows Subsystem for Linux ) we can install and run BUN in window's

Customizing Google Chrome Dino Game Characters 🦖

Akilesh — Wed, 14 Jun 2023 17:01:37 +0000

" This article is published using Lamento🍋

This is my custom png with nezuko charn which I am going to replace the default dino with.

🧭 Navigate

chrome://dino/

🛠️ Developer tool

Ctrl + Shift + C

Select offline-resources

🔗 Change asserts URL

change src of offline-resources-1x & offline-resources-2x to https://i.ibb.co/37DSwDX/nezuko.png

Lil Nezuko chan 🏃‍♀️

Absolute Imports: Leveraging '@' for Efficient Direct Imports

Akilesh — Mon, 12 Dec 2022 06:42:00 +0000

" This article is published using Lamento🍋

import Layout from "../components/layout";
import { fetcher } from '../lib/fetcher';

Add this configuration in your tsconfig.json

    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"],
      "@/lib/*": ["lib/*"],
      "@/hooks/*": ["lib/hooks/*"]
    },

import Button from '@components/Layout'
import { fetcher } from '@lib/fetcher';

make sure to restart the application in your localhost
Reference:
https://www.netlify.com/blog/2020/12/07/absolute-imports-in-next.js/

Connect Server Using Terminal & SSH

Akilesh — Sun, 04 Dec 2022 18:30:00 +0000

'' This article is published using Lamento🍋

Using terminal we are going to establish a remote connection to a Remote Server like (Droplet, E2C or any cloud vm).

If you are using Linux or Mac you are good to go but in windows you should download git-bash.

1) Now to generate your SSH key type his commends in your terminal.

It's better to generate SSH keys inside .ssh folder


ssh-keygen

2) Now name your key

you can name your key what ever suits for you

3) Don't need any passphrase

We have generated two files public key & private key

public key - Used by the Server
private key - Used by the Client

4) Open the public key files


cat ur-key-name.pub

We need to provide our public key to the remote server by opening it in terminal and copy the phrase.

5) To establish connection between client with server


ssh -i ./droplet-ssh-key root@157.245.104.56

Abbreviation: ssh -i keyfile target_machineusername@host

What's the meaning of -i in ssh?

By providing the private keyfile and our server username and ip address we are opening a connection between client and server

If you see the above message we have successfully connected our client with the server

Bonus

You can check your system specification with this commends


free -h


df -h


lscpu

To terminate the session enter exit in terminal.

Connect using BASH

Akilesh — Sat, 03 Dec 2022 11:08:48 +0000

" This article is published using Lamento🍋

Install Bash

If you have Linux or mac OS running on your device you are blessed with free bash integration but in windows you should install and configure it. luckily for windows we can use Git Bash as an alternative & Powershell to works fine.

Path

Open your Bash terminal on the folder where you needed the SSH key to be generated.

Generate key gen

1- Enter this command to start the ssh generation process.

ssh-keygen

2- It will ask you to assign the path where it need to be store the generated token.

3- A passphrase will be asked for generations but this could be omitted just leave it empty and press enter.

4- The ssh key is generated on the specific location successfully.

5- Enter this command to view the files.

cat your-ssh.pub

6- Paste the pub ssh key in this text area and assign a name to it.

7- To connect with the cloud computer from your terminal use this command.

ssh -i ./plausible-ssh root@13x.5x.x6.8x

Here root is your digital ocean Droplets user name & follow up the ip address of the droplet.

Enhance Next.js with Vercel Analytics: A Step-by-Step Guide

Akilesh — Tue, 25 Oct 2022 20:13:02 +0000

" This article is published using Lamento🍋

We have a new player entered the field of analytics.
Just by taking a quick glance at Vercel Analytics it looks somewhat similar to plausible analytics, but beauty should be admired no hard work should go unnoticed.
First let's set up an exiting Next.js v-12 application with this analytics.

1. Enable Vercel Analytics

Go to your vercel dashboard and choose your project which you need to enable analytic.

Open analytics tab then select Audiences tab if it's your 1st time it will ask you to enable from the dialog.

2. Install Dependencies

In your project, install this package to monitor the application from Vercel dashboard.
@vercel/analytics allows you to track page views in your Next.js app or any other website that is deployed to Vercel. All page views are automatically tracked in the app.



npm install @vercel/analytics



yarn add @vercel/analytics

Inject the Analytics script

Import the Analytics component which is a wrapper around the tracking script, offering us more seamless integration with Next.js.

pages/_app.ts



import { Analytics } from '@vercel/analytics/react';

function MyApp({ Component, pageProps }) {

  return (

    <>

      <Component {...pageProps} />

      <Analytics />

    </>

  );

}

export default MyApp;

Deploy

Push your code to your version control and By deploying the application to Vercel we can see all the analytics instinct.

To see the updated visible, open your domain and preview the dashboard. The changes will be visible.

Finally

Vercel have provided a minimal and primary use case where it
check our site traffic and get all the essential insights.

Notable Features

Visitors count
Page Views
Top Pages (Pages which are the most visited)
Top Referrers (Sites refer the most traffic)
Countries
Operating Systems
Browsers

Vercel says this feature will be free only at beta stage in the future it may offer in paid tires.

Analytics using Plausible

Akilesh — Mon, 27 Jun 2022 15:51:15 +0000

" This article is published using Lamento🍋

Plausible is a lightweight web analytics tool used to check your web traffic and also pinpoints from where the traffic comes from with clear visual charts and Email/Slack reports.

In this blog I used next.js for reference to show how plausible works, but plausible will work on any framework.

Login/Create

Create a plausible account to get started and click the add website button.

Add a website

Enter your domain name in the text area (provide the domain name which you have access to) and location will be automatically set accordingly to your device location.

Code snippet

A code snippet will be generated from our previous details, and it needs to be pasted in our project's head.

Let's add this script to our project in our way.

Create a meta.tsx file under the components directive and paste the below snippet.



import Head from 'next/head'

export default function Meta() {
    return (
        <Head>
            <script
                defer
                data-domain="akilesh.io"
                src="https://plausible.io/js/plausible.js">
            </script>
        </Head>
    )
}

Now you can import this meta component to your layout.tsx component if you have one. If not, you can add it to this component to other components which have access to all the pages.

The ides here is to make the <script> tag accessible by the whole application.

Domain dashboard

Go to your domain dashboard https://plausible.io/**your_domain_name** and stay relaxed. Plausible will handle all the complicated process and in a few seconds you will see your webpage's stats.

Screen shot:

This will be your dashboard until you get someone to visit your website.
This is a line chart represents about the total visitors and also will identify unique visitors from the total traffic then the duration of the visiting period.
This dashboard will give a detail representation
Top Sources (From where the traffic comes).
Pages (On what page the user entered, exit).
Location.
Devices, Browser, OS.

We have successfully integrated an open source analytics tool into our web application. Now we can get to know about your traffic source from where it comes to on which device the user has viewed from.

To setup plausible manually from your hosting service subscribe to my newsletter.

I'll promise to make it within next Monday plz bear with me.

Sentry Advanced Deployment Configuration

Akilesh — Mon, 20 Jun 2022 11:17:46 +0000

" This article is published using Lamento🍋

Vercel

Add sentry integration to your Vercel account

Click add integration it will prompt a popup in which we need to select the project which need sentry to integrate with.
Next a popup will be shown from the Sentry about the project integration. Make sure the right vercel project is matched with the Sentry project. This will link our sentry project to Vercel.

Slack

Now for the slack integration go to the slack integrations panel and click on Add workspace. This will pop up a slack authentication where you need to select your workspace.
Alert rule needs to be added to trigger the notification when ever the application crashes. Go to Alert choose the Errors need to be notified when it happens and click on Set conditions.
According to your needs, you can configure the settings and experiment with them.

Take my configuration as a reference for setting conditions. You can also ignore my config and create a new one.

Save the rule. When ever the application crashes and according to your alert condition the notification will be sent to your Slack channel.

You have successfully integrated an error monitor into your application with the Slack notification 🔔.

DEV Community: Akilesh

Kamal Deploy A failed attempt

Part 1 : Happy ending

Part 2 : Sad Ending

Install kamal

Setup docker in your local and VPS

Start Docker server locally

Add custom domain

configure your DNS

Revue Newsletter Subscribe from ur Web

Get api key

Coding part

Official doc

Custom Theme with MUI/Material and MUI/Joy

Below implementation custom color's with Mui/Joy & Material with Next.js /page route

My take

Embed Substack Signup Form in React

Configuration:

What is BUN

The All Rounder:

Bun has 4 main trump cards: 🎴

JavaScript runtime" 🏃

Package manager"💼

Bundler"📦

Testing libraries"🧪

Installing bun:

Customizing Google Chrome Dino Game Characters 🦖

🧭 Navigate

🛠️ Developer tool

🔗 Change asserts URL

Lil Nezuko chan 🏃‍♀️

Absolute Imports: Leveraging '@' for Efficient Direct Imports

Connect Server Using Terminal & SSH

Bonus

Connect using BASH

Install Bash

Path

Generate key gen

Enhance Next.js with Vercel Analytics: A Step-by-Step Guide

1. Enable Vercel Analytics

2. Install Dependencies

Inject the Analytics script

Deploy

Finally

Notable Features

Analytics using Plausible

Login/Create

Add a website

Code snippet

Domain dashboard

Screen shot:

Sentry Advanced Deployment Configuration

Vercel

Slack

Below implementation custom color's with Mui/Joy & Material with Next.js `/page` route