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.

We'll skip 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

infomiho

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

infomiho

app radixui {
  wasp: {
    version: "^0.12.3"
  },
  title: "radixui",
  client: {
    rootComponent: import { Layout } from "@src/Layout",
  }
}

infomiho

app fileUpload {
  wasp: {
    version: "^0.12.3"
  },
  title: "file-upload",
}

route RootRoute { path: "/", to: MainPage }
page MainPage {
  component: import { MainPage } from "@src/MainPage.jsx"

infomiho

Caprover

You'll need a Caprover server setup.

Then create three apps for your Wasp app:

1. server
2. client
3. Postgres DB
   • go to one click apps/dbs and create a vanilla PostgreSQL

infomiho

import { useEffect } from "react";
import "./Main.css";

import { useMessagesSocket, useSocketListener } from "./websockets";

const MainPage = () => {
  const { socket, isConnected } = useMessagesSocket();
  useSocketListener(socket, "chatMessage", (message) => {
    console.log("message received: ", message);
  });

infomiho

Building Wasp for Red Hat's UBI9 image can be done with a custom Docker file and with a few simple steps that we encoded in the build.sh script.

Just put both the build.sh script and the Dockerfile at the root of your Wasp project. Make sure to make the build.sh executable with chmod +x build.sh.

There is also a test.sh script that builds the Docker image and runs it (to make sure it works)

infomiho

We will go through the needed steps to deploy Wasp on a single UBI9 image.

The How

Building is done with the build.sh file:

1. wasp build on the user's computer
2. Building the client app
3. Overriding the default Dockerfile

infomiho

@tailwind base;
@tailwind components;
@tailwind utilities;

infomiho

made with esnextbin