DEV Community: Luke Parke

Deploy SvelteKit node servers with docker

Luke Parke — Fri, 29 Aug 2025 16:54:30 +0000

When you are NOT deploying to a nice and simple platform like Vercel, you may be doing things a little more manually.

For SvelteKit that is often really easy, tooling like nixpacks allows for a pretty much seamless deployment of most any application anywhere.

I was working on a simple little test app to explore the functionality of how Coolify and SvelteKit both handles subdomains and I was getting a node version mismatch error due to a dep requiring one of a few specific node versions.

Due to this I had to go the route of deploying with Docker instead, so here is a bare minimum Dockerfile for SvelteKit should anyone need one in the future.

# ---- Build stage ----
FROM node:24-alpine AS build

WORKDIR /app

# Install dependencies (cache-friendly)
COPY package.json package-lock.json ./
RUN npm ci

# Copy source and build
COPY . .
RUN npm run build

# ---- Run stage ----
FROM node:24-alpine AS run

WORKDIR /app

# Copy the built app
COPY --from=build /app/package.json ./
COPY --from=build /app/build ./build

EXPOSE 3000

CMD ["node", "build"]

Cheers

Coolify is the best thing for Homelabs since Fiber

Luke Parke — Fri, 29 Aug 2025 16:23:04 +0000

I've been using Coolify in my Homelab for a couple years now, and I have never enjoyed self hosting this much before.

Gone are the days of manually managing all of your subdomains and certificates in Cloudflare and Nginx Proxy Manager, just setup a wildcard, and Coolify will handle the rest.

But it doesn’t just handle SSL and domain management — it’s a full open-source PaaS (Platform as a Service) that makes deploying apps, databases, and services effortless.

Why Coolify?

With Coolify you can:

Deploy any app or service — from static sites and APIs to full-stack apps built with Next.js, Remix, Nuxt, or SvelteKit. You can even spin up databases, WordPress, Ghost, Plausible Analytics, and more in just a couple clicks.
Run it anywhere — your own VPS, Raspberry Pi, Hetzner, AWS, or even a laptop. If it supports Docker, Coolify can manage it.
Push to deploy — connect a GitHub, GitLab, or Bitbucket repo and every push can auto-deploy. Pair it with pull request previews and you’ve got a smooth workflow for testing before merging.
Stay secure automatically — free Let’s Encrypt SSL for all your custom domains, with automatic renewals.
Keep your data safe — one-click database backups to any S3-compatible storage.
Collaborate with ease — invite teammates, assign roles, and share access safely.

And Coolify is fully self-hosted. That means no vendor lock-in, full control of your data, and the ability to move servers or providers whenever you like.

Performance and Experience

Performance has been excellent in my Homelab — deployments finish fast, the real-time terminal is responsive, and monitoring tools keep me aware of server health and disk usage at a glance.

I have deployed a number of personal sites, projects, and other services through it for domains I own.

Some examples:

If you’re looking for a way to simplify your self-hosting setup without giving up control, I can’t recommend Coolify enough.

It’s been rock solid for me, and I’m genuinely excited to see where the project goes as it continues to evolve (Direct Multi-Server support is confirmed on the roadmap 👀).

👉 Check it out here: https://coolify.io

The next generation of GitHub profile stats

Luke Parke — Fri, 14 Jun 2024 21:21:59 +0000

There are several great tools and guides out there for collecting statistics on your GitHub profile

But none of those tools offer the freedom, customization, detail, privacy, or level of flair I would prefer.

So a while back I set about to implement an entirely new system of stats collection and showcasing.

Today I am happy to share how I am currently generating graphics like this one:

This graphic is generated in two parts:

First there is a GitHub action that pulls the stats on a cron schedule using the GitHub SDK and a personal access token and saves the stats to a JSON file in the repo
Second there is a remotion GitHub action that consumes that JSON file and generates various GIFs that I have designed ahead of time to showcase the stats however I want.

