frontend: Set frontend hostname as an env var (#283)

* Set frontend hostname as an env var

Author: malexw

.env-template

@@ -45,6 +45,7 @@ USE_COMMUNITY_FEATURES='True'
 AUTH_SECRET_KEY=<See auth.guide.md on how to generate a secure one>
 # Required for specifying Redirect URI
 FRONTEND_HOSTNAME=http://localhost:4000
+NEXT_PUBLIC_FRONTEND_HOSTNAME=${FRONTEND_HOSTNAME}
 
 # Google OAuth 
 GOOGLE_CLIENT_ID=<GOOGLE_CLIENT_ID>

docker-compose.yml

@@ -66,6 +66,7 @@ services:
     # Set environment variables directly in the docker-compose file
     environment:
       NEXT_PUBLIC_API_HOSTNAME: ${NEXT_PUBLIC_API_HOSTNAME}
+      NEXT_PUBLIC_FRONTEND_HOSTNAME: ${NEXT_PUBLIC_FRONTEND_HOSTNAME}
     restart: always
     ports:
       - 4000:4000

docker_scripts/env-defaults

@@ -14,5 +14,7 @@ DB_EXTENSION=${DB_EXTENSION:-}
 
 # Defaults for the toolkit
 export NEXT_PUBLIC_API_HOSTNAME=${NEXT_PUBLIC_API_HOSTNAME:-http://localhost:8000}
+export FRONTEND_HOSTNAME=${FRONTEND_HOSTNAME:-http://localhost:4000}
+export NEXT_PUBLIC_FRONTEND_HOSTNAME=${FRONTEND_HOSTNAME:-http://localhost:4000}
 export PYTHON_INTERPRETER_URL=${PYTHON_INTERPRETER_URL:-http://localhost:8080}
 export DATABASE_URL=${DATABASE_URL:-postgresql+psycopg2://postgre:postgre@localhost:5432/toolkit}

docs/setup.md

@@ -123,6 +123,7 @@ And then retry `poetry --version`
 - `COHERE_API_KEY`: If your application will interface with Cohere's API, you will need to supply an API key. Not required if using AWS Sagemaker or Azure.
   Sign up at https://dashboard.cohere.com/ to create an API key.
 - `NEXT_PUBLIC_API_HOSTNAME`: The backend URL which the frontend will communicate with. Defaults to http://backend:8000 for use with `docker compose`
+- `FRONTEND_HOSTNAME`: The URL for the frontend client. Defaults to http://localhost:4000
 - `DATABASE_URL`: Your PostgreSQL database connection string for SQLAlchemy, should follow the format `postgresql+psycopg2://USER:PASSWORD@HOST:PORT`.
 
 ### AWS Sagemaker

src/backend/cli/main.py

@@ -45,6 +45,7 @@ class ToolName(StrEnum):
 DATABASE_URL_DEFAULT = "postgresql+psycopg2://postgres:postgres@db:5432"
 PYTHON_INTERPRETER_URL_DEFAULT = "http://terrarium:8080"
 NEXT_PUBLIC_API_HOSTNAME_DEFAULT = "http://localhost:8000"
+FRONTEND_HOSTNAME_DEFAULT = "http://localhost:4000"
 
 DOT_ENV_FILE_PATH = ".env"
 
@@ -82,8 +83,15 @@ def database_url_prompt(secrets):
         default=NEXT_PUBLIC_API_HOSTNAME_DEFAULT,
     )
 
+    print_styled("💾 And now the hostname for the frontend client")
+    frontend_hostname = inquirer.text(
+        "Enter your public API Hostname or press enter for default [recommended]",
+        default=FRONTEND_HOSTNAME_DEFAULT,
+    )
+
     secrets["DATABASE_URL"] = database_url
     secrets["NEXT_PUBLIC_API_HOSTNAME"] = next_public_api_hostname
+    secrets["FRONTEND_HOSTNAME"] = frontend_hostname
 
 
 def deployment_prompt(secrets, configs):
@@ -144,6 +152,13 @@ def write_env_file(secrets):
     for key, value in secrets.items():
         set_key(DOT_ENV_FILE_PATH, key, str(value))
 
+    set_key(
+        DOT_ENV_FILE_PATH,
+        "NEXT_PUBLIC_FRONTEND_HOSTNAME",
+        "${FRONTEND_HOSTNAME}",
+        "never",
+    )
+
 
 def select_deployments_prompt(deployments, _):
     print_styled("🚀 Let's set up your model deployments.", bcolors.MAGENTA)

src/interfaces/coral_web/.env.development

@@ -1,3 +1,4 @@
 # Client
 NEXT_PUBLIC_API_HOSTNAME=http://localhost:8000
+NEXT_PUBLIC_FRONTEND_HOSTNAME=http://localhost:4000
 NEXT_PUBLIC_HAS_CUSTOM_LOGO=false

src/interfaces/coral_web/.env.production

@@ -1,3 +1,4 @@
 # Client
 NEXT_PUBLIC_API_HOSTNAME=http://localhost:8000
+NEXT_PUBLIC_FRONTEND_HOSTNAME=http://localhost:4000
 NEXT_PUBLIC_HAS_CUSTOM_LOGO=false

src/interfaces/coral_web/README.md

@@ -22,9 +22,10 @@ pnpm lint
 
 We define environment-specific variables in the `.env.<<ENVIRONMENT>>` files and our current supported environments are: `production`, `stg`/`staging`, `ci`, and `development`. The following are our supported variables:
 
-| Variable                 | Description                                                 |
-| ------------------------ | ----------------------------------------------------------- |
-| NEXT_PUBLIC_API_HOSTNAME | API hostname that indicates the backend environment to hit. |
+| Variable                      | Description                                                 |
+| ----------------------------- | ----------------------------------------------------------- |
+| NEXT_PUBLIC_API_HOSTNAME      | API hostname that indicates the backend environment to hit. |
+| NEXT_PUBLIC_FRONTEND_HOSTNAME | The host for the web interface.                             |
 
 ### Resources
 

src/interfaces/coral_web/src/env.mjs

@@ -7,10 +7,12 @@ export const env = createEnv({
   },
   client: {
     NEXT_PUBLIC_API_HOSTNAME: z.string(),
+    NEXT_PUBLIC_FRONTEND_HOSTNAME: z.string(),
     NEXT_PUBLIC_HAS_CUSTOM_LOGO: z.string().optional().default('false'),
   },
   runtimeEnv: {
     NEXT_PUBLIC_API_HOSTNAME: process.env.NEXT_PUBLIC_API_HOSTNAME,
+    NEXT_PUBLIC_FRONTEND_HOSTNAME: process.env.NEXT_PUBLIC_FRONTEND_HOSTNAME,
     NEXT_PUBLIC_HAS_CUSTOM_LOGO: process.env.NEXT_PUBLIC_HAS_CUSTOM_LOGO,
   },
   emptyStringAsUndefined: true,

src/interfaces/coral_web/src/hooks/authConfig.ts

@@ -1,5 +1,6 @@
 import { ListAuthStrategy } from '@/cohere-client';
 import { useServerAuthStrategies } from '@/hooks/authStrategies';
+import { env } from '@/env.mjs';
 
 export const useAuthConfig = (): {
   loginUrl: string;
@@ -15,6 +16,6 @@ export const useAuthConfig = (): {
     registerUrl: '/register',
     logoutUrl: '/logout',
     loginStrategies: authStrategies,
-    baseUrl: window.location.href,
+    baseUrl: env.NEXT_PUBLIC_FRONTEND_HOSTNAME,
   };
 };