DEV Community: Pradeep Kumar

LM Studio Setup on Ubuntu

Pradeep Kumar — Sun, 29 Mar 2026 07:21:57 +0000

Install LM Studio

curl -fsSL https://lmstudio.ai/install.sh | bash

export PATH="/root/.lmstudio/bin:$PATH"

Restart the terminal

Start LM Studio on public IP:

lms server start --bind 0.0.0.0

Download a Model

lms get qwen/qwen3.5-9b

Load a model to context length

lms load qwen/qwen3.5-9b --context-length 200200

Unload a model

lms unload

Monitor Resource Usages

sudo apt install btop
btop

sudo apt install nvtop
nvtop

Install Signoz in Ubuntu

Pradeep Kumar — Thu, 22 May 2025 17:56:31 +0000

Install Docker in ubuntu:

sudo apt update

sudo apt install apt-transport-https ca-certificates curl software-properties-common

curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg

echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

sudo apt update

sudo apt install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin -y

docker --version

Install Signoz:


sudo usermod -aG docker $USER

newgrp docker

docker -v

git clone -b main https://github.com/SigNoz/signoz.git && cd signoz/deploy/

./install.sh

docker ps

Then open: http://:8080

Coolify Enable Wild Card SSL

Pradeep Kumar — Mon, 19 May 2025 20:43:19 +0000

Add the following add A record to the domain:

DNS Record:
A coolify.example.com 8.8.8.8
A *.colify.example.com 8.8.8.8

Replace the domain and IP with actual values

Then

Login to Coolify
Click on Servers
Choose your server
Under configuration Wildcard Domain
Fill the domain https://coolify.example.com
Now add new project and click generate domain or enter your domain.
Deploy it will deploy with on that domain with SSL

How to install OpenTelemetry PHP Extension in VirtualMin

Pradeep Kumar — Sun, 18 May 2025 10:15:39 +0000

Run following commands

cd /usr/local/src
sudo git clone https://github.com/open-telemetry/opentelemetry-php-instrumentation.git
cd opentelemetry-php-instrumentation/ext

Build using PHP 8.2's tools

sudo phpize8.2
sudo ./configure --with-php-config=/usr/bin/php-config8.2
sudo make
sudo make install

Enable the extension in PHP 8.2

echo "extension=opentelemetry.so" | sudo tee /etc/php/8.2/mods-available/opentelemetry.ini
sudo phpenmod -v 8.2 opentelemetry
sudo systemctl restart php8.2-fpm

Confirm successful installation

php8.2 -m | grep opentelemetry

How To Install QEMU Guest Agent for Linux in Proxmox 8

Pradeep Kumar — Sat, 17 May 2025 07:30:47 +0000

Install QEMU Guest Agent

For Debian / Ubuntu

sudo apt install qemu-guest-agent

For RedHat

sudo yum install qemu-guest-agent

2.Start Agent

sudo systemctl start qemu-guest-agent

Enable autostart for agent

sudo systemctl enable qemu-guest-agent

Check if agent is running

sudo systemctl status qemu-guest-agent

After that login to proxmox > VM > Summer > IPs, you must be able to see the IP address.

Nuxt 3: Memory Leak Analysis and Fixes

Pradeep Kumar — Wed, 14 May 2025 06:54:20 +0000

Common Memory Leak Sources in Nuxt Applications

1. Event Listeners Not Being Removed

Problem: Event listeners that aren't properly cleaned up when components are unmounted.

Fix:

Ensure all event listeners added in onMounted() or mounted() are removed in onBeforeUnmount() or beforeUnmount()
Check for global event listeners in particular

Example:

// Bad
onMounted(() => {
  window.addEventListener('resize', handleResize)
})

// Good
onMounted(() => {
  window.addEventListener('resize', handleResize)
})
onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize)
})

2. Watchers Not Being Stopped

Problem: Watchers created outside of component options continue running even after component unmount.

Fix:

Store watcher stop functions and call them in onBeforeUnmount()

Example:

// Bad
const stopWatcher = watch(someValue, () => {
  // ...
})

// Good
const stopWatcher = watch(someValue, () => {
  // ...
})
onBeforeUnmount(() => {
  stopWatcher()
})

3. Pinia Store Issues

Problem: Pinia stores with persistence can accumulate state over time.

Fix:

Reset store state when appropriate
Be careful with deep nested objects in store state
Consider using shallow refs for large objects

Example:

// Add a reset method to your store
const useMyStore = defineStore('myStore', {
  state: () => ({
    items: [],
    // ...
  }),
  actions: {
    reset() {
      this.$reset() // Reset to initial state
    }
  }
})

// Call reset when appropriate (e.g., user logout)

4. Redis Connection Leaks

Problem: Redis connections not being properly closed.

Fix:

Ensure Redis connections are properly managed
Use connection pooling
Close connections when done

Example:

// Create a connection manager
const redisConnections = new Map()

// Get a connection
function getRedisConnection(key) {
  if (!redisConnections.has(key)) {
    redisConnections.set(key, new Redis(/* config */))
  }
  return redisConnections.get(key)
}

// Close all connections
function closeAllRedisConnections() {
  for (const [key, connection] of redisConnections.entries()) {
    connection.quit()
    redisConnections.delete(key)
  }
}

5. Circular References

Problem: Objects referencing each other creating circular references that GC can't clean up.

Fix:

Avoid circular references
Use WeakMap/WeakSet for parent-child relationships
Manually break references when no longer needed

Example:

// Bad
const parent = {}
const child = { parent }
parent.child = child

// Good
const parent = {}
const child = {}
const parentChildMap = new WeakMap()
parentChildMap.set(child, parent)

6. Closures Capturing Large Objects

Problem: Function closures capturing references to large objects.

Fix:

Be mindful of what variables your closures capture
Nullify references when done

Example:

// Bad
function processData(largeData) {
  const callback = () => {
    // This closure captures largeData
    console.log(largeData.length)
  }
  return callback
}

// Good
function processData(largeData) {
  const size = largeData.length // Only capture what you need
  const callback = () => {
    console.log(size)
  }
  return callback
}

Specific Fixes for Your Application

Implement Garbage Collection Trigger

Add a button to manually trigger garbage collection during development:

async function forceGarbageCollection() {
  try {
    await fetch('/api/debug/gc', { method: 'POST' })
    console.log('Garbage collection triggered')
    // Refresh memory data after GC
    setTimeout(fetchMemoryData, 500)
  } catch (error) {
    console.error('Failed to trigger garbage collection:', error)
  }
}

Implement Memory Leak Detection in Development

Add a development plugin that detects potential memory leaks:

// plugins/memory-leak-detector.js
export default defineNuxtPlugin({
  name: 'memory-leak-detector',
  enforce: 'pre',
  setup() {
    if (process.dev) {
      let componentCount = new Map()

      // Track component creation and destruction
      vueApp.mixin({
        created() {
          const name = this.$options.name || 'Anonymous'
          componentCount.set(name, (componentCount.get(name) || 0) + 1)
        },
        beforeUnmount() {
          const name = this.$options.name || 'Anonymous'
          componentCount.set(name, (componentCount.get(name) || 0) - 1)
        }
      })

      // Periodically check for leaks
      setInterval(() => {
        for (const [name, count] of componentCount.entries()) {
          if (count > 0) {
            console.warn(`Potential memory leak: ${count} instances of ${name} not destroyed`)
          }
        }
      }, 10000)
    }
  }
})

Review and Optimize Pinia Store Usage

If you're using Pinia with persistence, review your implementation:

Check for deep nested objects that might be causing issues
Consider using more granular stores
Implement proper reset methods

Check for Redis Connection Management

If you're using Redis (ioredis):

Ensure connections are properly closed
Use a connection pool
Monitor active connections

Remember that fixing memory leaks is often an iterative process. Monitor, fix, and repeat until the memory usage stabilizes.

