<p>Normally hmr works through web sockets but the problem is the web socket get its port randomly assigned at runtime. And we cant expose a random port.<br /></p><h2>How can we fix the port so its the same every time</h2><p>Solid start uses vite so we can just configure the app.config.ts file to have:</p><pre><code>import { defineConfig } from "@solidjs/start/config";

export default defineConfig({
  vite: {
    server: {
      hmr: {
        port: 5142,
      },
    },
  },
});</code></pre><p>The hmr server is using the port 5142.</p><p>But now we have 2 errors <code>WebSocket server error: Port is already in use</code> problem is that we have 3 different environments and when we set the hmr port its uses the same port for all 3 environments(client, server, server-function). Which only allows one of the environments web socket to be able to start.</p><h2>How do we make sure all the environments get unique ports so they can start</h2><p>We just need different ports for all the environments.</p><pre><code>import { defineConfig } from '@solidjs/start/config'

const wsPorts = {
  client: 5142,
  server: 5143,
  'server-function': 5144,
}

export default defineConfig({
  vite({ router }) {
    return {
      server: {
        hmr: {
          port: wsPorts[router],
        },
      },
    }
  },
});</code></pre><p></p><p>Thanks for reading. </p>

Solid start hmr with docker

<p>Ever since i started using a lot of docker compose files for local development my build cache size started going through the roof.</p><p>I was fixing it by clearing the who cache by hand but that's boring so here is an article on how to automate it 😉.</p><p></p><p>Disclaimer i am running debian 12 but you can do the same on a mac.</p><h2>Doing it manually first so we know what we are doing</h2><p>First of all lets see how much space we can reclaim</p><pre><code>docker builder du</code></pre><p>After this command you should see the total build cache used the total amount of space that reclaimable.</p><p></p><p>Here is the command to clear the docker build cache</p><pre><code>docker builder prune</code></pre><p>This command can take a while depending on the space that we are reclaiming.</p><h2>Automating the process</h2><p>So since we can clear the cache by hand lets just put the prune command into a file and run it with cron on a schedule.</p><h3>Making the file</h3><p>I like using ~/bin for user scripts but you might not have it in path. So either add ~/bin to path or use ~/.local/bin</p><pre><code>touch ~/bin/docker-gc.sh
or
touch ~/.local/bin/docker-gc.sh</code></pre><p>Add the contents for the file using your preferred editor (we need the --force here because prune command asks for confirmation and force flag disables that)</p><pre><code>#!/bin/bash
# Run Docker Garbage Collection
docker builder prune --force</code></pre><p>Make sure the files is executable</p><pre><code>chmod +x ~/bin/docker-gc.sh
or
chmod +x ~/.local/bin/docker-gc.sh</code></pre><h3>Setup the cron job</h3><pre><code>crontab -e</code></pre><p>And you add the desired interval for the script to run(mine runs at 3 every sunday).</p><p>You can use this website to generate the cron to your desired interval (<a target="_blank" href="https://it-tools.tech/crontab-generator">https://it-tools.tech/crontab-generator)</a></p><pre><code>0 3 * * 0 ~/bin/docker-gc.sh</code></pre><p></p><p>That's it now you have lots of space.</p><p>Thank you for reading.</p>

Automatically clearing docker desktop build cache

<p>In the ever-evolving world of technology, staying ahead of the curve is essential. Whether you're a seasoned developer or just starting your coding journey, understanding the right tools and technologies can make all the difference. In this article, we'll delve into three key technologies that are shaping the landscape of software development: TypeScript, ReactJS, and Kubernetes.</p><h2>TypeScript: A Strong Typing Revolution</h2><h3>What is TypeScript?</h3><p>TypeScript is a superset of JavaScript that brings a powerful feature to the table: static typing. It allows developers to specify the data types of variables, parameters, and return values, which can help catch errors at compile-time rather than runtime. This feature makes code more robust and maintainable.</p><h3>Why Choose TypeScript?</h3><ul><li><p><strong>Strong Typing:</strong> As mentioned earlier, TypeScript's strong typing ensures fewer runtime errors, making your codebase more reliable.</p></li><li><p><strong>Better Tooling:</strong> TypeScript provides excellent tooling, including code editors with intelligent autocompletion and instant error checking.</p></li><li><p><strong>Enhanced Readability:</strong> With type annotations, code becomes more self-documenting, making it easier for developers to understand and maintain.</p></li><li><p><strong>Compatibility:</strong> TypeScript is fully compatible with existing JavaScript code, making it easy to migrate.</p></li></ul><h2>ReactJS: The Frontend Powerhouse</h2><h3>What is ReactJS?</h3><p>ReactJS, often referred to simply as React, is an open-source JavaScript library for building user interfaces. Developed and maintained by Facebook, React has gained immense popularity in the web development community due to its component-based architecture and efficient rendering.</p><h3>Why Choose ReactJS?</h3><ul><li><p><strong>Component-Based:</strong> React's component-based approach encourages code reusability and modularity, simplifying complex UI development.</p></li><li><p><strong>Virtual DOM:</strong> React uses a virtual DOM to efficiently update only the parts of a webpage that change, leading to faster rendering and improved user experience.</p></li><li><p><strong>Large Community:</strong> React has a massive community and a wealth of third-party libraries, ensuring you'll find solutions to common problems.</p></li><li><p><strong>React Native:</strong> If you plan to develop mobile apps, React Native allows you to use your React skills to build cross-platform mobile applications.</p></li></ul><h2>Kubernetes: The DevOps Game Changer</h2><h3>What is Kubernetes?</h3><p>Kubernetes is an open-source container orchestration platform that automates the deployment, scaling, and management of containerized applications. It's designed to work seamlessly with Docker containers and has become the industry standard for container orchestration.</p><h3>Why Choose Kubernetes?</h3><ul><li><p><strong>Container Orchestration:</strong> Kubernetes simplifies container management, ensuring your applications run consistently across different environments.</p></li><li><p><strong>Scaling:</strong> Easily scale your applications up or down to handle varying workloads, ensuring optimal resource utilization.</p></li><li><p><strong>Self-Healing:</strong> Kubernetes can automatically replace failed containers or nodes, improving system reliability.</p></li><li><p><strong>Declarative Configuration:</strong> Define your application's desired state, and Kubernetes will make sure it stays that way, reducing operational overhead.</p></li></ul><h2>Conclusion</h2><p>In the fast-paced world of technology, staying up-to-date with the latest tools and technologies is essential. TypeScript, ReactJS, and Kubernetes are three key players that can elevate your development skills and help you build robust, scalable applications.</p><p>Whether you're working on the frontend with React, strengthening your backend with TypeScript, or orchestrating your containers with Kubernetes, mastering these technologies will open up a world of possibilities in the software development field. So, don't wait – start exploring and experimenting with TypeScript, ReactJS, and Kubernetes today to stay ahead in the game. Your coding journey just got a whole lot more exciting!</p>

📚 Blogs