Forem: Matthias Andrasch

Deploy and run Nuxt SSR websites via Laravel Forge (and Hetzner)

Matthias Andrasch — Mon, 08 Dec 2025 11:05:22 +0000

Forge is a server management service made by the creator of the well known PHP framework laravel. But Forge is meant to be used for more than PHP applications.

Since the new platform release, Forge explicitly supports NodeJS SSR hosting:

Nuxt and Next.js integrations: Forge offers first-class support for modern JavaScript frameworks.

What is server side rendering (SSR)?

Server Side Rendering isn't new for developers familiar with PHP, since PHP always runs server side first. But for JavaScript developers, who have been creating Single Page Applications (SPA) or static projects which rely on JavaScript in the browser, SSR can be a great addition: Your code will be first executed on the server, therefore you can call authenticated APIs in secrecy - or deliver ready-made HTML to be consumed by non-javascript SEO bots. See Nuxt.js Rendering modes for more information about server side, client side and hydration techniques.

Let's try Nuxt.js on Forge

To get started on Forge, you need to invest $12 per month for the Hobby tier. This will enable you to add:

unlimited Laravel VPS servers
1 external server

If you plan to use more than one external server, e.g. from Hetzner, you need to pay a bit more: $19 / month for the growth plan. See pricing.

Beware: As it is common for these server management tools, each added server has its own additional usage fees. 💸

Laravel VPS servers

Since the new Forge feature launch, it is possible to use VPS servers directly managed by Forge:

Instead of jumping between Forge and your cloud provider's dashboard to manage servers, billing, and configuration, everything lives in one place.

Prices start at $6 / month, see Laravel VPS server pricing.

The following regions are currently supported:

External VPS providers

You can also add external providers, e.g. Hetzner and connect them via API key:

You can then use the Hetzner Cloud VPS servers or dedicated ones:

Beware: The pricing shown here differs a bit from the Hetzner pricing I know. Cheapest server is currently capped at 4,15€/month.

Add your first server

For my example here, I'll use the cheapest Hetzner VPS. For private network, just create a new one.

I use the app server option, there are other ones available:

In the advanced section, the defaults currently are the following:

After clicking "create server", Forge will now connect via SSH to the new server and install the necessary linux packages as well as creating the needed configuration:

Create the nuxt sample website

Get started by creating a sample nuxt app,

npm create nuxt@latest nuxt-example

Use the minimal setup option:

To check out the Server Side Rendering (SSR) features, we add a new SSR route which fetches data externally:

// server/api/cat-facts
export default defineEventHandler(async () => {
  // we could also use authenticated APIs here, secrets won't be shown to the client
  return $fetch('https://catfact.ninja/fact')
})

<!-- app/pages/index.vue -->
<script setup>
const { data } = await useFetch('/api/cat-fact')
</script>

<template>
  <div class="p-10 max-w-2xl mx-auto">
    <h1 class="text-3xl mb-4">🐈 Random cat fact</h1>
    <p class="mb-6">{{ data.fact }}</p>
</template>

Replace NuxtWelcome with NuxtPage in app/app.vue

<template>
  <NuxtLayout>
    <NuxtRouteAnnouncer />
    <NuxtPage />
  </NuxtLayout>
</template>

Full code: https://github.com/mandrasch/nuxt-example

Deploy / host it via Forge

On your newly created server, we now select "Create site" in the Sites tab and select "Nuxt.js" with "Nuxt.js server":

The defaults for advanced settings are the following:

First deploy

We can now start our first deployment after connecting our GitHub account to Forge:

The site is then launched via pm2:

Et voilà, our SSR website is online:

Adjust deploy script

The defaults for the deploy script can be adjusted:

Set environment variables

It is also possible to set env vars via the Forge interface:

Background processes and scheduler

There are also two additional options: Scheduler and Background processes

Commands

Execute commands remotely:

Heartbeat and Logs

Other options

There are some more options available, e.g. Deploy hook, Healthchecks. You can also decide wheter you want to enable push to deploy from GitHub or trigger it manual.

Redis installed by default

Laravel Forge automatically installs both Memcached and Redis™ when provisioning App Servers or Cache Servers.

See https://forge.laravel.com/docs/resources/caches for more information

You can adjust the Redis password in the Server settings:

This is handy for caching, see e.g. https://nuxt-multi-cache.dulnan.net/ or similiar extensions for Nuxt.

Summary

Forge did an awesome job integrating Nuxt.js in their polished and clean server management interface, kudos!

What is your experience with Forge?

What's next?

It would be great if there would be out of the box support for

SvelteKit SSR via adapter-node
Astros On-Demand-Rendering

in future!

In the meantime, it might be possible to run SvelteKit or Astro with SSR with some hacking / customization on Forge, see e.g. https://forge.laravel.com/docs/servers/nginx-templates. But I haven't tested yet.

Similiar services

Similiar server management services are ploi.io, cleavr or Coolify (selfhosting possible). Another platform I recently became aware of is Sliplane Docker Hosting, a company from Berlin.

Simple Coolify example with Docker Compose + Github

Matthias Andrasch — Sun, 09 Mar 2025 11:34:41 +0000

I recently learned a bit more about Docker Compose and wanted to apply my new knowledge to Coolify. The first goal is to setup a simple webserver with nginx to deploy a "Hello World" HTML webpage.

What is Coolify?

Coolify is an "open-source & self-hostable Heroku / Netlify / Vercel alternative". It is developed by Andras Bacsai.

The advantage of Coolify compared to other (awesome) server management tools like ploi.io, Cleavr or Laravel Forge is that you can install it directly on your VPS without additional subscription costs. This is especially great for low budget or small hobby projects.
Another advantage is that you can connect your GitHub account and directly deploy repositories (like you would do on Vercel, etc).

My demo specs:

VPS: Hetzner Cloud CPX11 (AMD) - €4,35/month
Coolify v4.0.0-beta.390

You could also choose ARM as a faster choice.

Install selfhosted Coolify on Hetzner VPS

Just create a new CPX11 cloud server on Hetzner, connect via SSH (ssh root@your-server-ip) and run the command from https://coolify.io/self-hosted:

curl -fsSL https://cdn.coollabs.io/coolify/install.sh | bash

That's really it. After installation, you can create your admin user via http://your-vps-server-ip:8000/. See this slightly older YouTube video for full example: https://www.youtube.com/watch?v=Jg6SWqyvYys

Add swap space to prevent "out of memory"

Sometimes I ran into "502 Bad Gateway" and 200% CPU load after hitting "Deploy" - while I had other (PHP + MySQL) resources running on my Coolify instance. I asked the Coolify Developer on GitHub and he gave me multiple suggestions.

I decided to try the swap option - Swap is disabled by default on Hetzner VPS (see: reddit discussion). I followed this guide (for ubuntu) and added 6GB swap space (since I only had 17G left on my small VPS) https://www.digitalocean.com/community/tutorial-collections/how-to-add-swap-space.

A simple Docker Compose example

