Path based routing and docker compose config update for local dev

These changes do not work well on windows and the compose.yml file as well as env vars will need to be tweaked for local dev when deploying the website in docker versus using yarn dev

.env.sample

@@ -1,5 +1,5 @@
 POSTGRES_DB=postgres
-POSTGRES_HOST=database
+POSTGRES_HOST=localhost
 POSTGRES_PASSWORD=postgres
 POSTGRES_USER=postgres
 DATABASE_URL="postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@${POSTGRES_HOST}/${POSTGRES_DB}"
@@ -9,6 +9,7 @@ JWT_HASHING_ALGO=HS512
 JWT_EXPIRES_IN_SECONDS_LONG_LIVED=2592000
 JWT_EXPIRES_IN_SECONDS_SHORT_LIVED=120
 
+ABANDON_AUTH_URL=http://localhost:8000
 ABANDON_AUTH_SITE_URL=http://localhost:3000
 
 ABANDON_AUTH_DISCORD_REDIRECT=

compose.yml

@@ -1,6 +1,7 @@
 services:
 
   abandonauth:
+    network_mode: "host"
     build:
       context: src/api
       dockerfile: Dockerfile
@@ -10,13 +11,12 @@ services:
       - ".env"
     depends_on:
       - database
-    ports:
-      - "8000:80"
     volumes:  # mount the source code as a volume, so we can use hot reloading
       - "./src/api/abandonauth:/app/abandonauth:ro"
       - "./prisma:/app/prisma:ro"
 
   website:
+    network_mode: "host"
     build:
       context: ./src/website
       dockerfile: Dockerfile
@@ -25,20 +25,17 @@ services:
         ABANDON_AUTH_DEVELOPER_APP_ID: ${ABANDON_AUTH_DEVELOPER_APP_ID}
         GITHUB_REDIRECT: ${GITHUB_REDIRECT}
         DISCORD_REDIRECT: ${DISCORD_REDIRECT}
-    ports:
-        - "3000:3000"
 
   database:
     image: "postgres:${POSTGRES_VERSION:-15-alpine}"
+    network_mode: "host"
     volumes:
       - postgres_data:/var/lib/postgresql/data/
     healthcheck:
       test: [ "CMD-SHELL", "pg_isready -U postgres" ]
       interval: 2s
       timeout: 1s
       retries: 5
-    ports:
-      - "127.0.0.1:5432:5432"
     environment:
       - "POSTGRES_HOST=${POSTGRES_HOST}"
       - "POSTGRES_PASSWORD=${POSTGRES_PASSWORD}"

src/api/Dockerfile

@@ -8,12 +8,12 @@ ADD ./abandonauth ./abandonauth
 ADD ./prisma ./prisma
 RUN poetry run prisma generate
 
-EXPOSE 80
+EXPOSE 8000
 
 # Pull the uvicorn_extra build arg and ave it as an env var.
 # The CMD instruction is ran at execution time, so it also needs to be an env var, so that it is available at that time.
 ARG uvicorn_extras=""
 ENV uvicorn_extras=$uvicorn_extras
 
 ENTRYPOINT ["/bin/bash", "-c"]
-CMD ["poetry run uvicorn abandonauth:app --host 0.0.0.0 --port 80 $uvicorn_extras"]
+CMD ["poetry run uvicorn abandonauth:app --host 0.0.0.0 --port 8000 $uvicorn_extras"]

src/api/abandonauth/routers/ui.py

@@ -13,7 +13,7 @@
 
 router = APIRouter(prefix="/ui")
 
-BASE_URL = "http://localhost"
+BASE_URL = "http://localhost:8000"
 
 
 COOKIE_DOMAIN_URL = "." + ".".join(urlparse(settings.ABANDON_AUTH_SITE_URL).netloc.split(".")[-2:])

src/api/prisma/migrations/20240415115059_add_test_user/migration.sql

@@ -15,9 +15,6 @@ CREATE TABLE "TestUser" (
     CONSTRAINT "TestUser_pkey" PRIMARY KEY ("id")
 );
 
--- CreateIndex
-CREATE UNIQUE INDEX "CallbackUri_developer_application_id_uri_key" ON "CallbackUri"("developer_application_id", "uri");
-
 -- CreateIndex
 CREATE UNIQUE INDEX "User_id_username_key" ON "User"("id", "username");
 

src/website/components/LoginButton.vue

@@ -10,10 +10,6 @@
 </template>
 
 <script setup lang="ts">
-const config = useRuntimeConfig();
-
-const loginCallbackUri = `${config.public.abandonAuthUrl}/ui`
-
 defineProps<{
     title: string,
     redirectUrl: string,

src/website/layouts/dashboard.vue

@@ -20,7 +20,7 @@
 
           <ul class='pt-4 mt-4 space-y-2 border-t-2 border-primary/20'>
             <li class="px-7">
-              <NavLinkButton title="Documentation" :href="abandonAuthUrl + '/docs'" :linkIcon="faBookOpen" target="_blank" />
+              <NavLinkButton title="Documentation" href="/api/docs" :linkIcon="faBookOpen" target="_blank" />
             </li>
           </ul>
 
@@ -49,10 +49,8 @@
   const router = useRouter()
   const authCookie = useCookie("Authorization")
 
-  const { abandonAuthUrl, loginPath } = config.public;
-
   async function handleLogout() {
     authCookie.value = null
-    await router.push(loginPath)
+    await router.push(config.public.loginPath)
   }
   </script>

src/website/nuxt.config.ts

@@ -1,14 +1,17 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
+  nitro: {
+    devProxy: {
+      '/api': process.env.ABANDON_AUTH_URL,
+    },
+  },
   devtools: {
     enabled: true,
-
     timeline: {
       enabled: true
     }
   },
   css: ["/assets/css/main.css", "@fortawesome/fontawesome-svg-core/styles.css"],
-
   modules: ["@nuxtjs/tailwindcss"],
   tailwindcss: {
     exposeConfig: true,
@@ -24,7 +27,7 @@ export default defineNuxtConfig({
         abandonAuthApplicationId: process.env.ABANDON_AUTH_DEVELOPER_APP_ID,
         githubRedirect: process.env.GITHUB_REDIRECT,
         discordRedirect: process.env.DISCORD_REDIRECT,
-        loginPath: `/login?application_id=${process.env.ABANDON_AUTH_DEVELOPER_APP_ID}&callback_uri=${process.env.ABANDON_AUTH_URL}/ui`
+        loginPath: `/login?application_id=${process.env.ABANDON_AUTH_DEVELOPER_APP_ID}&callback_uri=${process.env.ABANDON_AUTH_URL}/api/ui`
     }
   }
 })