I have configured my repo as a template repository so anyone can easily use the template to collect stats for their own GitHub profiles.

I'm excited to see what things the community builds from here!

Building a world-class suite of SDKs is easy with Speakeasy

Luke Parke — Wed, 10 Jan 2024 04:34:05 +0000

I have been personally maintaining a Plex Open API Specification for the last 10 months to improve the API documentation (plexapi.dev) and tools (SDKs) available to the Plex developer community.

In my free time, I started to build an SDK manually for Plex, but that was far too much work for the free time I had available.

I trialed generating SDKs using the OpenAPI Generator package, which was largely unsatisfactory.

I then started my foray into the world of private SDK generation offerings, and I found Liblab. Liblab was working with a fantastic premise, but its execution was lacking in several ways, from generating broken tests, to not fully supporting the OpenAPI Specification.

Finally, I found Speakeasy.

Speakeasy has a gorgeous website, a phenomenal user experience, and a swath of supported languages and features from Typescript to Terraform.

I was able to generate a fully functional SDK in less than an hour of work, and the support from the team was fantastic. I even found issues in my API spec not previously noticed, and the team was very helpful in identifying and resolving an issue with a duplicate key in Plex's API response for an endpoint.

Since then, I have generated SDKs in Typescript, C#, Python, Go, Java, PHP, Ruby, Swift, and even a Terraform provider and a NextJS Docs site.

Let's look at an example of using the generated Typescript SDK.

import { PlexAPI } from "@lukehagar/plexjs";

async function run() {
    const sdk = new PlexAPI({
        accessToken: "<YOUR_API_KEY_HERE>",
    });

    const res = await sdk.server.getServerCapabilities();

    if (res?.statusCode !== 200) {
        throw new Error("Unexpected status code: " + res?.statusCode || "-");
    }

    // handle response
}

run();

This is such a clean and simple way to interact with the Plex API, lets see how other languages look.

Here is GO:

package main

import(
    "github.com/LukeHagar/plexgo/models/components"
    "github.com/LukeHagar/plexgo"
    "github.com/LukeHagar/plexgo/models/operations"
    "context"
    "log"
    "net/http"
)

func main() {
    s := plexgo.New(
        plexgo.WithSecurity("<YOUR_API_KEY_HERE>"),
    )


    var count *float64 = 1262.49

    var onlyTransient *operations.OnlyTransient = operations.OnlyTransientOne

    ctx := context.Background()
    res, err := s.Hubs.GetGlobalHubs(ctx, count, onlyTransient)
    if err != nil {
        log.Fatal(err)
    }

    if res.StatusCode == http.StatusOK {
        // handle response
    }
}

And here is Python:

from os import getenv
from pprint import pprint
from plexsdk import PlexSDK
sdk = PlexSDK()
sdk.set_api_key(getenv("PLEXSDK_API_KEY"))
results = sdk.server.get_server_capabilities()

pprint(vars(results))

Oh, look more super clean implementations of the Plex API.

I would wholly encourage anyone looking to generate an SDK for their API to give Speakeasy a try. Their quality of service and support is second to none, and their product is fantastic.

I am floored by the quality of SDKs that Speakeasy generates, and I am excited to see what the future holds for the Speakeasy team.

References:

Plex OpenAPI Specification here

My current Docs site here

Generated SDKs for typescript and go

Writing better Cobra CLI help messages with glamour

Luke Parke — Sun, 05 Nov 2023 05:14:03 +0000

Writing Cobra CLI help messages can be quite a pain, especially when styling and formatting it exactly how you want.

Wouldn't it be better to use Markdown?

Thanks to Charm, and their package Glamour, we can.

Existing Help structure

Below is an example of a typical Cobra command structure