Nuxt 3 - SVG Sprite Generation and Usage

Pradeep Kumar — Tue, 29 Apr 2025 08:14:13 +0000

Create `generate-sprite.ts`

Install packages like svg-sprite fs and path

Create generate-sprite.ts file the root

import Sprite from 'svg-sprite';
import { readdirSync, readFileSync } from 'fs';
import { join, basename, extname, relative, resolve } from 'path'
import { writeFileSync } from 'fs';

const ICONS_DIR = resolve('assets/icons') // absolute path
// npx tsx generate-sprite.ts
const sprite = new Sprite({
    mode: {
        symbol: {
            sprite: 'sprite.svg',
            example: false
        },
    },
    shape: {
        transform: [
            {
                svgo: {
                    plugins: [
                        {
                            name: 'removeDimensions',
                            active: false // ❗ Don't remove width/height
                        },
                        {
                            name: 'removeViewBox',
                            active: false // ❗ Don't remove viewBox
                        }
                    ]
                }
            }
        ],
        id: {
            generator: (filepath: string) => {
                console.log('filepath',filepath)
                const relPath = relative(ICONS_DIR, resolve(filepath)).replace(/\\/g, '/')

                const parts = relPath.split('/');

                const folder = parts.length > 1 ? parts.slice(0, -1).join('-') : '';
                const file = basename(filepath, extname(filepath));
                return folder ? `${folder}:${file}` : file;
            },
        },
    },
});

function walk(dir: string): string[] {
    const entries = readdirSync(dir, { withFileTypes: true });
    return entries.flatMap((entry) => {
        const fullPath = join(dir, entry.name);
        if (entry.isDirectory()) {
            return walk(fullPath);
        } else if (entry.isFile() && entry.name.endsWith('.svg')) {
            return [fullPath];
        }
        return [];
    });
}

async function buildSprite() {
    const files = walk('assets/icons');
    for (const file of files) {
        console.log('file',file)
        const content = readFileSync(file, 'utf-8');
        sprite.add(file, file, content);
        console.log('file2')
    }

    sprite.compile(async (err, result) => {
        if (err) {
            console.error('Compile error:', err);
            return;
        }

        const compiled = result.symbol.sprite.contents;
        writeFileSync('public/icons/sprite.svg', compiled);
        console.log('✅ Generated: public/icons/sprite.svg');
    });
}

buildSprite();

Update ICONS_DIR path.

Generate Sprite

Run npx tsx generate-sprite.ts

How to use?

<svg class="icon" >
      <use xlink:href="'/icons/sprite.svg#user" crossorigin="anonymous"></use>
    </svg>

VirtualMin - How to renew SSL?

Pradeep Kumar — Sat, 19 Apr 2025 05:35:40 +0000

If you have configured CloudFlare proxy in DNS records or any other firewall, turn it off.

Login to VirtualMin
Choose the domain from the dropdown
Click on Manage Virtual Server
Click on Setup SSL Certificate
Click on SSL Providers
Click on Request Certificate

VirtualMin - Configuring Multiple PHP Versions

Pradeep Kumar — Wed, 02 Apr 2025 10:08:55 +0000

Ref: https://www.virtualmin.com/docs/server-components/configuring-multiple-php-versions/#on-rhel-alma-rocky-oracle-centos-stream-and-fedora-linux

For ubuntu:

sudo LC_ALL=C.UTF-8 add-apt-repository -y ppa:ondrej/php && apt-get update

sudo apt-get install php8.2-{cgi,cli,fpm,pdo,gd,mbstring,imap,curl,xsl,mysqlnd,opcache,curl,xml,zip}

After installation, Login to VirtualMin > Select domain from dropdown > Under Web Configuration > Click on PHP Options > Choose PHP version from PHP Version dropdown.

Nuxt 3 Performance Improvements

Pradeep Kumar — Mon, 27 Jan 2025 17:58:43 +0000

Dynamic Importing:
https://github.com/nuxt/nuxt/discussions/9061#discussioncomment-539483