The first goal is to setup a simple webserver with nginx to deploy a "Hello World" HTML webpage.

Create a new resource in Coolify

Let's get the party started by creating a new project:

Select production:

Add a new resource:

In the next step, it is important to use a Git Based approach. Don't get confused with the Docker options below.

I'll use the option "public repository" for now, but the cool thing is that you can also use private GitHub repositories.

My demo repository: https://github.com/mandrasch/coolify-docker-compose-simple-example

Now we can switch to Docker Compose:

After selecting Docker Compose as Build Pack option, you can configure the location of the Docker Compose file.

I decided to use /docker-compose.production.yaml in my example:

docker-compose.production.yaml

My compose file has the following content:

version: '3'
services:
  web:
    build:
      context: .
      dockerfile: Dockerfile.prod

⚠️ Normally, you would publish and expose ports like this in the docker compose file - don't do this on Coolify!

   ports:
      - "8080:80"

Otherwise you will get this error:

Error response from daemon: driver failed programming external connectivity on endpoint web-XXXXXXXXXXX-XXXXXXXXXXX (XXXXXXX): 

Bind for 0.0.0.0:8080 failed: port is already allocated

Coolify handles this on its own, just leave it out.

Dockerfile.prod

The Dockerfile defines how the Docker image will be built. The built image is then used to launch Docker containers. We simply use an nginx alpine linux image from DockerHub as starting point.

# Dockerfile.prod
# Use the official NGINX image
FROM nginx:alpine

# Copy the HTML files into the default NGINX public directory
COPY ./web /usr/share/nginx/html

# Expose port 80 (the default port NGINX listens on)
EXPOSE 80

# Start NGINX (this is the default behavior, no CMD or ENTRYPOINT needed)

web/

In the web/-directory, we just have a simple index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello Coolify!</title>
    <style>
        body{
            font-family: Verdana, Geneva, Tahoma, sans-serif;
        }
    </style>
</head>
<body>
    <h1>Hello Coolify!</h1>

</body>
</html>

Create a temporary domain

Coolify provides temporary domains, just create it here:

This will give you a URL like http://XXXXXXXXXX.1.2.3.4.sslip.io.

Hit deploy

Click the Deploy button on the upper right and wait until the status changes to "Running".

Open it

We can now open the webpage in our web browser (this will use exposed port 80 by default):

Nice work! 🥳

⚠️ Working with mounts ⚠️

If you want to mount a config file or directory, you need to select the checkbox "Preserve Repository During Deployment"

Otherwise something like that won't work, the file default.conf from your git repository is not found:

version: '3'
services:
  web:
    image: nginx:alpine
    volumes:
      - ./default.conf:/etc/nginx/conf.d/default.conf

Error response from daemon: failed to create task for container: failed to create shim task: OCI runtime create failed: runc create failed: unable to start container process: error during container init: error mounting "/data/coolify/applications/x0cg4ggoo0ckg4ggk4ggkssw/default.conf" to rootfs at "/etc/nginx/conf.d/default.conf": create mountpoint for /etc/nginx/conf.d/default.conf mount: cannot create subdirectories in "/var/lib/docker/overlay2/941c13a1e70cc6381b5d34a6cb24933dc542ebd9bdeb2457cfc47bd89dcbe73f/merged/etc/nginx/conf.d/default.conf": not a directory: unknown: Are you trying to mount a directory onto a file (or vice-versa)? Check if the specified host path exists and is the expected type
exit status 1

With the preserve checkbox ticked, everything works as expected.

As alternative to mounts, you can also copy files or directories in your Dockerfile:

FROM nginx:alpine AS BASE

COPY ./default.conf /etc/nginx/conf.d/default.conf

Next tutorials

In the next tutorials I want to step up our game a little bit. My personal goal is to deploy and host CraftCMS websites (PHP + MySQL database + redis). Therefore we need at least three services in our Docker Compose config file. You could also deploy a headless CMS + a decoupled frontend like NuxtJS / SvelteKit / NextJS with that approach. See https://coolify.io/docs/knowledge-base/docker/compose for more information about Docker Compose on Coolify.

UPDATE: Samuel Reichör published the tutorial Deploying a Craft CMS Website with Coolify to a 4€ VPS 🎉

DDEV and PhpStorm's NodeJS Remote Interpreter for ESLint, Prettier, Tailwind, etc.

Matthias Andrasch — Thu, 27 Feb 2025 13:20:09 +0000

PhpStorm is great, but there is only one small limitation while using it with DDEV. Since PhpStorm can't connect to the DDEV's web container of the running project, there is currently no way to just automagically use the defined nodejs_version from .ddev/config.yaml for ESlint, etc.

If you use the (awesome) DDEV Integration Plugin and activate ESLint, Prettier, etc. - it will even crash your DDEV project as soon as you edit a JS file. This is because the DDEV integration plugin currently sets the Remote Node.js Interpreter to this docker-compose path:

This leads to PhpStorm trying to launch another DDEV web container instead of connecting to the existing one to execute npx eslint or similiar commands for prettier, etc. This results in an unhealthy DDEV project (which needs to be restarted via ddev restart).

You can check these issues out for more details:

The good news: A workaround is quite simple.

Workaround: Use a remote Docker image

Just use the official node Docker image with the same version as your DDEV project in the Node.js Remote Interpreter settings for your PhpStorm project.

Select "Add" in the Node interpreter settings:

Select "Docker" and use the same NodeJS version as you have configured for your DDEV project, e.g. node:22:

This setting applies only to the current project, so you can configure different NodeJS versions per project.

That's it, happy developing!

You can also disable the automatic path setting in the DDEV integration plugin for future projects:

Make sure to checkout DDEV Discord as well, if you have more questions. 👋

Vite is suddenly not working due to CORS error? 🧐 (DDEV)

Matthias Andrasch — Thu, 06 Feb 2025 10:38:01 +0000

If you work with a tool like DDEV and recently updated Vite, you will encounter the following error:

Access to script at 'https://my-project.ddev.site:5173/@vite/client' from origin 'https://my-project.ddev.site' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

This is because a security issue was reported to Vite: Any websites were able to send any requests to the development server and read the response

The issue was fixed in minor versions of Vite >=6.0.9, >=5.4.12 and >=4.5.6.

In a nutshell: The issue was that attackers could send you a link to a malicious website and steal your JS source code by fetching it from your local Vite and submit it to their servers.

Previous to the updated versions of Vite, server.cors was set to true by default. That meant allowing all request origins to retrieve JS scripts or CSS from the Vite dev server (via header Access-Control-Allow-Origin: *).

In the new versions of Vite, the default value of server.cors is now an object with a regular expression (regex) for origin:

{ origin: /^https?:\/\/(?:(?:[^:]+\.)?localhost|127\.0\.0\.1|\[::1\])(?::\d+)?$/ }

The new default regex ONLY allows requests from localhost, 127.0.0.1 and ::1.