src/website/pages/developer-applications/[id].vue

@@ -81,7 +81,6 @@
 import type { CreateDeveloperApplicationDto, DeveloperApplicationDto, DeveloperApplicationUpdateCallbackDto } from '~/types/developerApplicationDto';
 import { faPlus, faTrash } from '@fortawesome/free-solid-svg-icons'
 
-const config = useRuntimeConfig()
 const auth = useCookie("Authorization");
 const route = useRoute()
 const router = useRouter()
@@ -94,7 +93,7 @@ const showNewTokenModal = ref(false)
 
 const application_id = route.params.id
 
-const { data: application, refresh } = await useFetch<DeveloperApplicationDto>(`${config.public.abandonAuthUrl}/developer_application/${application_id}`, {
+const { data: application, refresh } = await useFetch<DeveloperApplicationDto>(`/api/developer_application/${application_id}`, {
   lazy: true,
   headers: {
     Authorization: `Bearer ${auth.value}`
@@ -111,7 +110,7 @@ async function resetCallbackUriField() {
 
 async function submitNewCallbackUris(newUris: string[]) {
   if (application.value?.callback_uris !== undefined){
-    await $fetch<DeveloperApplicationUpdateCallbackDto>(`${config.public.abandonAuthUrl}/developer_application/${application_id}/callback_uris`, {
+    await $fetch<DeveloperApplicationUpdateCallbackDto>(`/api/developer_application/${application_id}/callback_uris`, {
       method: "patch",
       headers: {
         Authorization: `Bearer ${auth.value}`
@@ -143,7 +142,7 @@ async function closeNewTokenModal() {
 }
 
 async function resetDeveloperApplicationToken() {
-  let resp = await $fetch<CreateDeveloperApplicationDto>(`${config.public.abandonAuthUrl}/developer_application/${application_id}/reset_token`, {
+  let resp = await $fetch<CreateDeveloperApplicationDto>(`/api/developer_application/${application_id}/reset_token`, {
       method: "patch",
       headers: {
         Authorization: `Bearer ${auth.value}`
@@ -163,7 +162,7 @@ async function resetDeveloperApplicationToken() {
 }
 
 async function deleteDeveloperApplication() {
-  await $fetch<DeveloperApplicationUpdateCallbackDto>(`${config.public.abandonAuthUrl}/developer_application/${application_id}`, {
+  await $fetch<DeveloperApplicationUpdateCallbackDto>(`/api/developer_application/${application_id}`, {
       method: "DELETE",
       headers: {
         Authorization: `Bearer ${auth.value}`

src/website/pages/developer-applications/index.vue

@@ -52,7 +52,6 @@
 import { faPlus } from '@fortawesome/free-solid-svg-icons'
 import type { CreateDeveloperApplicationDto, DeveloperApplicationDto } from '~/types/developerApplicationDto';
 
-const config = useRuntimeConfig()
 const auth = useCookie("Authorization");
 
 const spinAddButton = ref(false)
@@ -63,7 +62,7 @@ const createdApplicationId = ref("")
 const createdApplicationName = ref("")
 const createdApplicationToken = ref("")
 
-const { data: applications, refresh } = await useFetch<DeveloperApplicationDto[]>(`${config.public.abandonAuthUrl}/user/applications`, {
+const { data: applications, refresh } = await useFetch<DeveloperApplicationDto[]>('/api/user/applications', {
   lazy: true,
   headers: {
     Authorization: `Bearer ${auth.value}`
@@ -97,7 +96,7 @@ async function createApplication(name: string) {
     return resetApplicationField()
   }
 
-  const resp = await $fetch<CreateDeveloperApplicationDto>(`${config.public.abandonAuthUrl}/developer_application`, {
+  const resp = await $fetch<CreateDeveloperApplicationDto>('/api/developer_application', {
     method: 'POST',
     body: { name: name },
     headers: {

src/website/pages/index.vue

@@ -13,10 +13,9 @@
 <script setup lang="ts">
 import type { UserDto } from '~/types/userDto';
 
-const config = useRuntimeConfig()
 const auth = useCookie("Authorization");
 
-const { data: user } = await useFetch<UserDto>(`${config.public.abandonAuthUrl}/me`, {
+const { data: user } = await useFetch<UserDto>('/api/me', {
   lazy: true,
   headers: {
     Authorization: `Bearer ${auth.value}`

src/website/server/api/[...].ts

@@ -0,0 +1,8 @@
+import {joinURL} from "ufo";
+
+export default defineEventHandler(async (event) => {
+		const config = useRuntimeConfig();
+
+		const target = joinURL(config.public.abandonAuthUrl, event.path);
+		return proxyRequest(event, target);
+});