1) Keep your Pinia Stores lean

Move all your business logic to services or utils or datalayer

Ex:

export const useCartStore = defineStore("cartStore", {
  state: () => ({
    cartItems:[],
  }),
  actions: {
    async addToCart(context, item){
    const { addToCart } = await import('~/services/cartService');
    return await addToCart(context, item);
    }
  },
});

2) Disable component auto import

In your nuxt.config.ts, add:

components: {
    global: true,
    dirs: ['~/components/global'],
  },

Keep your global components in components/global folder

Import component dynamically:

const Example = defineAsyncComponent(() => import('@/components/Example.vue'));

3) Add compression and caching on assets

In your nuxt.config.ts, add:

nitro: {
    compressPublicAssets: true,
    minify: true,
    serveStatic: {
      headers: {
        'Cache-Control': 'public, max-age=31536000, immutable',
      },
    }
  },

4) Add `async` and `defer` to scripts

5) Keep an eye on build sizes

You should run npm run build and keep any on build sizes

6) Use transform to optimize payload

Ref: https://www.youtube.com/watch?v=laRJNkG_wls

7) Use `ClientOnly`

Wrap component under <ClientOnly> tag which are not important for SEO, example:

<ClientOnly>
<NewsLetter />
</ClientOnly>

8) Use Pinia State management effectly

Ref: https://masteringpinia.com/blog/5-best-practices-for-scalable-vuejs-state-management-with-pinia

9) Dynamic loading of services

Note: You should avoid calling your store or nuxt composable in services, instead you must pass an instance of store from page or component.

Store in Page/Component

<script setup>
import { onMounted } from 'vue';

const myStore = useMyStore();

onMounted(async () => {
  const { getItem } = await import('~/services/myService');
  myStore.item = await getItem(myStore)
});
</script>

Store in middleware

export default defineNuxtRouteMiddleware(async (to, from) => {
  // Conditionally determine if the auth store needs to be loaded
  if (to.path.startsWith('/protected')) {
    // Dynamically import the Pinia store
    const { useAuthStore } = await import('~/stores/auth');

    const authStore = useAuthStore();

    // Perform the authentication check using the dynamically loaded store
    if (!authStore.isAuthenticated) {
      return navigateTo('/login');
    }
  }
  // Other paths might not need the auth store and can proceed without loading it
});

10) Use export functions to avoid large bundle size

Smaller bundle size

// utils.ts
export const foo = () => {/* ... */};
export const bar = () => {/* ... */};

// Usage
import { foo, bar } from './utils';

Tree Shaking: When using module bundlers like Webpack or Rollup, it's easier to tree-shake unused functions, potentially resulting in a smaller bundle size.

Large Bundle Size

// MyClass.ts
export class MyClass {
  foo() {/* ... */}
  bar() {/* ... */}
}

// Usage
import { MyClass } from './MyClass';
const myInstance = new MyClass();
myInstance.foo();

11) SSR Calls

const { data } = await useAsyncData(
    'results',
    async () => {
      const {searchResult} = await import("@/services/algoliaService")
      return searchResult()
    }
)

12) Use `cachedEventHandler` for API routes

ref: https://hub.nuxt.com/docs/features/cache#api-routes-caching
ref: https://www.youtube.com/watch?v=QamuVgRiLVg

13) How to getCachedData

const { data, error, pending } = await useAsyncData(
    'getPopularKeywords',
    async () => {
      const {getPopularKeywords} = await import("@/services-optimized/builderService")
      return await getPopularKeywords(
          runtimeConfig.public.builderApiKey
      );
    },
    {
      immediate: true,
      getCachedData(key) {
        if(!debug)
        {
          const cachedData = nuxtApp.payload.data[key] || nuxtApp.static.data[key];
          if(!cachedData){
            return;
          }
          //if data is too old
          const expirationTime = new Date(cachedData.fetchedAt);
          expirationTime.setTime(expirationTime.getTime() + 1000 * 60 * 60);
          const isExpired = expirationTime.getTime() < new Date().getTime();
          if(isExpired){
            return;
          }
        }
      },
    }
)