But when we're working with DDEV, the requests to the Vite dev server will be made from origins / local domains like https://my-project.ddev.site. And this won't be allowed anymore by the new default setting. 🙅

Set it securely for DDEV

Fortunately, fixing this is easy. In order to use a secure config for DDEV, use the following value for server.cors.origin in vite.config.js:

import { defineConfig } from "vite"

export default defineConfig({
  // Your settings
  // ...

  // Adjust Vites dev server to work with DDEV
  // https://vitejs.dev/config/server-options.html
  server: {
    // Respond to all network requests
    host: "0.0.0.0",
    port: 5173,
    strictPort: true,
    // Defines the origin of the generated asset URLs during development, this must be set to the
    // Vite dev server URL and selected port. In general, `process.env.DDEV_PRIMARY_URL` will give
    // us the primary URL of the DDEV project, e.g. "https://test-vite.ddev.site". But since DDEV
    // can be configured to use another port (via `router_https_port`), the output can also be
    // "https://test-vite.ddev.site:1234". Therefore we need to strip a port number like ":1234"
    // before adding Vites port to achieve the desired output of "https://test-vite.ddev.site:5173".
    origin: `${process.env.DDEV_PRIMARY_URL.replace(/:\d+$/, "")}:5173`,

    // 👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇
    // Configure CORS securely for the Vite dev server to allow requests from *.ddev.site domains,
    // supports additional hostnames (via regex). If you use another `project_tld`, adjust this.
    cors: {
      origin: /https?:\/\/([A-Za-z0-9\-\.]+)?(\.ddev\.site)(?::\d+)?$/,
    },
  },
})

This regex allows requests from your local sites running on *.ddev.site domains.

