Running Wasp on UBI9

0-intro.md

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
   • There might be a less violet way to do this (using the existing Dockerfile extensions method) but I found this to be easiest to implemnet
4. Building the container and running it (confirming it works)

Additional step: Setting up the main.wasp to support serving the client from the Express app. We need to modify the app so we can use only a single container.

Known Issues

1. History based routing doesn't work (Going to / will load the index.html, but going to /page won't!)
   • It's probably possible to fix this without modifying Wasp
   • ... but it's probably better for us to enable 1st party support for using a single container

1-build.sh

# Put this at the root of the project

### Building the container

# Build the app
wasp build

# Build the web-app (we serve the backend at 8080)
cd .wasp/build/web-app && REACT_APP_API_URL=http://localhost:8080 npm run build && cd -

# Override the Dockerfile
cp Dockerfile .wasp/build

### Testing the container

# Build the container
cd .wasp/build && docker build . -t recipe-test && cd -

# Running the container to test, make sure to have a PostgreSQL instance running
docker run -p 8080:8080 -e DATABASE_URL=postgresql://postgres@host.docker.internal:5432/testx recipe-test

2-Dockerfile

# Put this at the root of the project

FROM --platform=linux/amd64 registry.access.redhat.com/ubi9/nodejs-18 AS builder

# Server the backend at port 8080
ENV PORT=8080

USER root

WORKDIR /app

COPY . .

# 4: Copying the web-app build to the server public folder
RUN mkdir -p server/public
RUN cp -r web-app/build/* server/public

RUN cd server && npm install
COPY db/schema.prisma ./db/
RUN cd server && PRISMA_CLIENT_OUTPUT_DIR=../server/node_modules/.prisma/client/ npx prisma generate --schema='../db/schema.prisma'
RUN cd server && npm run build

WORKDIR /app/server

ENTRYPOINT ["npm", "run", "start-production"]

3-main.wasp

app recipeTest {
  wasp: {
    version: "^0.11.5"
  },
  title: "recipe-test",
  db: {
    system: PostgreSQL
  },
  // 1: This way we can override the default "/" route (to serve our client index.html)
  //    but it's not enough to support all static assets
  server: {
    middlewareConfigFn: import { getMiddleware } from "@server/middleware.js"
  }
}

// 2: We need to set the middleware here as well to serve the CSS and JS properly
apiNamespace root {
  path: "/",
  middlewareConfigFn: import { getMiddleware } from "@server/middleware.js",
}

// 3: Namespace middlewares are not applied if there are no APIs (Wasp limitation atm)
api mockApi {
  httpRoute: (GET, "/mock-api"),
  fn: import { mockApi } from "@server/mockApi.js"
}

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

query getStuff {
  fn: import { getStuff } from "@server/stuff.js",
  entities: [Test]
}

entity Test {=psl
  id String @id @default(uuid())
  name String
psl=}

4-middleware.ts

import express from "express";
import { MiddlewareConfigFn } from "@wasp/middleware/index.js";

export const getMiddleware: MiddlewareConfigFn = (config) => {
  // @ts-ignore
  const staticPath = new URL("../../public", import.meta.url).pathname; // We created this folder

  config.set("static", express.static(staticPath));

  return config;
};

5-mockApi.ts

import { MockApi } from "@wasp/apis/types";

export const mockApi: MockApi = (_req, _res, _context) => {};