Mihovil Ilakovac infomiho

Executed the following commands:

wasp new chakra-v3
npm i @chakra-ui/react @emotion/react
npx @chakra-ui/cli snippet add

Added the App.tsx with the Chakra provider component.

Added {/* @ts-ignore */} in the two component files (there are some tsconfig.json incompatibilites between Wasp and Chakra v3.

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.

Create a project for your server app

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

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

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

	app axiosTest {
	wasp: {
	version: "^0.16.0"
	},
	title: "axios-test",

	auth: {
	userEntity: User,
	methods: {
	usernameAndPassword: {}, // This is a very naive implementation, use 'email' in production instead

	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();

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

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

	# 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=