Mihovil Ilakovac infomiho

Using ShadCN with Wasp 0.12 and beyond

Note

We'll be loosly following the Vite instructions for ShadCN since Wasp is using Vite + React: https://ui.shadcn.com/docs/installation/vite We'll skip some of the steps since they don't apply or they are done differently with Wasp.

You won't be able to use the @ alias setup since it's not currently supported by Wasp. Because of this you'll need to adjust some imports when we generate components, but it should be fairly straightforward to do.

1. Enable TailwindCSS if you haven't already

Deploying a Wasp app to a VPS

Let's deploy a Wasp app directly to a VPS. We'll do things directly on the machine without any management dashboard.

We'll need a couple of things to get this going:

a VPS (I'll be using Hetzner, but it doesn't matter which provider you use)
a domain name (mostly to have HTTPS)

Our setup will look like this:

Ubuntu LTS

Self-hosting is a great way to have control over your deployment infrastructure (you own the data) and a great way to keep the costs down (you pay a fixed amount per month). One of the smoothest way to manage your self-hosted deployment is Coolify.

Deploying Wasp apps to Coolify is straightforward:

create your Coolify apps (client, server and db)
build your app's Docker images (e.g. using Github Actions),
trigger Coolify to pull the Docker images and deploy them.

It'll take you ~1 hour depending on your level of experience with servers and Github Actions.

Installing Coolify

Self-hosting is a great way to have control over your deployment infrastructure (you own the data) and a great way to keep the costs down (you pay a fixed amount per month). One of the well established ways to manage your self-hosted deployment is Caprover.

Deploying Wasp apps to Caprover is straightforward:

create your Caprover apps (client, server and db)
build your app's Docker images (e.g. using Github Actions),
trigger Caprover to pull the Docker images and deploy them.

It'll take you ~1 hour depending on your level of experience with servers and Github Actions.

Installing Caprover

Sentry is a useful tool to track errors that appear in your Wasp application.

Let's see how we can integrate it on the server and the client.

Sign up for Sentry

Make sure you have an account.

	app fontsTest {
	wasp: {
	version: "^0.12.3"
	},
	title: "fontsTest",
	client: {
	rootComponent: import { App } from "@src/App.jsx"
	}
	}

	# Put some dummy values here
	GOOGLE_CLIENT_ID=x
	GOOGLE_CLIENT_SECRET=x

	# Put your Spotify client ID and secret here
	SPOTIFY_CLIENT_ID=
	SPOTIFY_CLIENT_SECRET=

	app apiAuth {
	wasp: {
	version: "^0.14.0"
	},
	title: "api-auth",
	auth: {
	userEntity: User,
	onAuthFailedRedirectTo: "/login",
	onAuthSucceededRedirectTo: "/",
	methods: {

	app corsTest {
	wasp: {
	version: "^0.14.0"
	},
	title: "cors-test",
	server: {
	middlewareConfigFn: import { getGlobalMiddleware } from "@src/data",
	}
	}

	const fs = require('fs');
	const path = require('path');

	/**
	* Main function to sync redirects from the appropriate docs version to static directory
	*/
	function syncRedirects() {
	try {
	const isDevMode = checkDevelopmentMode();
	const staticRedirectsPath = getStaticRedirectsPath();