(It also supports projects running on a custom router_https_port such as https://my-project.ddev.site:1234 via (?::\d+)).

See Working with Vite in DDEV - ddev.com for all details and further information. If you have questions, have a chat at DDEV Discord. Have fun with DDEV!

Please note that this shouldn't be confused with server.origin which needs to point to the Vite dev server URL (like https://my-project.ddev.site:5173).

Other tools (Laravel Valet, Laravel Herd, etc.)

For other local web dev tools, you can use a regex like that:

export default defineConfig({
  // ...
  server:
  // ...
    cors: {
         origin: /https?://([A-Za-z0-9-.]+)?(localhost|\.test)(?::\d+)?$/
      },

If you use another domain ending (TLD) than .test, adjust this to include your local domain of choice.

Disclaimer: Not tested these settings myself.

Security note ⚠️

There is also advice out there that setting cors: true will fix the error. Please be aware that this will open up the attack surface again and it totally defeats the purpose of the whole security fix. As stated in Vites official docs:

WARNING
We recommend setting a specific value rather than true to avoid exposing the source code to untrusted origins.

(https://vite.dev/config/server-options#server-cors)

PHP frameworks and CMSes

I'll give some brief information here for some CMSes and frameworks, for the full list please check Working with Vite in DDEV - ddev.com. Please beware - this list here might be outdated soon.

Craft CMS

The docs for DDEV usage of craft-vite have already been updated to get it working again.

PRs for updating craft-vite:

Laravel Vite plugin

Laravel maintains a laravel-vite-plugin (NodeJS), it was updated to integrate the changes made in the Vite update:

https://github.com/laravel/vite-plugin/releases/tag/v1.2.0

(See this commit for more information).

TYPO3

The vite-plugin-typo3 made a hotfix, open issue: #16

Acknowledgements

Thanks to Andrew Welch for providing the first regexes, Stanislav Zhuk for collaborating on the ddev.com PR, ViteJS core maintainer sapphi-red for improving the ddev.com PR and Simon Praetorius for sending me infos about how Laravel solved it. 🤝

Optimize external / dynamic images on-the-fly in SvelteKit

Matthias Andrasch — Sat, 01 Feb 2025 11:05:35 +0000

If all your images are known at build time, @sveltejs/enhanced-img is all you need for optimizing and delivering responsive images to your visitors.

But what about external / dynamically loaded images?

Paid CDNs

The easiest way to optimize external images is using a cloud service (CDN) for image optimization such as cloudinary, imgix, etc. Here is a list of providers which can be used via @unpic/svelte. But these services cost money (if you exceed their free tiers). See SvelteKit docs as well for more information.

Selfhost an image optimizer

Fortunately for us, there are selfhosting alternatives. 🥳

Btw: Frameworks like NuxtJS already offer packages like NuxtImage where you can easily add ipx as selfhosted image optimizer to your project:

Nuxt/Image comes with a preconfigured instance of unjs/ipx. An open source, self-hosted image optimizer based on lovell/sharp.

For SvelteKit, this is discussed here:

But as long as there is no officially supported plugin, you can integrate an image optimizer like ipx easily by yourself.

Selfhost ipx (within SvelteKit)

ipx is an easy-to-use image optimizer powered by sharp and svgo, written in NodeJS. It can be installed as package to your SvelteKit project:

npm i ipx

Afterwards, we need to integrate ipx into a custom express server route in SvelteKit. The whole approach requires using adapter-node in our project.

Here is a demo repository with SvelteKit v2 and unpic v1:

https://github.com/mandrasch/sveltekit-ipx-unpic-demo

We switch to adapter-node and add the express package to our project:

npm i express

We then add the express server configuration in a file like my-server.js:

// my-server.js
import { handler } from './build/handler.js';
import express from 'express';
import {
    createIPX,
    ipxHttpStorage,
    createIPXNodeServer
} from "ipx";


const app = express();

// add a route that lives separately from the SvelteKit app
app.get('/healthcheck', (req, res) => {
    res.end('ok');
});

// ipx image optimizer
const ipx = createIPX({
    // Allowed domains for optimization
    // With httpStorage: ipxHttpStorage({ domains: ["your-domain.com", "second-domain.com"] }), ipx will optimize images coming for a given domain.
    httpStorage: ipxHttpStorage({ domains: ["picsum.photos"] }),
});
app.use("/_ipx", createIPXNodeServer(ipx));

// let SvelteKit handle everything else, including serving prerendered pages and static assets
app.use(handler);

app.listen(3000, () => {
    console.log('listening on port 3000');
});

In a nutshell, we implemented three server routes: One /healthcheck route, one /_ipx-route which handles image optimization requests and serves optimized images via ipx's server and one serves your SvelteKit app as usual.

We also configured the allowed domains for ipx - you can add your external domains from where you want to load images.

In package.json we add the following to the scripts section:

"start": "node ./my-server.js"

This is the command which will be used when deploying and starting your app on production.

The last step is to add @unpic/svelte to our project, which supports ipx:

npm i @unpic/svelte

Now we can use an external image from https://picsum.photos/ and retrieve the large 4K version (3840 x 2160 pixel) of it. We import the ipx transformer and tell unpic that ipx should handle the image optimization:

<script lang="ts">
  // Important: Use base component which has transformer support
  import { Image } from '@unpic/svelte/base'; 
  // Import the transformer for the provider you are using
  import { transform } from "unpic/providers/ipx";
</script>

<Image
    src="https://picsum.photos/id/29/3840/2160"
    layout="constrained"
    width={800}
    height={600}
    alt="winter mountain landscape"
    transformer={transform}
/>

If you run this app via npm run build && npm run start, the responsive HTML output of this will be the following:

<img alt="winter mountain landscape" style="object-fit: cover; max-width: 800px; max-height: 600px; aspect-ratio: 1.33333 / 1; width: 100%;" loading="lazy" decoding="async" sizes="(min-width: 800px) 800px, 100vw" srcset="/_ipx/s_640x480/https://picsum.photos/id/29/3840/2160 640w,
/_ipx/s_750x563/https://picsum.photos/id/29/3840/2160 750w,
/_ipx/s_800x600/https://picsum.photos/id/29/3840/2160 800w,
/_ipx/s_828x621/https://picsum.photos/id/29/3840/2160 828w,
/_ipx/s_960x720/https://picsum.photos/id/29/3840/2160 960w,
/_ipx/s_1080x810/https://picsum.photos/id/29/3840/2160 1080w,
/_ipx/s_1280x960/https://picsum.photos/id/29/3840/2160 1280w,
/_ipx/s_1600x1200/https://picsum.photos/id/29/3840/2160 1600w" src="/_ipx/s_800x600/https://picsum.photos/id/29/3840/2160">

As you can see, optimized image variants are served by the custom /_ipx-route 🎉

Learn more about all unpic options: https://unpic.pics/learn/

If you use the regular npm run dev, you won't see the optimized images since the Vite devserver doesn't know about ipx. If you wan't, you can use a Vite plugin as described in the tutorial by Kazuumi Nishimura. Beware: The tutorial was written for an earlier version of unpic, not the latest unpic v1.

Selfhost imgproxy

Another alternative for selfhosting is imgproxy. This works more like an external CDN.

You could selfhost it for instance with Coolify, the one click service "Next image transformation" ships the docker image darthsim/imgproxy:

Beware: The official imgproxy Docker repository was moved to ghcr.io/imgproxy/imgproxy⁠. The repository on Docker Hub will be kept available, but we may stop updating images in it eventually. So you might want to install it as Docker image from there via Coolify (or other services)

I didn't find specific tutorials for SvelteKit for the usage of imgproxy, but the usage should be most likely similiar to these tutorials:

Optimizing images for Next.js sites with imgproxy and docker by Max Dietrich

I assume you would need to write a custom image loading function, since imgproxy seems not yet be supported by @unpic/svelte. But there is an ongoing discussion: Feature Request: Support for Self Hosted image manipulation server (Thumbor, Imgproxy, Imaginary) #37.

If you're interested in selfhosting and Coolify, make sure to check out Deploy SvelteKit with SSR on Coolify (Hetzner VPS) as well.

Other alternatives?

In the GitHub discussion about image processing in SvelteKit, developer mrxbox98 posted about his experiment of using sharp directly in SvelteKit.

There are also other alternatives for selfhosting such as https://www.thumbor.org/.

Let's hope that this will be a bit easier in future with an image library similiar to NuxtImage.

If you know about other tutorials or alternatives, please let me know in the comments - thanks! 🙏

Acknowledgements:

This article section about ipx is based on the wonderful (japanese) tutorial by Kazuumi Nishimura showing all the necessary steps: SvelteKit + ipx + unpic dynamic and optimal image delivery. Beware: It was written for an earlier version of unpic, not the latest unpic v1.
Thanks very much to tobimori for giving some helpful hints about image processing within JS frameworks (ipx/sharp) and thanks to Jens for the idea to write an article about this and reviewing it.
Thanks to Martin Grubinger for the info about imgproxy via Coolify.

Svelte 5: Share state between components (for Dummies)

Matthias Andrasch — Thu, 02 Jan 2025 12:26:10 +0000

As soon as you see the new $state in Svelte 5, you might be tempted to do this:

// sharedState.svelte.js

 // This won't work as export! ❌
export const searchState = $state("");

<!-- App.svelte -->
<script>
import { searchState } from './sharedState.svelte.js'

function handleClick(){
    // This won't work! ❌
    searchState = "bicycles";
}
</script

<button onclick={handleClick}>Search for bicycles</button>

The above doesn't work if you export it - and here is why:

„You're encountering the most complicated part of Svelte 5. How reactivity works and how the compiler hides it from you.

When you export a single value like a number or string, there is no mechanism for Svelte to maintain reactivity because JavaScript doesn't offer a way to track that.“
Mat Simon

Huge thanks to Mat Simon who explained this to me in a Bluesky thread 💡

Here is what I learned so far:

For exports, use $state with Objects - not Strings!

As said, we can't use a String (or a Number) directly for exporting states like we usually do in a single file component.

// sharedState.svelte.js
// This won't work as export! ❌
export const searchState = $state("");
export const countState = $state(0);

But, Objects in $state() get all their property values proxied automatically by Svelte v5. Wrapping your String value into an Object allows you to export that state and share it between files and components:

// sharedState.svelte.js

// Instead of this ...
// export const searchState = $state("");
// ... do this:
export const searchState = $state({ text : "" });

// Instead of this ...
// export const countState = $state(0);
// ... do this:
export const countState = $state({ count : 0 });

With that searchState and countState are turned into an Svelte state proxy with a getter and a setter for the .text property.

When you import a $state Object, and then update the property via .text = "newValue", you're using the Svelte setter to update the state. This will then be updated in all other places where the state is used:

// App.svelte

import { searchState } from './sharedState.svelte.js'

function handleClick(){
    // uses the automatically created setter
    searchState.text = "bicycles";
}

<button onclick={handleClick}>Search for bicycles</button>

Demo (REPL): Very basic $state example

You can choose any property name you want, as well as multiple properties per $state Object. Svelte 5 takes care of it automagically.

// number
export const countState = $state({ count : 999 });
// multiple properties (number, string)
export const anotherState = $state({ id: 123, title: "Hello World!" });
// array
export const tagsState = $state({ selectedTags: [] });

Full technical background explained by Mat Simon:

Svelte doesn't have to proxy ever method that modifies the underlying object. That would be pretty error prone. Every time JavaScript adds a new method, the Svelte team would need to adapt immediately, otherwise reactivity would break for that specific method. In reality JavaScript proxies are pretty cool. They offer get() and set() traps. [..] This means that the actual implementation of the array (and object) proxy is quite simple and handles all possible methods the array implements and might implement in the future. See Svelte docs for more details.

The Svelte docs state:

If $state is used with an array or a simple object, the result is a deeply reactive state proxy.

The official tutorial for this is Universal Reactivity.

Beware: Don't re-assign Objects outside of their scope

When you use an Object they are also not states themselves! That's important to understand. If you do the following after an import, you lost reactivity:

import { searchState } from './sharedState.svelte.js';
// don't do this!
searchState = {text: "Hello world!"};

There is no way for Svelte to handle this for you. Always use the automatic Svelte getter/setter for exports/imports via

searchState.text = 'new value';

Note: In the same scope, if Objects are defined with $state(), they can be overridden. This article is only about exports.

Advanced: Use classes

There are multiple options to define your state objects, you can also use classes if you ever needed custom methods for updating values in your state: https://joyofcode.xyz/how-to-share-state-in-svelte-5#using-classes-for-reactive-state

Share state between components

So we know how to import (and update) states inside components and we know that we can use objects out of the box with $state:

// MyComponent.svelte

import { searchState } from './sharedState.svelte.js'

function handleClick(){
    searchState.text = "bicycles";
}

<button onclick={handleClick}>Search for bicycles</button>

We can even pass down the $state object as reference by a property with $props:

// App.svelte

<script>
   import { searchTextState } from './data.svelte.js';
   import ResultList from './ResultList.svelte';
</script>

<ResultList stateObj={searchTextState} />

<!-- ResultList.svelte -->

<script>
    // reference to state object is passed down as prop of component
    let {stateObj} = $props();
</script>

<p>You're searching for {stateObj.text}</p>

But how do you know that the state changed somewhere in your app when you're inside a component and want to do some processing based on that value? That's what $derived and $derived.by are for:

<!-- ResultList.svelte -->

<script>
    // reference to state object is passed down as prop
    let {stateObj} = $props();

    // Listen for state changes
    let resultString = $derived.by(() => {

           console.log('state change detected', {stateObj});

           // we would filter results here, do custom stuff

           // for now, we just mess with the search text
           let currentText = stateObj.text;
           let uppercaseText = currentText.toUpperCase();

           return `You are searching for ${uppercaseText}`;

    });
</script>

<p>You're searching for {resultString}</p>

Simple Demo (REPL): Share $state between components (simple)

Usage with bind:value

As you might already know, there is no need to write change handler functions for text inputs. You can just use bind:value to update the state automatically when text is entered:

<!-- App.svelte -->
<script>
import { searchTextState } from './data.svelte.js';
<script>

<SearchInput bind:stateObjPropToChange={searchTextState.text} />

<!-- SearchInput.svelte -->

<script>
    let {stateObjPropToChange = $bindable() } = $props();
</script>

<label>
   Search text:
   <input bind:value={stateObjPropToChange} />
</label>

Make sure to use bind: when passing the prop to the component and use $bindable() when receiving the prop in the component.

Usage with bind:group

Multiple checkbox inputs can be handled with Svelte via bind-group=.

To use bind:group with shared state, make sure to use bind: when passing the prop to the component:

// state.svelte.js 
export const selectedColorsState = $state({selectedValues: []});

<!-- App.svelte -->
<FilterCheckboxes 
    title="Colors" 
    availableOptions={availableColorOptions} 
    bind:statePropToBind={selectedColorsState.selectedValues}
/>

And make sure to use $bindable() when receiving the prop in the component:

<!-- FilterCheckboxes.svelte -->
<script>
    let { 
        title, 
        availableOptions, 
        // important: you need to receive a bindable here, 
        // to update states back to parent components
        statePropToBind = $bindable() 
    } = $props();
</script>

Simple Demo (REPL): Search and filter with checkbox group components and v5 $state & $derived

But beware, the [Svelte docs for bind:group] state:

bind:group only works if the inputs are in the same Svelte component.

If you have two components with different values for selection, bind-group won't work. You should split this into separate states. See bind:group does not work with nested components #2308 for more details.

Disclaimer: If you want to use filter checkboxes with URL params (query parameters) in SvelteKit, it might be easier to derive the global state from page.url.searchParams via import {page} from$app/stateand$derived`. See https://github.com/mandrasch/svelte-nobel-prize-demo for more details.

Summary

There is a big difference between using $state() inside one file (one scope) - or using $state() as export / import.

Happy to get your (critical) feedback on this article! 🙏

More resources

Demos:

New: https://github.com/SikandarJODD/youva
Very basic $state example
Share $state between components (simple)
Search and filter with checkbox group components and v5 $state & $derived (WIP)
Full SvelteKit example: https://github.com/mandrasch/austrian-web-dev-companies (WIP)

Advanced: Use SvelteSet, SvelteMap, SvelteDate, etc.

Okay, objects are fine and handled by Svelte automagically - we got it.

But what about Date, URL and more built-in objects of standard JavaScript? And if you're more experienced in JavaScript, you might know that there are some more advanced data types (standard built-in objects):

The Set object lets you store unique values of any type, whether primitive values or object references.
The Map object holds key-value pairs and remembers the original insertion order of the keys.

If you want to use these with reactive $state, you need to use their corresponding Svelte wrapper from svelte/reactivity

MediaQuery
SvelteDate
SvelteMap
SvelteSet
SvelteURL
SvelteURLSearchParams

The reason there is a separate SvelteSet and SvelteMap class (instead of just rewriting it automatically like they do with objects and arrays) is because they wanted to draw a line somewhere since they can't proxy every conceivable object. See Reactive Map, Set, Date and URL #10263 for technical details.

How can you use it? Simple as that:

svelte // sharedState.svelte.js import { SvelteSet } from 'svelte/reactivity' export const selectedColors = new SvelteSet(['red'])

But beware: If you want to output a SvelteSet, make sure to use this (or use the new [$inspect])(https://svelte.dev/docs/svelte/$inspect):

{JSON.stringify({selectedColors: [... selectedColors]})}

Acknowledgements

Thanks very much to Mat Simon and hfcRed (Svelte Discord)!

CraftCMS Launchpad - interactive CraftCMS demos in your browser

Matthias Andrasch — Thu, 12 Sep 2024 06:33:32 +0000

I had some time on the weekend and did the first prototype of: CraftCMS Launchpad - interactive CraftCMS demos in your browser, powered by DDEV (Docker).

https://craftcms-launchpad.mandrasch.eu/

The project is inspired by https://astro.new/latest/ - in JS-land it's totally common to have a lot of demos launchable in your browser, a thing I missed a bit in the Craft Community.

Happy to receive feedback & if you have cool demos or starters, please let me know!

Install Laravel with Vite support in DDEV (Docker)

Matthias Andrasch — Sun, 19 May 2024 09:18:57 +0000

You want to start developing with Laravel in DDEV and Docker - including Vite support? It's easy!

1. Setup a new DDEV project

Create your new folder and switch to it:

mkdir my-laravel-site && cd my-laravel-site

Now it's time to create a new DDEV project configuration, the most simple starting point would be:

ddev config --project-type=laravel --docroot=public

This commands creates the .ddev/config.yaml configuration file (which can be shared with team members in git):

name: my-laravel-site
type: laravel
docroot: public
php_version: "8.2"
webserver_type: nginx-fpm
xdebug_enabled: false
additional_hostnames: []
additional_fqdns: []
database:
    type: mariadb
    version: "10.11"
use_dns_when_possible: true
composer_version: "2"
web_environment: []
corepack_enable: false

You can also choose other database types and version, as well as your PHP and NodeJS version of choice:

# MySQL v8.0, PHP 8.2, NodeJS 20
ddev config --project-type=laravel --docroot=public --php-version="8.2" --database="mysql:8.0" --nodejs-version="20"

# PostgreSQL v16, PHP 8.2, NodeJS 20
ddev config --project-type=laravel --docroot=public --php-version="8.2" --database="postgres:16" --nodejs-version="20"

# MariaDB 10.11, PHP 8.2, NodeJS 20
ddev config --project-type=laravel --docroot=public --php-version="8.2" --database="mariadb:10.11" --nodejs-version="20"

You can either do this via CLI command - or just edit the .ddev/config.yaml file itself. See config.yaml options for more information.

For NodeJS, you can also use use a specific version to avoid "it works on my machine" problems or edge cases: --nodejs-version="20.12.1".

Btw: There is also support for the new SQLite defaults of laravel, see DDEV docs for more information.

Run ddev start to launch your new project 🚀

2. Install Laravel

Run this command to install the latest stable laravel:

ddev composer create laravel/laravel

If you want to install a specific version, use:

ddev composer create "laravel/laravel:^11"

The database connection settings in .env will be automatically inserted by ddev. Btw: You can view your database with viewers like ddev sequelace, ddev dbeaver, ddev tableplus, etc.

Run ddev launch to open the welcome page in your browser.

3. Add Vite support

The newer laravel versions already have a Vite integration, there are just a two tweaks needed for usage in DDEV:

First, we need to expose the Vite port 5173 in our Docker container. Add this to the .ddev/config.yaml-file:

web_extra_exposed_ports:
  - name: node-vite
    container_port: 5173
    http_port: 5172
    https_port: 5173

A ddev restart is needed afterwards. ⚠️

Secondly, we need to adjust the vite.config.js file:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

const port = 5173;
const origin = `${process.env.DDEV_PRIMARY_URL}:${port}`;

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
    // Adjust Vites dev server to work with DDEV
  // https://vitejs.dev/config/server-options.html
  server: {
    // Respond to all network requests
    host: "0.0.0.0",
    port: 5173,
    strictPort: true,
    // Defines the origin of the generated asset URLs during development, this must be set to the
    // Vite dev server URL and selected port. In general, `process.env.DDEV_PRIMARY_URL` will give
    // us the primary URL of the DDEV project, e.g. "https://test-vite.ddev.site". But since DDEV
    // can be configured to use another port (via `router_https_port`), the output can also be
    // "https://test-vite.ddev.site:1234". Therefore we need to strip a port number like ":1234"
    // before adding Vites port to achieve the desired output of "https://test-vite.ddev.site:5173".
    origin: `${process.env.DDEV_PRIMARY_URL.replace(/:\d+$/, "")}:5173`,

    // 👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇
    // Configure CORS securely for the Vite dev server to allow requests from *.ddev.site domains,
    // supports additional hostnames (via regex). If you use another `project_tld`, adjust this.
    cors: {
      origin: /https?:\/\/([A-Za-z0-9\-\.]+)?(\.ddev\.site)(?::\d+)?$/,
    },
  },
});

Great, you can now run:

ddev npm install
ddev npm run dev

By running ddev npm run dev, laravel will automatically generate a public/hot file which points to the Vite devserver and port.

4. Develop with Vite

The default welcome template of Laravel has no Vite integration yet.

Replace resources/views/welcome.blade.php with something like this:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Include JS and CSS via vite, see https://laravel.com/docs/11.x/vite -->
    @vite('resources/js/app.js')
</head>

<body>

    <h1>Hello, vite!</h1>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</body>

</html>

Also import the app.css file in resources/js/app.js:

import './bootstrap';
import "../css/app.css";

And finally - add some styles to resources/css/app.css:

body{
    color: blueviolet;
}

If you open https://my-laravel-site.ddev.site/, you should immediately see style changes provided by Vite when you edit your css or js files.

You can check out a full demo repository here: https://github.com/mandrasch/ddev-laravel-vite

Please let me know if there could be any improvements to this guide! Have fun developing!

The golden rule of "ddev ..."

When working with DDEV, please make always sure to use ddev ... in front of commands such as ddev composer, ddev npm (or ddev yarn), etc.

Otherwise your commands will be executed with your local computers PHP or NodeJS, not in the Docker container (which is the whole point of DDEV). You can also jump into the web container with ddev ssh.

More resources

DDEV Discord: https://discord.gg/5wjP76mBJD
Demo: https://github.com/mandrasch/ddev-laravel-vite
Demo: https://github.com/mandrasch/ddev-laravel-breeze-vite
Demo: https://github.com/mandrasch/ddev-laravel-breeze-livewire
config.yaml options
Vite + DDEV Guide: https://ddev.com/blog/working-with-vite-in-ddev/
DDEV quickstart docs: https://ddev.readthedocs.io/en/stable/users/quickstart/#laravel

Deploy SvelteKit with SSR on Coolify (Hetzner VPS)

Matthias Andrasch — Sat, 27 Apr 2024 12:25:08 +0000

This is my first quick try deploying SvelteKit with the open source software Coolify.

Coolify is an "open-source & self-hostable Heroku / Netlify / Vercel alternative". It is developed by Andras Bacsai.

The advantage of Coolify compared to other awesome server management tools like ploi.io (SvelteKit ploi.io tutorial), Cleavr or Laravel Forge is that you can install it directly on your VPS without additional subscription costs. This is especially great for low budget or small hobby projects.

My demo specs:

VPS: Hetzner Cloud CPX11 (AMD) - €4,35/month
Coolify v4.0.0-beta.297

Update: ARM might be a faster choice.

Install selfhosted Coolify on Hetzner VPS

Just create a new CPX11 cloud server on hetzner, connect via SSH (ssh root@your-server-ip) and run the command from https://coolify.io/self-hosted:

curl -fsSL https://cdn.coollabs.io/coolify/install.sh | bash

That's really it. After install, you can create your admin user via http://your-vps-server-ip:8000/. See this slightly older YouTube video for full example: https://www.youtube.com/watch?v=Jg6SWqyvYys

Prepare the SvelteKit demo app

You can also use my demo repository: https://github.com/mandrasch/sveltekit-demo-app-adapter-node

Create a git repository, use the official SvelteKit installer, select demo app when asked: npm create svelte@latest . Install dependencies via npm i.

Important: Install adapter-node via npm i -D @sveltejs/adapter-node and switch from adapter-auto to adapter-node in svelte.config.js:

import adapter from '@sveltejs/adapter-node';

export default {
    kit: {
        adapter: adapter()
    }
};

This is needed for SSR support on Coolify. See SvelteKit docs for more information on adapter-node: https://kit.svelte.dev/docs/adapter-node

Commit and push all your changes to your GitHub repository.

Create a new project in Coolify

Let's get the party started by creating a new project:

Select production:

Add a new resource:

Select "public repository":

Select localhost and destination, there is only one option to select anyway ;-)

Paste your repository URL, I used my repository https://github.com/mandrasch/sveltekit-demo-app-adapter-node:

Click "check" and continue with these default settings:

Now we configure the install, build and start command. Use the following commands:

Install: npm ci
Build: npm run build
Start: node build

Important: Don't forget to hit "Save" (!)

You could also use npm ci --omit dev, but that only works if you really don't need any of your dev dependencies. See SvelteKit docs for more information: https://kit.svelte.dev/docs/adapter-node

Switch to https and set ORIGIN

The deployment with http:// would be okay, but two important things are missing:

https support, otherwise cookies won't work
setting the ORIGIN (via environment variables)

For https, just switch the temporary sslip.io domain to https:// and hit 'Save'(!):

Now we need to set the ORIGIN, otherwise SvelteKit can't really detect its own domain - this will likely cause Cross-site POST form submissions are forbidden errors.

Important: The node-adapter docs state that you can use ORIGIN=... node build as start command, but this did not work on Coolify (guess because of Docker).

Instead add a new env variable here (!):

Now it's time for the first deployment, just hit the "Deploy" button and use "Show debug logs" for all information:

Don't get confused by red error messages, I guess these are false positives:

After this is finished, the status in Coolify should switch to "Running" and you should able to play Sverdle (which is implemented via SSR) on your newly created site 🎉

Add swap space to prevent "out of memory"

I sometimes ran into "502 Bad Gateway" and 200% CPU load after hitting "Deploy" - while I had other (PHP + MySQL) resources running on my Coolify instance. I asked the Coolify Developer on GitHub and he gave me multiple suggestions.

I decided to try the swap option - Swap is disabled by default on Hetzner VPS (see: reddit discussion)

I followed this guide (for ubuntu) and added 6GB swap space (since I only had 17G left on my small VPS) https://www.digitalocean.com/community/tutorial-collections/how-to-add-swap-space.

Multiple projects running + builds at the same time now seem to work fine now. 🎉

Connect a real domain

You can set the domain of your coolify instance in Settings, just point an A-Record to your servers IP.

You can also point *.my-coolify-server.example.com to your server and use this as wildcard for project URLs.

Let's encrypt HTTPS certificates are managed automatically by Coolify - but only if your domain is in "Domains", see below.

Use www- and non-www domain / redirect

If you want to use both www and non-www domain, you need to set them both here - otherwise the letsencrypt certificate is not generated for both variants.

Here I use two domains and redirect www- to non-www:

Don't forget to hit the "Set direction" button as well. See this for more information: https://coolify.io/docs/knowledge-base/traefik/redirects

See Coolify requirements for more information. The good thing is that you can always upscale/downscale the resources for Hetzner Cloud VPS (as far as I know).

Have fun with selfhosting!

Disclaimer: If you want to use this setup in production, please take measures to secure your VPS like adding a firewall on hetzner. See e.g. 5 Easy Steps to Secure your Cloud Server 🔒.

Docs and more resources**

https://coolify.io/docs/resources/applications/svelte-kit
https://kit.svelte.dev/docs/adapter-node
https://nixpacks.com/docs/providers/node
Coolify crash course Self Host 101 - Set up Coolify | Self Hosted PaaS with Zero Config Deployments (YouTube)
General tutorial: Deploy Node.js applications on a VPS using Coolify

Install Craft CMS v4 with one command via DDEV

Matthias Andrasch — Wed, 24 Jan 2024 19:54:46 +0000

2023 was another great year for Craft CMS: 2023 in Review. There are now over 8'000 developers registered in Craft Discord according to the latest State of Craft talk by Brandon Kelly.

Do you want to try it quickly?

Looking for Craft v5?

Requirements

If you haven't installed a Docker runtime, you might be happy with Orbstack. Other alternatives: DDEV docs: Docker installation.

Afterwards you can simply install DDEV via homebrew (on Mac):

brew install ddev/ddev/ddev && mkcert -install

Check if it was successful with ddev -v.

For other operating systems see DDEV docs for setup instructions.

Install CraftCMS v4

Get the latest CraftCMS v4 version with this one command:

mkdir craft4-ddev && \ 
  cd craft4-ddev && \
  ddev config \
    --project-type=craftcms \
    --docroot=web \
    --create-docroot \
    --php-version="8.2" \
    --database="mysql:8.0" \
    --nodejs-version="20" && \
  ddev start -y && \
  ddev composer create -y --no-scripts --no-interaction "craftcms/craft:^4" && \
  ddev craft install/craft \
    --username=admin \
    --password=password123 \
    --email=admin@example.com \
    --site-name=Testsite \
    --language=en \
    --site-url='$DDEV_PRIMARY_URL' && \
  echo 'Nice, ready to launch!' && \
  ddev launch

You will be greeted with the default index template:

You can also open the backend via

ddev launch /admin

and login via admin and password123.

Automate it

You can take this one step further and generate the folder (and therefore project names) dynamically. Thanks very much to August Miller for this recommendation!

TIMESTAMP_FOLDER=$(date +'%Y%m%d-%H%M'); mkdir "craft4-$TIMESTAMP_FOLDER" && cd "craft4-$TIMESTAMP_FOLDER" && \
ddev config \
    --project-type=craftcms \
    --docroot=web \
    --create-docroot \
    --php-version="8.2" \
    --database="mysql:8.0" \
    --nodejs-version="20" && \
ddev start -y && \
ddev composer create -y --no-scripts --no-interaction "craftcms/craft:^4" && \
ddev craft install/craft \
    --username=admin \
    --password=password123 \
    --email=admin@example.com \
    --site-name=Testsite \
    --language=en \
    --site-url='$DDEV_PRIMARY_URL' && \
echo 'Nice, ready to launch!' && \
ddev launch

But beware to not fill up your local harddrive too much. Delete DDEV projects with ddev delete (or ddev delete -O without snapshot) and keep your projects organized with ddev list. You can also use ddev delete -O <project-name>.

Try it out online with GitHub Codespaces

If you don't want to install Craft CMS v4 locally, you could also launch a new Github Codespace instance here:

https://github.com/mandrasch/launch-codespace-with-ddev

Paste the command from above into the terminal:

Open port 8080 (web) in the simple browser or in a new browser tab in the ports section:

Have fun trying out Craft CMS!

More Resources:

Install Craft CMS v5 with one command via DDEV

Matthias Andrasch — Sun, 07 Jan 2024 13:03:30 +0000

The new major version 5 of Craft CMS will introduce a lot of new features and improvements. See all changes here: Craft 5 Beta Released.

Do you already want to try the new version? It is super simple with DDEV - just paste one command into your terminal!

Update: Craft5 is released - https://craftcms.com/blog/craft-5. The commands in this article are updated for the latest stable v5 version 🎉

What is Craft CMS?

Craft CMS is a flexible Content Management System with an awesome authoring experience (AX) as well as powerful features for developers and designers alike. 2023 was another great year for Craft CMS: 2023 in Review. There are now over 8'000 developers registered in Craft Discord - according to the latest State of Craft talk by Brandon Kelly.

Requirements

If you haven't installed a Docker runtime, you might be happy with Orbstack. Other alternatives: DDEV docs: Docker installation.

Afterwards you can simply install DDEV via homebrew (on Mac):



brew install ddev/ddev/ddev && mkcert -install

Check if it was successful with ddev -v.

For other operating systems see DDEV docs for setup instructions.

Install CraftCMS v5

Get the latest CraftCMS v5 version with this one command:



mkdir craft5-ddev && \ 
  cd craft5-ddev && \
  ddev config \
    --project-type=craftcms \
    --docroot=web \
    --create-docroot \
    --php-version="8.2" \
    --database="mysql:8.0" \
    --nodejs-version="20" && \
  ddev start -y && \
  ddev composer create -y --no-scripts craftcms/craft && \
  ddev craft install/craft \
    --username=admin \
    --password=password123 \
    --email=admin@example.com \
    --site-name=Testsite \
    --language=en \
    --site-url='$DDEV_PRIMARY_URL' && \
  echo 'Nice, ready to launch!' && \
  ddev launch

You will be greeted with the default index template:

You can also open the backend via



ddev launch /admin

and login via admin and password123.

Automate it

You can take this one step further and generate the folder (and therefore project names) dynamically. Thanks very much to August Miller for this recommendation!



TIMESTAMP_FOLDER=$(date +'%Y%m%d-%H%M'); mkdir "craft5-$TIMESTAMP_FOLDER" && cd "craft5-$TIMESTAMP_FOLDER" && \
ddev config \
    --project-type=craftcms \
    --docroot=web \
    --create-docroot \
    --php-version="8.2" \
    --database="mysql:8.0" \
    --nodejs-version="20" && \
  ddev start -y && \
  ddev composer create -y --no-scripts craftcms/craft && \
  ddev craft install/craft \
    --username=admin \
    --password=password123 \
    --email=admin@example.com \
    --site-name=Testsite \
    --language=en \
    --site-url='$DDEV_PRIMARY_URL' && \
  echo 'Nice, ready to launch!' && \
  ddev launch

Try it out online with GitHub Codespaces

If you don't want to install Craft CMS v5 locally, you could also launch a new Github Codespace instance here:

https://github.com/mandrasch/launch-codespace-with-ddev

Paste the command from above into the terminal:

Open port 8080 (web) in the simple browser or in a new browser tab in the ports section:

Have fun trying Craft CMS v5 out!

More Resources:

Want to try CraftCMS stable with one command?

https://dev.to/mandrasch/install-craft-cms-v4-with-one-command-via-ddev-32da

Rive: Better collaboration between designers and developers on interactive animations?

Matthias Andrasch — Sun, 24 Dec 2023 11:21:23 +0000

How do interactive designers work hand in hand with web developers? This seems to be a tough nut to crack since Adobe Flash was discontinued.

Rive promises a new way of enabling collaboration between design and development with their State Machine approach: Designers are able to create states and events for their animation - and developers can trigger these from outside (via JavaScript). 🤝

Here is a good, brief example to trigger a state via JS (react) by Anthony Rimet:

const isHandsUpInput: StateMachineInput | null = useStateMachineInput(
        riveInstance,
        STATE_MACHINE_NAME,
        'hands_up',
    );

// ...

<input
    onFocus={() => (isHandsUpInput!.value = true)}
    onBlur={() => (isHandsUpInput!.value = false)}
/>

Full tutorial: "Rive: Animate Web UIs with State Machines" - Anthony Rimet

In this podcast episode, one of the Rive founders - Guido Rosso - shares their vision: "Is this the new Flash? Rive and the future of interactive design" - School of Motion Podcast

Spotify https://open.spotify.com/episode/64pOVsEV32RAcgHJo4sSIt

"Intro To Interactive Animation In Rive | UI Animation Tool" - School of Motion:

A comparison between Rive and Lottie (by Rive): https://rive.app/blog/rive-as-a-lottie-alternative

Although it has to be said that Lottie is an Open Source animation format whereas Rives file format is proprietary. Only the Rive runtimes are Open Source.

Check out Rive here: https://rive.app/

Let's see how this will play out in 2024. 🪄

Thanks very much to motion designer Olga Vikhrova for sharing the podcast episode about Rive with me - check out Olgas amazing work here: https://www.instagram.com/olga_a_vikhrova/

Forem: Matthias Andrasch

Deploy and run Nuxt SSR websites via Laravel Forge (and Hetzner)

What is server side rendering (SSR)?

Let's try Nuxt.js on Forge

Laravel VPS servers

External VPS providers

Add your first server

Create the nuxt sample website

Deploy / host it via Forge

First deploy

Adjust deploy script

Set environment variables

Background processes and scheduler

Commands

Heartbeat and Logs

Other options

Redis installed by default

Summary

What's next?

Similiar services

Read more:

Simple Coolify example with Docker Compose + Github

What is Coolify?

Install selfhosted Coolify on Hetzner VPS

Add swap space to prevent "out of memory"

A simple Docker Compose example

Create a new resource in Coolify

docker-compose.production.yaml

Dockerfile.prod

web/

Create a temporary domain

Hit deploy

Open it

⚠️ Working with mounts ⚠️

Next tutorials

DDEV and PhpStorm's NodeJS Remote Interpreter for ESLint, Prettier, Tailwind, etc.

Workaround: Use a remote Docker image

Vite is suddenly not working due to CORS error? 🧐 (DDEV)

Set it securely for DDEV

Other tools (Laravel Valet, Laravel Herd, etc.)

Security note ⚠️

PHP frameworks and CMSes

Craft CMS

Laravel Vite plugin

TYPO3

Related links:

Acknowledgements

Optimize external / dynamic images on-the-fly in SvelteKit

Paid CDNs

Selfhost an image optimizer

Selfhost ipx (within SvelteKit)

Selfhost imgproxy

Other alternatives?

Svelte 5: Share state between components (for Dummies)

For exports, use $state with Objects - not Strings!

Beware: Don't re-assign Objects outside of their scope

Advanced: Use classes

Share state between components

Usage with bind:value

Usage with bind:group

Summary

More resources

Demos:

Advanced: Use SvelteSet, SvelteMap, SvelteDate, etc.

Acknowledgements

CraftCMS Launchpad - interactive CraftCMS demos in your browser

Install Laravel with Vite support in DDEV (Docker)

1. Setup a new DDEV project

2. Install Laravel

3. Add Vite support

4. Develop with Vite

The golden rule of "ddev ..."

More resources

Deploy SvelteKit with SSR on Coolify (Hetzner VPS)

Prepare the SvelteKit demo app

Create a new project in Coolify

Switch to https and set ORIGIN

Add swap space to prevent "out of memory"

Connect a real domain

Docs and more resources**