feat: build hashed static files to renew browser cache

- replace rollup config with vitejs
- use vite dev server during development to take advantage of
hot module replacement (HMR)
- add vite service using Vite library to load css and js assets
- update package.json scripts and remove unnecessary
dependencies
- update scripts/bundle-prepare.sh

closes #107

.babelrc

@@ -1,4 +0,0 @@
-{
-  "presets": ["@babel/preset-typescript", "@babel/preset-env"],
-  "plugins": ["@babel/plugin-proposal-class-properties"]
-}

.devcontainer/devcontainer.json

@@ -5,12 +5,12 @@
   "dockerComposeFile": ["../docker-compose.yml", "./docker-compose.yml"],
   "service": "app",
   "workspaceFolder": "/castopod-host",
-  "postCreateCommand": "composer install && npm install && npm run build:dev",
-  "postStartCommand": "crontab ./crontab && cron && php spark serve --host 0.0.0.0",
+  "postCreateCommand": "composer install && npm install && npm run build:static",
+  "postStartCommand": "crontab ./crontab && cron && php spark serve --host 0.0.0.0 & npm run dev",
   "postAttachCommand": "crontab ./crontab && service cron reload",
   "shutdownAction": "stopCompose",
   "settings": {
-    "terminal.integrated.defaultProfile.linux": "/bin/bash",
+    "terminal.integrated.defaultProfile.linux": "bash",
     "editor.formatOnSave": true,
     "[php]": {
       "editor.defaultFormatter": "bmewburn.vscode-intelephense-client",

UPDATE.md

@@ -47,7 +47,8 @@ performance improvements ⚡.
    - cf.
      [I haven't updated my instance in a long time… What should I do?](#i-havent-updated-my-instance-in-a-long-time-what-should-i-do)
 
-5. ✨ Enjoy your fresh instance, you're all done!
+5. If you are using redis, clear your cache.
+6. ✨ Enjoy your fresh instance, you're all done!
 
 ## Automatic update instructions
 

app/Config/Services.php

@@ -10,6 +10,7 @@ use App\Authorization\PermissionModel;
 use App\Libraries\Breadcrumb;
 use App\Libraries\Negotiate;
 use App\Libraries\Router;
+use App\Libraries\Vite;
 use App\Models\UserModel;
 use CodeIgniter\Config\BaseService;
 use CodeIgniter\HTTP\Request;
@@ -138,4 +139,13 @@ class Services extends BaseService
 
         return new Breadcrumb();
     }
+
+    public static function vite(bool $getShared = true): Vite
+    {
+        if ($getShared) {
+            return self::getSharedInstance('vite');
+        }
+
+        return new Vite();
+    }
 }

app/Libraries/Vite.php

@@ -0,0 +1,118 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Libraries;
+
+class Vite
+{
+    protected string $manifestPath = 'assets/manifest.json';
+
+    protected string $manifestCSSPath = 'assets/manifest-css.json';
+
+    /**
+     * @var array<string, mixed>
+     */
+    protected ?array $manifestData = null;
+
+    /**
+     * @var array<string, mixed>
+     */
+    protected ?array $manifestCSSData = null;
+
+    public function asset(string $path, string $type): string
+    {
+        if (ENVIRONMENT !== 'production') {
+            return $this->loadDev($path, $type);
+        }
+
+        // @phpstan-ignore-next-line
+        return $this->loadProd($path, $type);
+    }
+
+    private function loadDev(string $path, string $type): string
+    {
+        return $this->getHtmlTag("http://localhost:3000/assets/{$path}", $type);
+    }
+
+    private function loadProd(string $path, string $type): string
+    {
+        if ($type === 'css') {
+            if ($this->manifestCSSData === null) {
+                $cacheName = 'vite-manifest-css';
+                if (! ($cachedManifestCSS = cache($cacheName))) {
+                    if (($manifestCSSContent = file_get_contents($this->manifestCSSPath)) !== false) {
+                        $cachedManifestCSS = json_decode($manifestCSSContent, true);
+                        cache()
+                            ->save($cacheName, $cachedManifestCSS, DECADE);
+                    } else {
+                        // ERROR when getting the manifest-css file
+                        $manifestCSSPath = $this->manifestCSSPath;
+                        die("Could not load Vite's <pre>{$manifestCSSPath}</pre> file.");
+                    }
+                }
+                $this->manifestCSSData = $cachedManifestCSS;
+            }
+
+            if (array_key_exists($path, $this->manifestCSSData)) {
+                return $this->getHtmlTag('/assets/' . $this->manifestCSSData[$path]['file'], 'css');
+            }
+        }
+
+        if ($this->manifestData === null) {
+            $cacheName = 'vite-manifest';
+            if (! ($cachedManifest = cache($cacheName))) {
+                if (($manifestContents = file_get_contents($this->manifestPath)) !== false) {
+                    $cachedManifest = json_decode($manifestContents, true);
+                    cache()
+                        ->save($cacheName, $cachedManifest, DECADE);
+                } else {
+                    // ERROR when retrieving the manifest file
+                    $manifestPath = $this->manifestPath;
+                    die("Could not load Vite's <pre>{$manifestPath}</pre> file.");
+                }
+            }
+            $this->manifestData = $cachedManifest;
+        }
+
+        $html = '';
+        if (array_key_exists($path, $this->manifestData)) {
+            $manifestElement = $this->manifestData[$path];
+
+            // import css dependencies if any
+            if (array_key_exists('css', $manifestElement)) {
+                foreach ($manifestElement['css'] as $cssFile) {
+                    $html .= $this->getHtmlTag('/assets/' . $cssFile, 'css');
+                }
+            }
+
+            // import dependencies first for faster js loading
+            if (array_key_exists('imports', $manifestElement)) {
+                foreach ($manifestElement['imports'] as $importPath) {
+                    if (array_key_exists($importPath, $this->manifestData)) {
+                        $html .= $this->getHtmlTag('/assets/' . $this->manifestData[$importPath]['file'], 'js');
+                    }
+                }
+            }
+
+            $html .= $this->getHtmlTag('/assets/' . $manifestElement['file'], $type);
+        }
+
+        return $html;
+    }
+
+    private function getHtmlTag(string $assetUrl, string $type): string
+    {
+        return match ($type) {
+            'css' => <<<CODE_SAMPLE
+                <link rel="stylesheet" href="{$assetUrl}"/>
+            CODE_SAMPLE
+,
+            'js' => <<<CODE_SAMPLE
+                    <script type="module" src="{$assetUrl}"></script>
+                CODE_SAMPLE
+,
+            default => '',
+        };
+    }
+}

app/Resources/js/favicon.svg

@@ -0,0 +1,15 @@
+<svg width="410" height="404" viewBox="0 0 410 404" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M399.641 59.5246L215.643 388.545C211.844 395.338 202.084 395.378 198.228 388.618L10.5817 59.5563C6.38087 52.1896 12.6802 43.2665 21.0281 44.7586L205.223 77.6824C206.398 77.8924 207.601 77.8904 208.776 77.6763L389.119 44.8058C397.439 43.2894 403.768 52.1434 399.641 59.5246Z" fill="url(#paint0_linear)"/>
+<path d="M292.965 1.5744L156.801 28.2552C154.563 28.6937 152.906 30.5903 152.771 32.8664L144.395 174.33C144.198 177.662 147.258 180.248 150.51 179.498L188.42 170.749C191.967 169.931 195.172 173.055 194.443 176.622L183.18 231.775C182.422 235.487 185.907 238.661 189.532 237.56L212.947 230.446C216.577 229.344 220.065 232.527 219.297 236.242L201.398 322.875C200.278 328.294 207.486 331.249 210.492 326.603L212.5 323.5L323.454 102.072C325.312 98.3645 322.108 94.137 318.036 94.9228L279.014 102.454C275.347 103.161 272.227 99.746 273.262 96.1583L298.731 7.86689C299.767 4.27314 296.636 0.855181 292.965 1.5744Z" fill="url(#paint1_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="6.00017" y1="32.9999" x2="235" y2="344" gradientUnits="userSpaceOnUse">
+<stop stop-color="#41D1FF"/>
+<stop offset="1" stop-color="#BD34FE"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="194.651" y1="8.81818" x2="236.076" y2="292.989" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFEA83"/>
+<stop offset="0.0833333" stop-color="#FFDD35"/>
+<stop offset="1" stop-color="#FFA800"/>
+</linearGradient>
+</defs>
+</svg>

app/Resources/js/modules/MarkdownEditor.ts

@@ -18,7 +18,7 @@ class MarkdownView {
     this.textarea.classList.add("w-full", "h-full");
   }
 
-  get content() {
+  content() {
     return this.textarea.innerHTML;
   }
   focus() {
@@ -55,7 +55,7 @@ class ProseMirrorView {
         this.view.updateState(newState);
 
         if (transaction.docChanged) {
-          target.innerHTML = this.content;
+          target.innerHTML = this.content();
         }
       },
       attributes: {
@@ -65,8 +65,8 @@ class ProseMirrorView {
     });
   }
 
-  get content() {
-    return defaultMarkdownSerializer.serialize(this.view.state.doc);
+  content(): string {
+    return defaultMarkdownSerializer.serialize(this.view.state.doc) || "";
   }
   focus() {
     this.view.focus();
@@ -134,7 +134,7 @@ const MarkdownEditor = (): void => {
     // show WYSIWYG editor by default
     target.classList.add("hidden");
     const markdownView = new MarkdownView(target);
-    const wysiwygView = new ProseMirrorView(target, markdownView.content);
+    const wysiwygView = new ProseMirrorView(target, markdownView.content());
 
     markdownEditorContainer.appendChild(viewButtons);
 

app/Resources/js/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

app/Resources/styles/fonts.css

@@ -0,0 +1,33 @@
+@layer base {
+  /* kumbh-sans-regular */
+  @font-face {
+    font-family: "Kumbh Sans";
+    font-style: normal;
+    font-weight: 400;
+    src: url("/fonts/kumbh-sans-regular.woff2") format("woff2");
+  }
+
+  /* kumbh-sans-700 */
+  @font-face {
+    font-family: "Kumbh Sans";
+    font-style: normal;
+    font-weight: 700;
+    src: url("/fonts/kumbh-sans-700.woff2") format("woff2");
+  }
+
+  /* montserrat-regular */
+  @font-face {
+    font-family: "Montserrat";
+    font-style: normal;
+    font-weight: 400;
+    src: url("/fonts/montserrat-regular.woff2") format("woff2");
+  }
+
+  /* montserrat-600 - latin */
+  @font-face {
+    font-family: "Montserrat";
+    font-style: normal;
+    font-weight: 600;
+    src: url("/fonts/montserrat-600.woff2") format("woff2");
+  }
+}

app/Resources/types/js/admin.d.ts

@@ -0,0 +1 @@
+export {};

app/Resources/types/js/charts.d.ts

@@ -0,0 +1 @@
+import "core-js";

app/Resources/types/js/install.d.ts

@@ -0,0 +1 @@
+export {};

app/Resources/types/js/modules/Charts.d.ts

@@ -0,0 +1,2 @@
+declare const DrawCharts: () => void;
+export default DrawCharts;

app/Resources/types/js/modules/ClientTimezone.d.ts

@@ -0,0 +1,2 @@
+declare const ClientTimezone: () => void;
+export default ClientTimezone;

app/Resources/types/js/modules/Clipboard.d.ts

@@ -0,0 +1,2 @@
+declare const Clipboard: () => void;
+export default Clipboard;

app/Resources/types/js/modules/DateTimePicker.d.ts

@@ -0,0 +1,3 @@
+import "flatpickr/dist/flatpickr.min.css";
+declare const DateTimePicker: () => void;
+export default DateTimePicker;

app/Resources/types/js/modules/Dropdown.d.ts

@@ -0,0 +1,2 @@
+declare const Dropdown: () => void;
+export default Dropdown;

app/Resources/types/js/modules/MarkdownEditor.d.ts

@@ -0,0 +1,5 @@
+import "prosemirror-example-setup/style/style.css";
+import "prosemirror-menu/style/menu.css";
+import "prosemirror-view/style/prosemirror.css";
+declare const MarkdownEditor: () => void;
+export default MarkdownEditor;

app/Resources/types/js/modules/Modal.d.ts

@@ -0,0 +1,2 @@
+declare const Modal: () => void;
+export default Modal;

app/Resources/types/js/modules/MultiSelect.d.ts

@@ -0,0 +1,2 @@
+declare const MultiSelect: () => void;
+export default MultiSelect;

app/Resources/types/js/modules/PublishMessageWarning.d.ts

@@ -0,0 +1,2 @@
+declare const PublishMessageWarning: () => void;
+export default PublishMessageWarning;

app/Resources/types/js/modules/SidebarToggler.d.ts

@@ -0,0 +1,2 @@
+declare const SidebarToggler: () => void;
+export default SidebarToggler;

app/Resources/types/js/modules/Slugify.d.ts

@@ -0,0 +1,2 @@
+declare const Slugify: () => void;
+export default Slugify;

app/Resources/types/js/modules/Soundbites.d.ts

@@ -0,0 +1,2 @@
+declare const Soundbites: () => void;
+export default Soundbites;

app/Resources/types/js/modules/ThemePicker.d.ts

@@ -0,0 +1,2 @@
+declare const ThemePicker: () => void;
+export default ThemePicker;

app/Resources/types/js/modules/Time.d.ts

@@ -0,0 +1,2 @@
+declare const Time: () => void;
+export default Time;

app/Resources/types/js/modules/Toggler.d.ts

@@ -0,0 +1,2 @@
+declare const Toggler: () => void;
+export default Toggler;

app/Resources/types/js/modules/Tooltip.d.ts

@@ -0,0 +1,2 @@
+declare const Tooltip: () => void;
+export default Tooltip;

app/Resources/types/js/my-element.d.ts

@@ -0,0 +1,5 @@
+import { LitElement } from "lit";
+declare class MyElement extends LitElement {
+  render(): import("lit-html").TemplateResult<1>;
+}
+export default MyElement;

app/Resources/types/js/podcast.d.ts

@@ -0,0 +1 @@
+export {};

app/Views/_assets/styles/fonts.css

@@ -1,41 +0,0 @@
-@layer base {
-  /* kumbh-sans-regular */
-  @font-face {
-    font-family: "Kumbh Sans";
-    font-style: normal;
-    font-weight: 400;
-    src: local(""), url("fonts/kumbh-sans-regular.woff2") format("woff2"),
-      /* Chrome 26+, Opera 23+, Firefox 39+ */
-        url("fonts/kumbh-sans-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-  }
-
-  /* kumbh-sans-700 */
-  @font-face {
-    font-family: "Kumbh Sans";
-    font-style: normal;
-    font-weight: 700;
-    src: local(""), url("fonts/kumbh-sans-700.woff2") format("woff2"),
-      /* Chrome 26+, Opera 23+, Firefox 39+ */ url("fonts/kumbh-sans-700.woff")
-        format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-  }
-
-  /* montserrat-regular */
-  @font-face {
-    font-family: "Montserrat";
-    font-style: normal;
-    font-weight: 400;
-    src: local(""), url("fonts/montserrat-regular.woff2") format("woff2"),
-      /* Chrome 26+, Opera 23+, Firefox 39+ */
-        url("fonts/montserrat-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-  }
-
-  /* montserrat-600 - latin */
-  @font-face {
-    font-family: "Montserrat";
-    font-style: normal;
-    font-weight: 600;
-    src: local(""), url("fonts/montserrat-600.woff2") format("woff2"),
-      /* Chrome 26+, Opera 23+, Firefox 39+ */ url("fonts/montserrat-600.woff")
-        format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-  }
-}

app/Views/_layout.php

@@ -8,7 +8,7 @@
     <meta name="description" content="Castopod is an open-source hosting platform made for podcasters who want engage and interact with their audience."/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <link rel="shortcut icon" type="image/png" href="/favicon.ico" />
-    <link rel="stylesheet" href="/assets/index.css"/>
+    <?= service('vite')->asset('styles/index.css', 'css') ?>
 </head>
 
 <body class="flex flex-col min-h-screen mx-auto bg-gray-100">

app/Views/admin/_layout.php

@@ -7,9 +7,8 @@
     <meta name="description" content="Castopod is an open-source hosting platform made for podcasters who want engage and interact with their audience."/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <link rel="shortcut icon" type="image/png" href="/favicon.ico" />
-    <link rel="stylesheet" href="/assets/admin.css"/>
-    <link rel="stylesheet" href="/assets/index.css"/>
-    <script src="/assets/admin.js" type="module"></script>
+    <?= service('vite')->asset('styles/index.css', 'css') ?>
+    <?= service('vite')->asset('js/admin.ts', 'js') ?>
 </head>
 
 <body class="relative bg-gray-100 holy-grail-grid">

app/Views/admin/episode/view.php

@@ -151,5 +151,5 @@
     </div>
 
 
-<script src="/assets/charts.js" type="module"></script>
+<?= service('vite')->asset('js/charts.ts', 'js') ?>
 <?= $this->endSection() ?>

app/Views/admin/podcast/analytics/index.php

@@ -39,5 +39,5 @@
 ) ?>"></div>
 </div>
 
-<script src="/assets/charts.js" type="module"></script>
+<?= service('vite')->asset('js/charts.ts', 'js') ?>
 <?= $this->endSection() ?>

app/Views/admin/podcast/analytics/listening_time.php

@@ -30,5 +30,5 @@
 ) ?>"></div>
 </div>
 
-<script src="/assets/charts.js" type="module"></script>
+<?= service('vite')->asset('js/charts.ts', 'js') ?>
 <?= $this->endSection() ?>

app/Views/admin/podcast/analytics/locations.php

@@ -42,5 +42,5 @@
 </div>
 
 
-<script src="/assets/charts.js" type="module"></script>
+<?= service('vite')->asset('js/charts.ts', 'js') ?>
 <?= $this->endSection() ?>

app/Views/admin/podcast/analytics/players.php

@@ -62,5 +62,5 @@
     ) ?>"></div>
 </div>
 
-<script src="/assets/charts.js" type="module"></script>
+<?= service('vite')->asset('js/charts.ts', 'js') ?>
 <?= $this->endSection() ?>

app/Views/admin/podcast/analytics/time_periods.php

@@ -32,5 +32,5 @@
 
 </div>
 
-<script src="/assets/charts.js" type="module"></script>
+<?= service('vite')->asset('js/charts.ts', 'js') ?>
 <?= $this->endSection() ?>

app/Views/admin/podcast/analytics/unique_listeners.php

@@ -30,5 +30,5 @@
 ) ?>"></div>
 </div>
 
-<script src="/assets/charts.js" type="module"></script>
+<?= service('vite')->asset('js/charts.ts', 'js') ?>
 <?= $this->endSection() ?>

app/Views/admin/podcast/analytics/webpages.php

@@ -57,5 +57,5 @@
 
 
 
-<script src="/assets/charts.js" type="module"></script>
+<?= service('vite')->asset('js/charts.ts', 'js') ?>
 <?= $this->endSection() ?>

app/Views/auth/_layout.php

@@ -8,7 +8,7 @@
 	<meta name="description" content="Castopod is an open-source hosting platform made for podcasters who want engage and interact with their audience."/>
 	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 	<link rel="shortcut icon" type="image/png" href="/favicon.ico" />
-	<link rel="stylesheet" href="/assets/index.css"/>
+    <?= service('vite')->asset('styles/index.css', 'css') ?>
 </head>
 
 <body class="flex flex-col items-center justify-center min-h-screen mx-auto bg-gray-100">

app/Views/errors/html/error_404.php

@@ -5,7 +5,7 @@
 <head>
     <meta charset="utf-8">
     <title>404 Page Not Found</title>
-    <link rel="stylesheet" href="/assets/index.css" />
+    <?= service('vite')->asset('styles/index.css', 'css') ?>
 </head>
 
 <body class="flex flex-col items-center justify-center min-h-screen px-2 text-center bg-gray-100">

app/Views/errors/html/production.php

@@ -7,7 +7,7 @@
 	<meta name="robots" content="noindex">
 
 	<title>Whoops!</title>
-	<link rel="stylesheet" href="/assets/index.css" />
+    <?= service('vite')->asset('styles/index.css', 'css') ?>
 </head>
 
 <body class="flex flex-col items-center justify-center min-h-screen px-2 text-center bg-gray-100">

app/Views/home.php

@@ -8,7 +8,7 @@
     <meta name="description" content="Castopod is an open-source hosting platform made for podcasters who want engage and interact with their audience."/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <link rel="shortcut icon" type="image/png" href="/favicon.ico" />
-    <link rel="stylesheet" href="/assets/index.css"/>
+    <?= service('vite')->asset('styles/index.css', 'css') ?>
 </head>
 
 <body class="flex flex-col min-h-screen mx-auto bg-pine-50">

app/Views/install/_layout.php

@@ -7,8 +7,8 @@
     <meta name="description" content="Castopod is an open-source hosting platform made for podcasters who want engage and interact with their audience."/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <link rel="shortcut icon" type="image/png" href="/favicon.ico" />
-    <link rel="stylesheet" href="/assets/index.css"/>
-    <script src="/assets/install.js" type="module"></script>
+    <?= service('vite')->asset('styles/index.css', 'css') ?>
+    <?= service('vite')->asset('js/install.ts', 'js') ?>
 </head>
 
 <body class="flex flex-col min-h-screen mx-auto">

app/Views/podcast/_layout.php

@@ -13,8 +13,8 @@
         <meta name="monetization" content="<?= $podcast->payment_pointer ?>" />
     <?php endif; ?>
 
-    <link rel="stylesheet" href="/assets/index.css"/>
-    <script src="/assets/podcast.js" type="module"></script>
+    <?= service('vite')->asset('styles/index.css', 'css') ?>
+    <?= service('vite')->asset('js/podcast.ts', 'js') ?>
 </head>
 
 <body class="flex w-full min-h-screen pb-20 overflow-x-hidden lg:mx-auto lg:container bg-pine-50 sm:pb-0">

app/Views/podcast/_layout_authenticated.php

@@ -13,8 +13,8 @@
         <meta name="monetization" content="<?= $podcast->payment_pointer ?>" />
     <?php endif; ?>
 
-    <link rel="stylesheet" href="/assets/index.css" />
-    <script src="/assets/podcast.js" type="module"></script>
+    <?= service('vite')->asset('styles/index.css', 'css') ?>
+    <?= service('vite')->asset('js/podcast.ts', 'js') ?>
 </head>
 
 <body class="flex w-full min-h-screen pt-12 pb-20 overflow-x-hidden bg-pine-50 lg:mx-auto lg:container sm:pb-0">

app/Views/podcast/status_remote_action.php

@@ -24,8 +24,8 @@
     <meta property="og:image" content="<?= $status->actor->avatar_image_url ?>" />
     <meta property="og:description" content="<?= $status->message ?>" />
 
-    <link rel="stylesheet" href="/assets/index.css"/>
-    <script src="/assets/podcast.js" type="module"></script>
+    <?= service('vite')->asset('styles/index.css', 'css') ?>
+    <?= service('vite')->asset('js/podcast.ts', 'js') ?>
 </head>
 
 <body class="min-h-screen mx-auto bg-pine-50">

docs/setup-development.md

@@ -87,8 +87,21 @@ required services will be loaded automagically!
    [Remote - Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers)
 2. `Ctrl/Cmd + Shift + P` > `Open in container`
 
-   > The VSCode window will reload inside the dev container. It may take a long
-   > time on first load as it is building all necessary services.
+   > The VSCode window will reload inside the dev container. Expect several
+   > minutes during first load as it is building all necessary services.
+
+   **Note**: The dev container will start by running both the Castopod Host
+   server and [Vite](https://vitejs.dev)'s dev server (for compiling the
+   typescript code and styles). If there is any issue with the servers not
+   running, you can restart them using the following commands:
+
+   ```bash
+   # run Castopod host server
+   php spark serve --host 0.0.0.0
+
+   # run Vite dev server
+   npm run dev
+   ```
 
 3. You're all set! 🎉
 
@@ -195,15 +208,12 @@ You do not wish to use the VSCode devcontainer? No problem!
 
    ```bash
    # build all assets at once
-   npm run build:dev
+   npm run build:static
 
    # generate/copy specific assets
-   npm run build:js
-   npm run build:css
    npm run build:icons
    npm run build:svg
    npm run copy:images
-   npm run copy:fonts
    ```
 
    > **Note:**