13) Use SVG sprite for icon and cache it to reduce the number of requests

Ref: https://dev.to/themodernpk/nuxt-3-svg-sprite-generation-and-usage-5fhn

How to FIX: Error: MySQL shutdown unexpectedly

Pradeep Kumar — Fri, 18 Oct 2024 09:00:55 +0000

Important: do not delete the ibdata1 file. You could destroy all your databases.

Steps:

Rename folder mysql/data -> mysql/data_old
Make a copy of mysql/backup folder and name it as mysql/data
Copy all your database folders only from mysql/data_old into mysql/data (except mysql, performance_schema, and phpmyadmin folders)
Copy mysql/data_old/ibdata1 file into mysql/data folder
Start MySQL from XAMPP control panel

It should resolve the issue.

Extend Disk Size - The Default Ubuntu LVM Partition

Pradeep Kumar — Tue, 02 Jan 2024 09:42:26 +0000

Reference: https://www.youtube.com/watch?v=58m0hnt0ij8

cfdisk

You must see free space.

Select /dev/sda3, then from the bottom choose the option to resize, then it will show space, just press enter
Then, from bottom choose option write and type yes to confirm
Then, from bottom choose option quite
Run pvresize /dev/sda3
Check the free space:

sudo vgdisplay

Pay attention to Free PE / Size that is the available free space.

Check partitions

df -h

The default partition will be something like /dev/mapper/ubuntu--vg-ubuntu--lv, note the current Available Space.

Extend

sudo lvextend -l +100%FREE /dev/ubuntu-vg/ubuntu-lv

sudo resize2fs /dev/mapper/ubuntu--vg-ubuntu--lv

Check extended size:

df -h

DEV Community: Pradeep Kumar

LM Studio Setup on Ubuntu

Install LM Studio

Start LM Studio on public IP:

Download a Model

Load a model to context length

Unload a model

Monitor Resource Usages

Install Signoz in Ubuntu

Install Docker in ubuntu:

Install Signoz:

Coolify Enable Wild Card SSL

How to install OpenTelemetry PHP Extension in VirtualMin

Run following commands

Build using PHP 8.2's tools

Enable the extension in PHP 8.2

Confirm successful installation

How To Install QEMU Guest Agent for Linux in Proxmox 8

Nuxt 3: Memory Leak Analysis and Fixes

Common Memory Leak Sources in Nuxt Applications

1. Event Listeners Not Being Removed

2. Watchers Not Being Stopped

3. Pinia Store Issues

4. Redis Connection Leaks

5. Circular References

6. Closures Capturing Large Objects

Specific Fixes for Your Application

Implement Garbage Collection Trigger

Implement Memory Leak Detection in Development

Review and Optimize Pinia Store Usage

Check for Redis Connection Management

Nuxt 3 - SVG Sprite Generation and Usage

Create generate-sprite.ts

Generate Sprite

How to use?

VirtualMin - How to renew SSL?

VirtualMin - Configuring Multiple PHP Versions

Nuxt 3 Performance Improvements

1) Keep your Pinia Stores lean

2) Disable component auto import

3) Add compression and caching on assets

4) Add async and defer to scripts

5) Keep an eye on build sizes

6) Use transform to optimize payload

7) Use ClientOnly

8) Use Pinia State management effectly

9) Dynamic loading of services

Store in Page/Component

Store in middleware

10) Use export functions to avoid large bundle size

Smaller bundle size

Large Bundle Size

11) SSR Calls

12) Use cachedEventHandler for API routes

13) How to getCachedData

13) Use SVG sprite for icon and cache it to reduce the number of requests

How to FIX: Error: MySQL shutdown unexpectedly

Extend Disk Size - The Default Ubuntu LVM Partition

Create `generate-sprite.ts`

4) Add `async` and `defer` to scripts

7) Use `ClientOnly`

12) Use `cachedEventHandler` for API routes