Add support for custom base path and add health check

RADAR-base · Oct 2, 2024 · 20e62f6 · 20e62f6
1 parent f0a1423
commit 20e62f6
Show file tree

Hide file tree

Showing 11 changed files with 88 additions and 24 deletions.
diff --git a/.env.template b/.env.template
@@ -0,0 +1,5 @@
+ORY_SDK_URL=http://localhost:4433
+HYDRA_ADMIN_URL=http://localhost:4445
+HYDRA_PUBLIC_URL=http://localhost:4444
+BASE_PATH=/kratos-ui
+NEXT_PUBLIC_KRATOS_PUBLIC_URL=http://localhost:3000/kratos-ui
diff --git a/next.config.js b/next.config.js
@@ -1,4 +1,6 @@
 /** @type {import('next').NextConfig} */
 module.exports = {
   reactStrictMode: true,
+  basePath: process.env.BASE_PATH || "",
+  assetPrefix: process.env.BASE_PATH ?? "" + "/",
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -44,6 +44,7 @@
     "@types/react": "~17.0.19",
     "@types/request": "^2.48.7",
     "@types/styled-components": "^5.1.13",
+    "@types/uuid": "^10.0.0",
     "cypress": "^8.7.0",
     "eslint": "7.32.0",
     "eslint-config-next": "12.0.3",

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,6 +1,7 @@
 import "../styles/globals.css"
 import { theme, globalStyles, ThemeProps } from "@ory/themes"
 import type { AppProps } from "next/app"
+import Head from "next/head"
 import { ToastContainer } from "react-toastify"
 import "react-toastify/dist/ReactToastify.css"
 import { ThemeProvider } from "styled-components"
@@ -13,6 +14,9 @@ const GlobalStyle = createGlobalStyle((props: ThemeProps) =>
 function MyApp({ Component, pageProps }: AppProps) {
   return (
     <div data-testid="app-react">
+      <Head>
+        <base href="/kratos-ui/" />
+      </Head>
       <ThemeProvider theme={theme}>
         <GlobalStyle />
         <Component {...pageProps} />

diff --git a/pages/health/alive.ts b/pages/health/alive.ts
diff --git a/pages/health/alive.tsx b/pages/health/alive.tsx
@@ -0,0 +1,23 @@
+import { ServerResponse } from "http"
+import { GetServerSideProps } from "next"
+import React from "react"
+
+// Use Node.js's ServerResponse
+
+const Alive = () => {
+  return <div>Healthy!</div>
+}
+
+export const getServerSideProps: GetServerSideProps = async ({
+  res,
+}: {
+  res: ServerResponse
+}) => {
+  res.statusCode = 200
+
+  return {
+    props: {},
+  }
+}
+
+export default Alive
diff --git a/pages/health/ready.ts b/pages/health/ready.ts
diff --git a/pages/health/ready.tsx b/pages/health/ready.tsx
@@ -0,0 +1,21 @@
+import { ServerResponse } from "http"
+import { GetServerSideProps } from "next"
+import React from "react"
+
+const Ready = () => {
+  return <div>Ready!</div>
+}
+
+export const getServerSideProps: GetServerSideProps = async ({
+  res,
+}: {
+  res: ServerResponse
+}) => {
+  res.statusCode = 200
+
+  return {
+    props: {},
+  }
+}
+
+export default Ready
diff --git a/pkg/sdk/index.ts b/pkg/sdk/index.ts
@@ -2,7 +2,7 @@ import { Configuration, FrontendApi } from "@ory/client"
 import { edgeConfig } from "@ory/integrations/next"
 
 const localConfig = {
-  basePath: process.env.NEXT_PUBLIC_KRATOS_PUBLIC_URL,
+  basePath: process.env.NEXT_PUBLIC_KRATOS_PUBLIC_URL ?? "" + "/api/.ory",
   baseOptions: {
     withCredentials: true,
   },

diff --git a/pkg/styled/index.tsx b/pkg/styled/index.tsx
@@ -8,6 +8,8 @@ import {
 import cn from "classnames"
 import styled from "styled-components"
 
+const BASE_URL = process.env.BASE_PATH || ""
+
 export const MarginCard = styled(Card)`
   margin-top: 70px;
   margin-bottom: 18px;
@@ -106,17 +108,20 @@ export const DocsButton = ({
   testid,
   disabled,
   unresponsive,
-}: DocsButtonProps) => (
-  <div className={cn("col-xs-4", { "col-md-12": !unresponsive })}>
-    <div className="box">
-      <TextLeftButton
-        onClick={onClick}
-        disabled={disabled}
-        data-testid={testid}
-        href={href}
-      >
-        {title}
-      </TextLeftButton>
+}: DocsButtonProps) => {
+  const url = BASE_URL + href
+  return (
+    <div className={cn("col-xs-4", { "col-md-12": !unresponsive })}>
+      <div className="box">
+        <TextLeftButton
+          onClick={onClick}
+          disabled={disabled}
+          data-testid={testid}
+          href={url}
+        >
+          {title}
+        </TextLeftButton>
+      </div>
     </div>
-  </div>
-)
+  )
+}