cmd := &cobra.Command{
    Use:     "create",
    Short:   "Create an IdentityNow Transform from a file",
    Long:    "\nCreate an IdentityNow Transform from a file\n\n",
    Example: "sail transform c -f /path/to/transform.json\nsail transform c < /path/to/transform.json\necho /path/to/transform.json | sail transform c",
    Aliases: []string{"c"},
    Args:    cobra.NoArgs,
    RunE: ***TRUNCATED***

This was the way I structured my commands on the CLI I was working on for quite some time.

But then I discovered Glamour, a Stylesheet-based markdown renderer for GO CLI apps.

I looked at some of the examples in the repo, I came across this example photo

And I pretty much fell in love with how it looked. I decided I wanted my help messages to look like that.

Building a better mousetrap

With the usage of glamour being so simple I decided I wanted to integrate it into the existing cobra framework as simply as possible. This led to me building 4 functions to scaffold this out in my CLI.

First I started with the renderer variable I wanted to use, and an init() function to instantiate it.

var renderer *glamour.TermRenderer

func init() {
    var err error
    renderer, err = glamour.NewTermRenderer(
        // Detect the background color and pick either the default dark or light theme
        glamour.WithAutoStyle(),
    )
    if err != nil {
        panic(err)
    }

}

This configures a glamour Renderer with almost completely default settings but with the wonderful addition of automatic styling based on the terminal background.

With the renderer defined, I can build the Markdown render function. I elected to have it panic on render error.

func RenderMarkdown(markdown string) string {
    out, err := renderer.Render(markdown)
    if err != nil {
        panic(err)
    }

    return out
}

Next, I want to define the different parts of the cobra help I want to format in markdown and put those in a struct. Then I want to figure out how I want to split up a single markdown file into those different help sections parts.

First the help struct

type Help struct {
    Long    string
    Example string
}

Then the help parsing function. I decided on a regex query with a capture group to aid in a more readable markdown file.


func ParseHelp(help string) Help {
    helpParser, err := regexp.Compile(`==([A-Za-z]+)==([\s\S]*?)====`)
    if err != nil {
        panic(err)
    }

    matches := helpParser.FindAllStringSubmatch(help, -1)

    var helpObj Help
    for _, set := range matches {
        switch strings.ToLower(set[1]) {
        case "long":
            helpObj.Long = RenderMarkdown(set[2])
        case "example":
            helpObj.Example = RenderMarkdown(set[2])
        }
    }

    return helpObj
}

Now finally, putting all these together, and adding markdown formatting to a Cobra command is dead simple.

Below is an example of a commands help markdown file. I escaped the final backtick on the nested examples for the purpose of demonstration.

---md
==Long==

Parse

Parse Log Files from SailPoint Virtual Appliances

==Example==

Parsing CCG Logs:

All the errors will be parsed out of the log file and sorted by date and connector name.

Supplying the --all flag will parse all the log traffic out, not just errors.

sail va parse --type ccg ./path/to/ccg.log ./path/to/ccg.log 
sail va parse --type ccg ./path/to/ccg.log ./path/to/ccg.log --all

Parsing CANAL Logs:

sail va parse --type canal ./path/to/canal.log ./path/to/canal.log

====

Parsing this file for the command is as easy as pie.

// Embed the markdown file for easy inclusion of a variable. 
//go:embed parse.md
var parseHelp string

func newParseCommand() *cobra.Command {
        // Parse the embedded file into its separate help components
    help := util.ParseHelp(parseHelp)
    var fileType string
    var all bool
    cmd := &cobra.Command{
        Use:     "parse",
        Short:   "Parse Log Files from SailPoint Virtual Appliances",
                // Simply pass the parts of the help struct on to the corresponding Cobra value.
        Long:    help.Long,
        Example: help.Example,

This final implementation leaves us with some very styling help messages, with all the hard work thankfully handled by Glamour and Cobra

Scraping Archives of Nethys for fun and profit

Luke Parke — Sat, 17 Jun 2023 02:43:47 +0000

I have been getting into pathfinder lately, and one frustration I have is the character creators are all closed source, or just messy, clumsy.

I'm a developer and I wanted to take a crack at creating a better solution, but I cannot hold a candle to the data sets everyone seems to already have at the ready.

So my solution, is to pull this data from the best resource available, currently that seems to be the Archives of Nethys

Digging In

Lets start on the Ancestries page, and step one of figuring out how to get that sweet sweet data, is to hit F12.

And shimmy on over to the network tab:

I would suggest making sure you filter to only the Fetch/XHR requests, there is typically an easy option for this.

With this menu opened I just started looking around.

Oh, wait, WHATS THIS????

When I hover over this Elf ancestry, The card that pops up appears to make a post call.

Lets look at that POST body

Alright, so when this opened, it made a multiget post call to an elasticsearch instance for the site.

We can certainly work with that.

Now to the fun Part

Now to the code

Alright, so thankfully AON (Archives of Nethys) is using Elastic Search! While that may seem overkill for this kind of usecase, it makes our goal much easier to accomplish.

Setup

In efforts to make this easier to use for other folks, I am centralizing the config into one file, and will use these values other places.

export const config = {
  // These values should be static, and tell the scraper 
  // how to access the AON elastic instance.
  root: "https://elasticsearch.aonprd.com/",
  index: "aon",

  // Comment out any targets you do not want to scrape. 
  // This is just a cursory list I pulled from exploring the site
  targets: [
    "action",
    "ancestry",
    "archetype",
    "armor",
    "article",
    "background",
    "class",
    "creature",
    "creature-family",
    "deity",
    "equipment",
    "feat",
    "hazard",
    "rules",
    "skill",
    "shield",
    "spell",
    "source",
    "trait",
    "weapon",
    "weapon-group",
  ],
};

Now that we have the Elastic instance info populated, lets setup the SDK

import { Client } from "@elastic/elasticsearch";
import fs from "fs";
import path from "path";
import { config } from "./config";
import sanitize from "sanitize-filename";

const client = new Client({
  node: config.root,
});

We now have a client object created that can be used to easily perform search operations against elastic services.

the next portion of the code is going to utilize await, so I will wrap it in an async function.

Additionally, I want to loop through the targets I supply in my config object.

Lastly, while looping through the targets, I want to add an elastic search query

export async function retrieveTargets() {
  for (const target of config.targets.sort()) {
      const search = await client.search({
        index: config.index,
        from: 0,
        size: 10000,
        query: { match: { category: target } },
      });
  }
}

The nice thing about elastic, is the default max size permitted is 10,000 which for our use case means we can get all of the results at once.

Now that we have our full result set for each target, we want to save that data locally for processing.

Below is the full function, with a log statement added for progress and counts, a tracking object implemented to check for errors, and some simple fs operations to save the full array as a local file.

export async function retrieveTargets() {
  for (const target of config.targets.sort()) {
    try {
      const search = await client.search({
        index: config.index,
        from: 0,
        size: 10000,
        query: { match: { category: target } },
      });

      console.log({
        action: "saving",
        target,
        count: search?.hits?.total?.value,
      });

      fs.mkdirSync(path.join(__dirname, "raw"), {
        recursive: true,
      });
      fs.writeFileSync(
        path.join(__dirname, "raw", `${target}.json`),
        JSON.stringify(search?.hits?.hits)
      );
      tracking[target] = true;
    } catch (err) {
      console.error(err);
      tracking[target] = false;
    }
  }
}

Now the full array is saved locally, albeit in a pretty specific format, and that's not great for my desired use case.

So lets do some processing. The next async function is very simple, it reads in the local files using the same logic they were saved with, changes the shape of the objects in the array, and then saves the new array in a parsed folder.

export async function parseTargets() {
  for (const target of config.targets.sort()) {
    console.log({ action: "parsing", target });

    if (tracking[target] === true) {
      const raw = JSON.parse(
        fs.readFileSync(path.join(__dirname, "raw", `${target}.json`))
      );
      const parsed = raw.map((entry) => entry._source);
      try {
        fs.mkdirSync(path.join(__dirname, "parsed"), {
          recursive: true,
        });

        fs.writeFileSync(
          path.join(__dirname, "parsed", `${target}.json`),
          JSON.stringify(parsed, null, " ")
        );
      } catch (err) {
        console.error(err);
      }
    }
  }
}

Now this data is all in a good state for me to programmatically upload it to a database. But I want to take things one step further just incase it helps someone else that may come along.

I'm going to split the now parsed data up further into individual JSON files instead of one large array.

Below is that last async function, is reads in the parsed files the same way we did during parsing, and then just iterates through the array and saves each entry under its given name value.

It is worth noting that this is why I included that sanitize filename package, as some of the names in the entries from AON are rather abnormal, and this sanitization allows us to just save the files as is and worry about all that Jazz later.

export async function sortTargets() {
  for (const target of config.targets.sort()) {
    console.log({ action: "sorting", target });

    if (tracking[target] === true) {
      const parsed = JSON.parse(
        fs.readFileSync(path.join(__dirname, "parsed", `${target}.json`))
      );
      for (const entry of parsed) {
        try {
          fs.mkdirSync(path.join(__dirname, "sorted", `${target}`), {
            recursive: true,
          });

          fs.writeFileSync(
            path.join(
              __dirname,
              "sorted",
              `${target}`,
              `${sanitize(entry?.name)}.json`
            ),
            JSON.stringify(entry, null, " ")
          );
        } catch (err) {
          console.error(err);
        }
      }
    }
  }
}

And there we are!

We now have a plethora of raw data for use later on.

I'll make another post in the future documenting the process I will use to upload this data to pocketbase

For those interested here is the repo containing all of the code, and the raw, parsed, and sorted JSON data.

Using Vercel Analytics with SvelteKit

Luke Parke — Tue, 30 May 2023 15:07:23 +0000

Vercel's guide on utilizing Analytics on SvelteKit have improved, but regardless I wanted to provide an example of a successful implementation on my profile site.

First install @vercel/analytics

npm install -D @vercel/analytics

Next import the analytics package in your root +layout.svelte file.

    // Import the Analytics package, and the SvelteKit dev variable.
    import { dev } from '$app/environment';
    import { inject } from '@vercel/analytics';

Finally run the inject function with the mode being determined by the Dev variable setting

    // Inject the Analytics functionality
    inject({ mode: dev ? 'development' : 'production' });

Here is my final +layout.svelte file for reference

<script lang="ts">
    import Header from '$lib/Header.svelte';
    import '$lib/theme-luke.css';
    import { AppShell } from '@skeletonlabs/skeleton';
    import '@skeletonlabs/skeleton/styles/all.css';
    import '../app.postcss';

    // Import the Analytics package, and the SvelteKit dev variable.
    import { dev } from '$app/environment';
    import { inject } from '@vercel/analytics';

    // Inject the Analytics functionality
    inject({ mode: dev ? 'development' : 'production' });
</script>

<!-- App Shell -->
<AppShell slotSidebarLeft="bg-surface-500/5 w-56 p-4">
    <svelte:fragment slot="header">
        <!-- App Bar -->
        <Header />
    </svelte:fragment>
    <!-- Page Route Content -->
    <slot />
</AppShell>

After everything is implemented as above, you just need to ensure that Vercel analytics is enabled correctly on the Vercel project and your data will begin populating the next time somebody accesses the webpage.

Be good people, and happy development!

Building a Chrome Extension with SvelteKit

Luke Parke — Mon, 22 May 2023 19:48:57 +0000

Today I'm going to give you a brief run through on how to develop a chrome extension in sveltekit.

A big shout out to michmich112 for creating a wonderful sveltekit adapter that makes this easy

Getting Started

We are going to start with a template that I created for this exact purpose.

Open this github repo with your browser of choice https://github.com/LukeHagar/sveltekit-extension-template
Click create a new repository
Name the repository whatever you want, this will be the repo for your project
Clone your GitHub repository with git clone <your GitHub repository>
Install dependencies
```
npm install
```
Start the dev server
```
npm run dev
```
A dev server should now be running that you can alter and update to build out the chrome extension how you want.

Adding Extension specific functions

Chrome extension functionality is implemented through the chrome global namespace. You can verify your code is running in a chrome extension using the following conditional statement.

window.chrome && chrome.runtime && chrome.runtime.id

The Chrome API has a number of different functions and values for different things, including permissions values restricting what you can and cannot do. That list is detailed further here

For now we will focus on adding a simple item in the nav bar that detects if the extension is running in chrome or a dev environment.

We will start in the +layout.svelte file. Inside the script tag we will add a variable for the environment.
```
let environment: string;
```

Then we will add a if statement inside of a sveltekit onMount to build the full environment string we want.

let environment: string;

// This will trigger when running as an extension
onMount(() => {
    if (window.chrome && chrome.runtime && chrome.runtime.id) {
        environment = 'Chrome Extension';
    }
});

Next we want to add the else value

let environment: string;

onMount(() => {
    if (window.chrome && chrome.runtime && chrome.runtime.id) {
        environment = 'Chrome Extension';
    } else {
        environment = 'Development';
    }
});

Now we have a variable that reflects the current environment.

lets add it to the header. We are using the AppBar from Skeleton, so we will go to the default slot of the AppBar, which is the section between the two svelte:fragments.

<AppBar>
        <svelte:fragment slot="lead">
            <strong class="text-xl uppercase">Skeleton</strong>
        </svelte:fragment>

        //Right here

        <svelte:fragment slot="trail">
            <a
                class="btn btn-sm variant-ghost-surface"
                href="https://discord.gg/EXqV7W8MtY"
                target="_blank"
                rel="noreferrer"
            >
                Discord
            </a>
            <a
                class="btn btn-sm variant-ghost-surface"
                href="https://twitter.com/SkeletonUI"
                target="_blank"
                rel="noreferrer"
            >
                Twitter
            </a>
            <a
                class="btn btn-sm variant-ghost-surface"
                href="https://github.com/skeletonlabs/skeleton"
                target="_blank"
                rel="noreferrer"
            >
                GitHub
            </a>
        </svelte:fragment>
    </AppBar>

And I'm going to add a simple <p> tag for the variable to sit in.

    <AppBar>
        <svelte:fragment slot="lead">
            <strong class="text-xl uppercase">Skeleton</strong>
        </svelte:fragment>

        <p class="text-center">{environment}</p>

        <svelte:fragment slot="trail">
            <a
                class="btn btn-sm variant-ghost-surface"
                href="https://discord.gg/EXqV7W8MtY"
                target="_blank"
                rel="noreferrer"
            >
                Discord
            </a>
            <a
                class="btn btn-sm variant-ghost-surface"
                href="https://twitter.com/SkeletonUI"
                target="_blank"
                rel="noreferrer"
            >
                Twitter
            </a>
            <a
                class="btn btn-sm variant-ghost-surface"
                href="https://github.com/skeletonlabs/skeleton"
                target="_blank"
                rel="noreferrer"
            >
                GitHub
            </a>
        </svelte:fragment>
    </AppBar>

Lastly I will run npm run build, load the build folder as an unpacked extension in chrome, and you can see the variable reflect the correct environment.

Here is the demo repo containing this code for this example project https://github.com/LukeHagar/dev-extension-template-demo

Building the Project for production

When you are all done and or want to preview your extension in chrome, you can build the final project by running

npm run build

Then the build folder that is created is your extension, you can load it unpacked in the Extensions menu of Chromium based Browsers like Vivaldi, Chrome, Brave, and Edge.

If you have any questions or want to chat I primarily hangout in the Skeleton discord server.

Happy Development!