Merge pull request #1716 from nhost/changeset-release/main

chore: update versions

dashboard/.env.example

@@ -1,8 +1,17 @@
+# General Environment Variables
 NEXT_PUBLIC_ENV=dev
-NEXT_PUBLIC_NHOST_HASURA_URL=http://localhost:9695
-NEXT_PUBLIC_NHOST_MIGRATIONS_URL=http://localhost:9693
-NEXT_PUBLIC_NHOST_BACKEND_URL=http://localhost:1337
 NEXT_PUBLIC_NHOST_PLATFORM=false
+
+# Environment Variables for Self Hosting and Local Development
+NEXT_PUBLIC_NHOST_AUTH_URL=https://local.auth.nhost.run/v1
+NEXT_PUBLIC_NHOST_FUNCTIONS_URL=https://local.functions.nhost.run/v1
+NEXT_PUBLIC_NHOST_GRAPHQL_URL=https://local.graphql.nhost.run/v1
+NEXT_PUBLIC_NHOST_STORAGE_URL=https://local.storage.nhost.run/v1
+NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL=https://local.hasura.nhost.run
+NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL=https://local.hasura.nhost.run/v1/migrations
+NEXT_PUBLIC_NHOST_HASURA_API_URL=https://local.hasura.nhost.run
+
+# Environment Variables when running the Nhost Dashboard against the Nhost Backend
 NEXT_PUBLIC_STRIPE_PK=<nhost_stripe_public_key>
 NEXT_PUBLIC_GITHUB_APP_INSTALL_URL=<github_app_install_url>
 NEXT_PUBLIC_ANALYTICS_WRITE_KEY=<analytics_write_key>

dashboard/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @nhost/dashboard
 
+## 0.13.0
+
+### Minor Changes
+
+- 088584e7: feat(dashboard): add support for custom local subdomains
+
+### Patch Changes
+
+- 2ac90dfd: fix(dashboard): improve mobile responsive layout
+- Updated dependencies [f375eacc]
+  - @nhost/nextjs@1.13.15
+  - @nhost/react-apollo@5.0.10
+
+## 0.12.4
+
+### Patch Changes
+
+- @nhost/react-apollo@5.0.9
+- @nhost/nextjs@1.13.14
+
 ## 0.12.3
 
 ### Patch Changes

dashboard/Dockerfile

@@ -19,10 +19,14 @@ ENV NEXT_TELEMETRY_DISABLED 1
 ENV NEXT_PUBLIC_ENV dev
 ENV NEXT_PUBLIC_NHOST_PLATFORM false
 
-# placeholders for ports, will be replaced on runtime by entrypoint script
-ENV NEXT_PUBLIC_NHOST_MIGRATIONS_PORT __NEXT_PUBLIC_NHOST_MIGRATIONS_PORT__
-ENV NEXT_PUBLIC_NHOST_HASURA_PORT __NEXT_PUBLIC_NHOST_HASURA_PORT__
-ENV NEXT_PUBLIC_NHOST_LOCAL_BACKEND_PORT __NEXT_PUBLIC_NHOST_LOCAL_BACKEND_PORT__
+# placeholders for URLs, will be replaced on runtime by entrypoint script
+ENV NEXT_PUBLIC_NHOST_AUTH_URL __NEXT_PUBLIC_NHOST_AUTH_URL__
+ENV NEXT_PUBLIC_NHOST_FUNCTIONS_URL __NEXT_PUBLIC_NHOST_FUNCTIONS_URL__
+ENV NEXT_PUBLIC_NHOST_GRAPHQL_URL __NEXT_PUBLIC_NHOST_GRAPHQL_URL__
+ENV NEXT_PUBLIC_NHOST_STORAGE_URL __NEXT_PUBLIC_NHOST_STORAGE_URL__
+ENV NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL __NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL__
+ENV NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL __NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL__
+ENV NEXT_PUBLIC_NHOST_HASURA_API_URL __NEXT_PUBLIC_NHOST_HASURA_API_URL__
 
 RUN yarn global add pnpm@7.17.0
 COPY .gitignore .gitignore

dashboard/README.md

@@ -35,8 +35,17 @@ You can connect the Nhost Dashboard to your locally running backend by setting t
 ```bash
 NEXT_PUBLIC_ENV=dev
 NEXT_PUBLIC_NHOST_PLATFORM=false
+NEXT_PUBLIC_NHOST_AUTH_URL=https://local.auth.nhost.run/v1
+NEXT_PUBLIC_NHOST_FUNCTIONS_URL=https://local.functions.nhost.run/v1
+NEXT_PUBLIC_NHOST_GRAPHQL_URL=https://local.graphql.nhost.run/v1
+NEXT_PUBLIC_NHOST_STORAGE_URL=https://local.storage.nhost.run/v1
+NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL=https://local.hasura.nhost.run
+NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL=https://local.hasura.nhost.run/v1/migrations
+NEXT_PUBLIC_NHOST_HASURA_API_URL=https://local.hasura.nhost.run
 ```
 
+This will connect the Nhost Dashboard to your locally running Nhost backend.
+
 ### Storybook
 
 Components are documented using [Storybook](https://storybook.js.org/). To run Storybook, run the following command:
@@ -45,23 +54,39 @@ Components are documented using [Storybook](https://storybook.js.org/). To run S
 pnpm storybook
 ```
 
-### Full list of environment variables
+### General Environment Variables
 
-| Name                                      | Description                                                                                                                                          |
-| ----------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `NEXT_PUBLIC_ENV`                         | `dev`, `staging` or `prod`. Should be set to `dev` in most cases.                                                                                    |
-| `NEXT_PUBLIC_NHOST_PLATFORM`              | This should be set to `false` to connect the Nhost Dashboard to a locally running Nhost backend. Setting this to `true` turns off local development. |
-| `NEXT_PUBLIC_NHOST_LOCAL_MIGRATIONS_PORT` | Custom port that was passed to the CLI. Used only if local development is enabled. Default: `9693`                                                   |
-| `NEXT_PUBLIC_NHOST_LOCAL_HASURA_PORT`     | Custom port that was passed to the CLI. Used only if local development is enabled and `NEXT_PUBLIC_ENV` is `dev`. Default: `9695`                    |
-| `NEXT_PUBLIC_NHOST_LOCAL_BACKEND_PORT`    | Custom port that was passed to the CLI. Used only if local development is enabled. Default: `1337`                                                   |
-| `NEXT_PUBLIC_NHOST_BACKEND_URL`           | Backend URL. Not necessary for local development.                                                                                                    |
-| `NEXT_PUBLIC_STRIPE_PK`                   | Stripe public key. Not necessary for local development.                                                                                              |
-| `NEXT_PUBLIC_GITHUB_APP_INSTALL_URL`      | URL of the GitHub application. Not necessary for local development.                                                                                  |
-| `NEXT_PUBLIC_ANALYTICS_WRITE_KEY`         | Analytics key. Not necessary for local development.                                                                                                  |
-| `NEXT_PUBLIC_NHOST_BRAGI_WEBSOCKET`       | URL of the Bragi websocket. Not necessary for local development.                                                                                     |
-| `NEXT_PUBLIC_MAINTENANCE_ACTIVE`          | Determines whether or not maintenance mode is active.                                                                                                |
-| `NEXT_PUBLIC_MAINTENANCE_END_DATE`        | Date when maintenance mode will end.                                                                                                                 |
-| `NEXT_PUBLIC_MAINTENANCE_UNLOCK_SECRET`   | Secret that can be used to bypass maintenance mode.                                                                                                  |
+| Name                             | Description                                                                                                                                                                                                          |
+| -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `NEXT_PUBLIC_ENV`                | `dev`, `staging` or `prod`. This should be set to `dev` in most cases.                                                                                                                                               |
+| `NEXT_PUBLIC_NHOST_ADMIN_SECRET` | Admin secret for Hasura. Default: `nhost-admin-secret`                                                                                                                                                               |
+| `NEXT_PUBLIC_NHOST_PLATFORM`     | This should be set to `false` to connect the Nhost Dashboard to a locally running or a self-hosted Nhost backend. Setting this to `true` will connect the Nhost Dashboard to the cloud environment. Default: `false` |
+
+### Environment Variables for Local Development and Self-Hosting
+
+| Name | Description |
+| ---- | ----------- |
+
+| `NEXT_PUBLIC_NHOST_AUTH_URL` | The URL of the Auth service. When working locally, point it to the Auth service started by the CLI. When self-hosting, point it to the self-hosted Auth service. |
+| `NEXT_PUBLIC_NHOST_FUNCTIONS_URL` | The URL of the Functions service. When working locally, point it to the Functions service started by the CLI. When self-hosting, point it to the self-hosted Functions service. |
+| `NEXT_PUBLIC_NHOST_GRAPHQL_URL` | The URL of the GraphQL service. When working locally, point it to the GraphQL service started by the CLI. When self-hosting, point it to the self-hosted GraphQL service. |
+| `NEXT_PUBLIC_NHOST_STORAGE_URL` | The URL of the Storage service. When working locally, point it to the Storage service started by the CLI. When self-hosting, point it to the self-hosted Storage service. |
+| `NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL` | The URL of the Hasura Console. When working locally, point it to the Hasura Console started by the CLI. When self-hosting, point it to the self-hosted Hasura Console. |
+| `NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL` | The URL of Hasura's Migrations service. When working locally, point it to the Migrations service started by the CLI. |
+| `NEXT_PUBLIC_NHOST_HASURA_API_URL` | The URL of Hasura's Schema and Metadata API. When working locally, point it to the Schema and Metadata API started by the CLI. When self-hosting, point it to the self-hosted Schema and Metadata API. |
+
+### Other Environment Variables
+
+| Name                                    | Description                                                                                 |
+| --------------------------------------- | ------------------------------------------------------------------------------------------- |
+| `NEXT_PUBLIC_NHOST_BACKEND_URL`         | Backend URL. This is only used if `NEXT_PUBLIC_NHOST_PLATFORM` is `true`.                   |
+| `NEXT_PUBLIC_STRIPE_PK`                 | Stripe public key. This is only used if `NEXT_PUBLIC_NHOST_PLATFORM` is `true`.             |
+| `NEXT_PUBLIC_GITHUB_APP_INSTALL_URL`    | URL of the GitHub application. This is only used if `NEXT_PUBLIC_NHOST_PLATFORM` is `true`. |
+| `NEXT_PUBLIC_ANALYTICS_WRITE_KEY`       | Analytics key. This is only used if `NEXT_PUBLIC_NHOST_PLATFORM` is `true`.                 |
+| `NEXT_PUBLIC_NHOST_BRAGI_WEBSOCKET`     | URL of the Bragi websocket. This is only used if `NEXT_PUBLIC_NHOST_PLATFORM` is `true`.    |
+| `NEXT_PUBLIC_MAINTENANCE_ACTIVE`        | Determines whether or not maintenance mode is active.                                       |
+| `NEXT_PUBLIC_MAINTENANCE_END_DATE`      | Date when maintenance mode will end.                                                        |
+| `NEXT_PUBLIC_MAINTENANCE_UNLOCK_SECRET` | Secret that can be used to bypass maintenance mode.                                         |
 
 ## ESLint Rules
 

dashboard/docker-entrypoint.sh

@@ -1,15 +1,23 @@
 #!/bin/sh
 
-set -e
+set -euo pipefail
 
-# read ports from env variables or use defaults
-NEXT_PUBLIC_NHOST_MIGRATIONS_PORT="${NEXT_PUBLIC_NHOST_MIGRATIONS_PORT:=9693}"
-NEXT_PUBLIC_NHOST_HASURA_PORT="${NEXT_PUBLIC_NHOST_HASURA_PORT:=9695}"
-NEXT_PUBLIC_NHOST_LOCAL_BACKEND_PORT="${NEXT_PUBLIC_NHOST_LOCAL_BACKEND_PORT:=1337}"
+# read URLs from env variables (with defaults)
+NEXT_PUBLIC_NHOST_AUTH_URL="${NEXT_PUBLIC_NHOST_AUTH_URL:-"http://localhost:1337/v1/auth"}"
+NEXT_PUBLIC_NHOST_FUNCTIONS_URL="${NEXT_PUBLIC_NHOST_FUNCTIONS_URL:-"http://localhost:1337/v1/functions"}"
+NEXT_PUBLIC_NHOST_GRAPHQL_URL="${NEXT_PUBLIC_NHOST_GRAPHQL_URL:-"http://localhost:1337/v1/graphql"}"
+NEXT_PUBLIC_NHOST_STORAGE_URL="${NEXT_PUBLIC_NHOST_STORAGE_URL:-"http://localhost:1337/v1/storage"}"
+NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL="${NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL:-"http://localhost:9695"}"
+NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL="${NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL:-"http://localhost:9693"}"
+NEXT_PUBLIC_NHOST_HASURA_API_URL="${NEXT_PUBLIC_NHOST_HASURA_API_URL:-"http://localhost:8080"}"
 
 # replace placeholders
-find dashboard -type f -exec sed -i "s/__NEXT_PUBLIC_NHOST_MIGRATIONS_PORT__/${NEXT_PUBLIC_NHOST_MIGRATIONS_PORT}/g" {} +
-find dashboard -type f -exec sed -i "s/__NEXT_PUBLIC_NHOST_HASURA_PORT__/${NEXT_PUBLIC_NHOST_HASURA_PORT}/g" {} +
-find dashboard -type f -exec sed -i "s/__NEXT_PUBLIC_NHOST_LOCAL_BACKEND_PORT__/${NEXT_PUBLIC_NHOST_LOCAL_BACKEND_PORT}/g" {} +
+find dashboard -type f -exec sed -i "s~__NEXT_PUBLIC_NHOST_AUTH_URL__~${NEXT_PUBLIC_NHOST_AUTH_URL}~g" {} +
+find dashboard -type f -exec sed -i "s~__NEXT_PUBLIC_NHOST_FUNCTIONS_URL__~${NEXT_PUBLIC_NHOST_FUNCTIONS_URL}~g" {} +
+find dashboard -type f -exec sed -i "s~__NEXT_PUBLIC_NHOST_GRAPHQL_URL__~${NEXT_PUBLIC_NHOST_GRAPHQL_URL}~g" {} +
+find dashboard -type f -exec sed -i "s~__NEXT_PUBLIC_NHOST_STORAGE_URL__~${NEXT_PUBLIC_NHOST_STORAGE_URL}~g" {} +
+find dashboard -type f -exec sed -i "s~__NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL__~${NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL}~g" {} +
+find dashboard -type f -exec sed -i "s~__NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL__~${NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL}~g" {} +
+find dashboard -type f -exec sed -i "s~__NEXT_PUBLIC_NHOST_HASURA_API_URL__~${NEXT_PUBLIC_NHOST_HASURA_API_URL}~g" {} +
 
 exec "$@"

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/dashboard",
-  "version": "0.12.3",
+  "version": "0.13.0",
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",

dashboard/src/components/applications/ChangePlanModal.tsx

@@ -32,12 +32,12 @@ function Plan({
   return (
     <button
       type="button"
-      className="my-4 grid w-full grid-flow-col items-center justify-between px-1"
+      className="my-4 grid w-full grid-flow-col items-center justify-between gap-2 px-1"
       onClick={setPlan}
       tabIndex={-1}
     >
       <div className="grid grid-flow-row gap-y-0.5">
-        <div className="flex flex-row items-center">
+        <div className="grid grid-flow-col items-center justify-start gap-2">
           <Checkbox
             onChange={setPlan}
             checked={selectedPlanId === planId}
@@ -47,12 +47,13 @@ function Plan({
           <Text
             variant="h3"
             component="p"
-            className="ml-2 self-center font-medium"
+            className="self-center text-left font-medium"
           >
             {currentPlan.price > price ? 'Downgrade' : 'Upgrade'} to {planName}
           </Text>
         </div>
-        <Text variant="subtitle2" className="w-64 text-start">
+
+        <Text variant="subtitle2" className="w-full max-w-[256px] text-start">
           {planDescriptions[planName]}
         </Text>
       </div>
@@ -142,7 +143,7 @@ export function ChangePlanModalWithData({ app, plans, close }: any) {
   };
 
   return (
-    <Box className="w-welcome rounded-lg p-6 text-left">
+    <Box className="w-full max-w-xl rounded-lg p-6 text-left">
       <Modal
         showModal={paymentModal}
         close={closePaymentModal}

dashboard/src/components/applications/HasuraData.tsx

@@ -12,7 +12,7 @@ import generateAppServiceUrl, {
   defaultRemoteBackendSlugs,
 } from '@/utils/common/generateAppServiceUrl';
 import { copy } from '@/utils/copy';
-import { LOCAL_HASURA_URL } from '@/utils/env';
+import { getHasuraConsoleServiceUrl } from '@/utils/env';
 import Image from 'next/image';
 
 interface HasuraDataProps {
@@ -30,7 +30,7 @@ export function HasuraData({ close }: HasuraDataProps) {
 
   const hasuraUrl =
     process.env.NEXT_PUBLIC_ENV === 'dev' || !isPlatform
-      ? `${LOCAL_HASURA_URL}/console`
+      ? `${getHasuraConsoleServiceUrl()}`
       : generateAppServiceUrl(
           currentApplication?.subdomain,
           currentApplication?.region.awsName,

dashboard/src/components/applications/UnlockFeatureByUpgrading.tsx

@@ -33,11 +33,10 @@ export function UnlockFeatureByUpgrading({
               title: 'Upgrade your plan.',
               payload: <ChangePlanModal />,
               props: {
-                PaperProps: { className: 'p-0' },
+                PaperProps: { className: 'p-0 max-w-xl w-full' },
                 hidePrimaryAction: true,
                 hideSecondaryAction: true,
                 hideTitle: true,
-                maxWidth: 'lg',
               },
             });
           }}

dashboard/src/components/applications/graphql/UserSelect.tsx

@@ -1,3 +1,4 @@
+import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import { useRemoteApplicationGQLClient } from '@/hooks/useRemoteApplicationGQLClient';
 import ActivityIndicator from '@/ui/v2/ActivityIndicator';
 import Option from '@/ui/v2/Option';
@@ -18,10 +19,12 @@ export interface UserSelectProps {
 }
 
 export function UserSelect({ onUserChange, ...props }: UserSelectProps) {
+  const { currentApplication } = useCurrentWorkspaceAndApplication();
   const userApplicationClient = useRemoteApplicationGQLClient();
   const { data, loading, error } = useRemoteAppGetUsersCustomQuery({
     client: userApplicationClient,
     variables: { where: {}, limit: 250, offset: 0 },
+    skip: !currentApplication,
   });
 
   if (loading) {
@@ -36,8 +39,6 @@ export function UserSelect({ onUserChange, ...props }: UserSelectProps) {
     throw error;
   }
 
-  const { users } = data;
-
   return (
     <Select
       {...props}
@@ -57,7 +58,7 @@ export function UserSelect({ onUserChange, ...props }: UserSelectProps) {
           return;
         }
 
-        const user: RemoteAppGetUsersCustomQuery['users'][0] = users.find(
+        const user: RemoteAppGetUsersCustomQuery['users'][0] = data?.users.find(
           ({ id }) => id === userId,
         );
 
@@ -68,7 +69,7 @@ export function UserSelect({ onUserChange, ...props }: UserSelectProps) {
     >
       <Option value="admin">Admin</Option>
 
-      {users.map(({ id, displayName, email, phoneNumber }) => (
+      {data?.users.map(({ id, displayName, email, phoneNumber }) => (
         <Option key={id} value={id}>
           {displayName || email || phoneNumber || id}
         </Option>

dashboard/src/components/billing-payment-method/BillingPaymentMethodForm.tsx

@@ -22,7 +22,9 @@ import {
 import { loadStripe } from '@stripe/stripe-js';
 import React, { useState } from 'react';
 
-const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PK!);
+const stripePromise = process.env.NEXT_PUBLIC_STRIPE_PK
+  ? loadStripe(process.env.NEXT_PUBLIC_STRIPE_PK)
+  : null;
 
 type AddPaymentMethodFormProps = {
   close: () => void;

dashboard/src/components/deployments/DeploymentListItem/DeploymentListItem.tsx

@@ -59,12 +59,12 @@ export default function DeploymentListItem({
   return (
     <ListItem.Root>
       <ListItem.Button
-        className="grid grid-flow-col items-center justify-between gap-2 rounded-none px-2 py-2"
+        className="grid grid-flow-col items-center justify-between gap-2 rounded-none p-2"
         component={NavLink}
         href={`/${currentWorkspace.slug}/${currentApplication.slug}/deployments/${deployment.id}`}
         aria-label={commitMessage || 'No commit message'}
       >
-        <div className="flex cursor-pointer flex-row items-center justify-center space-x-2 self-center">
+        <div className="grid grid-flow-col items-center justify-center gap-2 self-center">
           <ListItem.Avatar>
             <Avatar
               name={deployment.commitUserName}
@@ -85,7 +85,7 @@ export default function DeploymentListItem({
           />
         </div>
 
-        <div className="grid grid-flow-col items-center gap-2">
+        <div className="grid grid-flow-col items-center justify-end gap-2">
           {showRedeploy && (
             <Tooltip
               title={
@@ -142,16 +142,16 @@ export default function DeploymentListItem({
           )}
 
           {isLive && (
-            <div className="flex w-12 justify-end">
+            <div className="hidden w-12 justify-end sm:flex">
               <Chip size="small" color="success" label="Live" />
             </div>
           )}
 
-          <div className="w-16 text-right font-mono text-sm- font-medium">
+          <div className="hidden w-16 text-right font-mono text-sm- font-medium sm:block">
             {deployment.commitSHA.substring(0, 7)}
           </div>
 
-          <div className="w-[80px] text-right font-mono text-sm- font-medium">
+          <div className="text-right font-mono text-sm- font-medium sm:w-20">
             <AppDeploymentDuration
               startedAt={deployment.deploymentStartedAt}
               endedAt={deployment.deploymentEndedAt}

dashboard/src/components/deployments/DeploymentStatusMessage/DeploymentStatusMessage.tsx

@@ -45,14 +45,14 @@ export default function DeploymentStatusMessage({
 
   if (!isDeployingToProduction && deployment?.deploymentEndedAt) {
     return (
-      <span className="flex flex-row">
+      <span className="grid grid-flow-col">
         <Avatar
           component="span"
           name={deployment.commitUserName}
           avatarUrl={deployment.commitUserAvatarUrl}
           className="mr-1 h-4 w-4 self-center"
         />
-        <Text component="span" className="self-center text-sm">
+        <Text component="span" className="self-center truncate text-sm">
           {deployment.commitUserName} deployed{' '}
           {formatDistance(new Date(deployment.deploymentEndedAt), new Date(), {
             addSuffix: true,

dashboard/src/components/files/FilesDataGrid/FilesDataGrid.tsx

@@ -12,6 +12,7 @@ import useBuckets from '@/hooks/useBuckets';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import useFiles from '@/hooks/useFiles';
 import useFilesAggregate from '@/hooks/useFilesAggregate';
+import { getHasuraAdminSecret } from '@/utils/env';
 import { showLoadingToast, triggerToast } from '@/utils/toast';
 import type { Files } from '@/utils/__generated__/graphql';
 import { Order_By as OrderBy } from '@/utils/__generated__/graphql';
@@ -261,7 +262,7 @@ export default function FilesDataGrid(props: FilesDataGridProps) {
       const { fileMetadata, error: fileError } = await appClient.storage
         .setAdminSecret(
           process.env.NEXT_PUBLIC_ENV === 'dev'
-            ? 'nhost-admin-secret'
+            ? getHasuraAdminSecret()
             : currentApplication.config?.hasura.adminSecret,
         )
         .upload({

dashboard/src/components/files/FilesDataGridControls/FilesDataGridControls.tsx

@@ -12,6 +12,7 @@ import Button from '@/ui/v2/Button';
 import Chip from '@/ui/v2/Chip';
 import type { InputProps } from '@/ui/v2/Input';
 import Input from '@/ui/v2/Input';
+import { getHasuraAdminSecret } from '@/utils/env';
 import { triggerToast } from '@/utils/toast';
 import type { Files } from '@/utils/__generated__/graphql';
 import type { PropsWithoutRef } from 'react';
@@ -71,7 +72,7 @@ export default function FilesDataGridControls({
     try {
       const storageWithAdminSecret = appClient.storage.setAdminSecret(
         process.env.NEXT_PUBLIC_ENV === 'dev'
-          ? 'nhost-admin-secret'
+          ? getHasuraAdminSecret()
           : currentApplication.config?.hasura.adminSecret,
       );
 

dashboard/src/components/overview/OverviewDeployments/OverviewDeployments.tsx

@@ -76,7 +76,7 @@ function OverviewDeploymentList() {
 
   if (!deployments?.length) {
     return (
-      <Box className="grid grid-flow-row items-center justify-items-center gap-5 overflow-hidden rounded-lg border-1 py-12 px-48 shadow-sm">
+      <Box className="grid grid-flow-row items-center justify-items-center gap-5 overflow-hidden rounded-lg border-1 py-12 px-4 shadow-sm">
         <RocketIcon
           strokeWidth={1}
           className="h-10 w-10"
@@ -86,7 +86,7 @@ function OverviewDeploymentList() {
           <Text className="text-center font-medium" variant="h3">
             No Deployments
           </Text>
-          <Text variant="subtitle1" className="text-center">
+          <Text variant="subtitle1" className="max-w-md text-center">
             We&apos;ll deploy changes automatically when you push to the
             deployment branch in your connected GitHub repository
           </Text>
@@ -166,14 +166,14 @@ export default function OverviewDeployments() {
     <div className="flex flex-col">
       <OverviewDeploymentsTopBar />
 
-      <Box className="grid grid-flow-row items-center justify-items-center gap-5 rounded-lg border-1 py-12 px-48 shadow-sm">
+      <Box className="grid grid-flow-row items-center justify-items-center gap-5 rounded-lg border-1 py-12 px-4 shadow-sm">
         <RocketIcon strokeWidth={1} className="h-10 w-10" />
 
         <div className="grid grid-flow-row gap-1">
           <Text className="text-center font-medium" variant="h3">
             No Deployments
           </Text>
-          <Text variant="subtitle1" className="text-center">
+          <Text variant="subtitle1" className="max-w-sm text-center">
             Connect your project with a GitHub repository to create your first
             deployment
           </Text>

dashboard/src/components/overview/OverviewTopBar/OverviewTopBar.tsx

@@ -1,9 +1,9 @@
 import { ChangePlanModal } from '@/components/applications/ChangePlanModal';
-
 import { useDialog } from '@/components/common/DialogProvider';
 import { useUI } from '@/context/UIContext';
 import useIsPlatform from '@/hooks/common/useIsPlatform';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
+import Box from '@/ui/v2/Box';
 import Button from '@/ui/v2/Button';
 import Chip from '@/ui/v2/Chip';
 import CogIcon from '@/ui/v2/icons/CogIcon';
@@ -43,9 +43,9 @@ export default function OverviewTopBar() {
   }
 
   return (
-    <div className="flex flex-row place-content-between items-center py-5">
-      <div className="flex flex-row items-center space-x-2">
-        <div className="grid grid-flow-col items-center gap-2">
+    <div className="grid items-center gap-4 pb-5 md:grid-flow-col md:place-content-between md:py-5">
+      <div className="grid items-center gap-2 md:grid-flow-col">
+        <div className="grid grid-flow-col items-center justify-start gap-2">
           <div className="h-10 w-10 overflow-hidden rounded-lg">
             <Image
               src="/logos/new.svg"
@@ -60,43 +60,44 @@ export default function OverviewTopBar() {
           </Text>
         </div>
 
-        {isPro ? (
-          <Chip
-            className="self-center font-medium"
-            size="small"
-            label="Pro Plan"
-            color="primary"
-          />
-        ) : (
-          <>
+        <Box className="grid grid-flow-col items-center justify-start gap-2">
+          {isPro ? (
             <Chip
               className="self-center font-medium"
               size="small"
-              label="Free Plan"
-              color="default"
-              variant="filled"
+              label="Pro Plan"
+              color="primary"
             />
-            <Button
-              variant="borderless"
-              className="mr-2"
-              onClick={() => {
-                openAlertDialog({
-                  title: 'Upgrade your plan.',
-                  payload: <ChangePlanModal />,
-                  props: {
-                    PaperProps: { className: 'p-0' },
-                    hidePrimaryAction: true,
-                    hideSecondaryAction: true,
-                    hideTitle: true,
-                    maxWidth: 'lg',
-                  },
-                });
-              }}
-            >
-              Upgrade
-            </Button>
-          </>
-        )}
+          ) : (
+            <>
+              <Chip
+                className="self-center font-medium"
+                size="small"
+                label="Free Plan"
+                color="default"
+                variant="filled"
+              />
+              <Button
+                variant="borderless"
+                className="mr-2"
+                onClick={() => {
+                  openAlertDialog({
+                    title: 'Upgrade your plan.',
+                    payload: <ChangePlanModal />,
+                    props: {
+                      PaperProps: { className: 'p-0 max-w-xl w-full' },
+                      hidePrimaryAction: true,
+                      hideSecondaryAction: true,
+                      hideTitle: true,
+                    },
+                  });
+                }}
+              >
+                Upgrade
+              </Button>
+            </>
+          )}
+        </Box>
       </div>
       <Link
         href={`/${currentWorkspace.slug}/${currentApplication.slug}/settings/general`}

dashboard/src/components/overview/OverviewUsage/OverviewUsage.tsx

@@ -79,6 +79,7 @@ export function OverviewUsageMetrics() {
   const isPlatform = useIsPlatform();
   const { currentApplication } = useCurrentWorkspaceAndApplication();
   const remoteAppClient = useRemoteApplicationGQLClient();
+
   const [metrics, setMetrics] = useState({
     functions: 0,
     storage: 0,
@@ -98,6 +99,7 @@ export function OverviewUsageMetrics() {
 
   const { data: remoteAppMetricsData } = useGetRemoteAppMetricsQuery({
     client: remoteAppClient,
+    skip: !currentApplication,
   });
 
   useEffect(() => {

dashboard/src/components/settings/environmentVariables/SystemEnvironmentVariableSettings/SystemEnvironmentVariableSettings.tsx

@@ -20,7 +20,7 @@ import generateAppServiceUrl, {
   defaultLocalBackendSlugs,
   defaultRemoteBackendSlugs,
 } from '@/utils/common/generateAppServiceUrl';
-import { LOCAL_HASURA_URL } from '@/utils/env';
+import { getHasuraConsoleServiceUrl } from '@/utils/env';
 import { generateRemoteAppUrl } from '@/utils/helpers';
 import getJwtSecretsWithoutFalsyValues from '@/utils/settings/getJwtSecretsWithoutFalsyValues';
 import { useGetEnvironmentVariablesQuery } from '@/utils/__generated__/graphql';
@@ -109,7 +109,7 @@ export default function SystemEnvironmentVariableSettings() {
       key: 'NHOST_HASURA_URL',
       value:
         process.env.NEXT_PUBLIC_ENV === 'dev' || !isPlatform
-          ? `${LOCAL_HASURA_URL}/console`
+          ? `${getHasuraConsoleServiceUrl()}/console`
           : generateAppServiceUrl(
               currentApplication?.subdomain,
               currentApplication?.region.awsName,

dashboard/src/components/ui/v2/createTheme/createTheme.ts

@@ -21,14 +21,17 @@ export default function createTheme(mode: PaletteMode) {
       },
       h2: {
         fontSize: '1.625rem',
+        lineHeight: '2.375rem',
         fontWeight: 500,
       },
       h3: {
         fontSize: '1.125rem',
+        lineHeight: '1.5rem',
         fontWeight: 500,
       },
       h4: {
         fontSize: '1rem',
+        lineHeight: '1.375rem',
         fontWeight: 500,
       },
       subtitle1: {

dashboard/src/hooks/common/useIsHealthy/useIsHealthy.ts

@@ -1,5 +1,6 @@
 import useIsPlatform from '@/hooks/common/useIsPlatform';
-import { useNhostClient } from '@nhost/nextjs';
+import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
+import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
 import { useQuery } from '@tanstack/react-query';
 
 /**
@@ -7,12 +8,19 @@ import { useQuery } from '@tanstack/react-query';
  */
 export default function useIsHealthy() {
   const isPlatform = useIsPlatform();
-  const client = useNhostClient();
+  const { currentApplication } = useCurrentWorkspaceAndApplication();
+
+  const appUrl = generateAppServiceUrl(
+    currentApplication?.subdomain,
+    currentApplication?.region?.awsName,
+    'auth',
+  );
+
   const { failureCount, status } = useQuery(
     ['/healthz'],
-    () => fetch(`${client.auth.url}/healthz`),
+    () => fetch(`${appUrl}/healthz`),
     {
-      enabled: !isPlatform,
+      enabled: !isPlatform && !!currentApplication,
       retry: true,
       retryDelay: 5000,
       cacheTime: 0,

dashboard/src/hooks/common/useIsPlatform/useIsPlatform.ts

@@ -1,6 +1,8 @@
+import { isPlatform } from '@/utils/env';
+
 /**
  * Returns `true` if all features of the dashboard should be enabled.
  */
 export default function useIsPlatform() {
-  return process.env.NEXT_PUBLIC_NHOST_PLATFORM === 'true';
+  return isPlatform();
 }

dashboard/src/hooks/dataBrowser/useCreateColumnMutation/createColumnMigration.ts

@@ -7,7 +7,7 @@ import type {
 } from '@/types/dataBrowser';
 import { getPreparedHasuraQuery } from '@/utils/dataBrowser/hasuraQueryHelpers';
 import normalizeQueryError from '@/utils/dataBrowser/normalizeQueryError';
-import { LOCAL_MIGRATIONS_URL } from '@/utils/env';
+import { getHasuraMigrationsApiUrl } from '@/utils/env';
 import prepareCreateColumnQuery from './prepareCreateColumnQuery';
 
 export interface CreateColumnMigrationVariables {
@@ -34,7 +34,7 @@ export default async function createColumnMigration({
     column,
   });
 
-  const response = await fetch(`${LOCAL_MIGRATIONS_URL}/apis/migrate`, {
+  const response = await fetch(`${getHasuraMigrationsApiUrl()}/apis/migrate`, {
     method: 'POST',
     headers: {
       'x-hasura-admin-secret': adminSecret,

dashboard/src/hooks/dataBrowser/useCreateColumnMutation/useCreateColumnMutation.ts

@@ -1,6 +1,7 @@
 import useIsPlatform from '@/hooks/common/useIsPlatform';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
+import { getHasuraAdminSecret } from '@/utils/env';
 import type { MutationOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -52,7 +53,7 @@ export default function useCreateColumnMutation({
         appUrl: customAppUrl || appUrl,
         adminSecret:
           process.env.NEXT_PUBLIC_ENV === 'dev'
-            ? 'nhost-admin-secret'
+            ? getHasuraAdminSecret()
             : customAdminSecret ||
               currentApplication?.config?.hasura.adminSecret,
         dataSource: customDataSource || (dataSourceSlug as string),

dashboard/src/hooks/dataBrowser/useCreateRecordMutation/useCreateRecordMutation.ts

@@ -1,5 +1,6 @@
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
+import { getHasuraAdminSecret } from '@/utils/env';
 import type { MutationOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -53,7 +54,7 @@ export default function useCreateRecordMutation<TData extends object = {}>({
         appUrl: customAppUrl || appUrl,
         adminSecret:
           process.env.NEXT_PUBLIC_ENV === 'dev'
-            ? 'nhost-admin-secret'
+            ? getHasuraAdminSecret()
             : customAdminSecret ||
               currentApplication?.config?.hasura.adminSecret,
         dataSource: customDataSource || (dataSourceSlug as string),

dashboard/src/hooks/dataBrowser/useCreateTableMutation/createTableMigration.ts

@@ -7,7 +7,7 @@ import type {
 } from '@/types/dataBrowser';
 import { getPreparedHasuraQuery } from '@/utils/dataBrowser/hasuraQueryHelpers';
 import normalizeQueryError from '@/utils/dataBrowser/normalizeQueryError';
-import { LOCAL_MIGRATIONS_URL } from '@/utils/env';
+import { getHasuraMigrationsApiUrl } from '@/utils/env';
 import prepareCreateTableQuery from './prepareCreateTableQuery';
 
 export interface CreateTableMigrationVariables {
@@ -28,7 +28,7 @@ export default async function createTableMigration({
 }: CreateTableMigrationOptions & CreateTableMigrationVariables) {
   const args = prepareCreateTableQuery({ dataSource, schema, table });
 
-  const response = await fetch(`${LOCAL_MIGRATIONS_URL}/apis/migrate`, {
+  const response = await fetch(`${getHasuraMigrationsApiUrl()}/apis/migrate`, {
     method: 'POST',
     headers: {
       'x-hasura-admin-secret': adminSecret,

dashboard/src/hooks/dataBrowser/useCreateTableMutation/useCreateTableMutation.ts

@@ -1,6 +1,7 @@
 import useIsPlatform from '@/hooks/common/useIsPlatform';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
+import { getHasuraAdminSecret } from '@/utils/env';
 import type { MutationOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -50,7 +51,7 @@ export default function useCreateTableMutation({
         appUrl: customAppUrl || appUrl,
         adminSecret:
           process.env.NEXT_PUBLIC_ENV === 'dev'
-            ? 'nhost-admin-secret'
+            ? getHasuraAdminSecret()
             : customAdminSecret ||
               currentApplication?.config?.hasura.adminSecret,
         dataSource: customDataSource || (dataSourceSlug as string),

dashboard/src/hooks/dataBrowser/useDatabaseQuery/useDatabaseQuery.ts

@@ -1,5 +1,6 @@
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
+import { getHasuraAdminSecret } from '@/utils/env';
 import type { QueryKey, UseQueryOptions } from '@tanstack/react-query';
 import { useQuery } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -51,7 +52,7 @@ export default function useDatabaseQuery(
         appUrl: customAppUrl || appUrl,
         adminSecret:
           process.env.NEXT_PUBLIC_ENV === 'dev'
-            ? 'nhost-admin-secret'
+            ? getHasuraAdminSecret()
             : customAdminSecret ||
               currentApplication?.config?.hasura.adminSecret,
         dataSource: customDataSource || (dataSourceSlug as string),

dashboard/src/hooks/dataBrowser/useDeleteColumnMutation/deleteColumnMigration.ts

@@ -8,7 +8,7 @@ import type {
 } from '@/types/dataBrowser';
 import { getPreparedHasuraQuery } from '@/utils/dataBrowser/hasuraQueryHelpers';
 import normalizeQueryError from '@/utils/dataBrowser/normalizeQueryError';
-import { LOCAL_MIGRATIONS_URL } from '@/utils/env';
+import { getHasuraMigrationsApiUrl } from '@/utils/env';
 
 export interface DeleteColumnMigrationVariables {
   /**
@@ -46,7 +46,7 @@ export default async function deleteColumnMigration({
     },
   });
 
-  const response = await fetch(`${LOCAL_MIGRATIONS_URL}/apis/migrate`, {
+  const response = await fetch(`${getHasuraMigrationsApiUrl()}/apis/migrate`, {
     method: 'POST',
     headers: {
       'x-hasura-admin-secret': adminSecret,

dashboard/src/hooks/dataBrowser/useDeleteColumnMutation/useDeleteColumnMutation.ts

@@ -1,6 +1,7 @@
 import useIsPlatform from '@/hooks/common/useIsPlatform';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
+import { getHasuraAdminSecret } from '@/utils/env';
 import type { MutationOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -53,7 +54,7 @@ export default function useDeleteColumnMutation({
         appUrl: customAppUrl || appUrl,
         adminSecret:
           process.env.NEXT_PUBLIC_ENV === 'dev'
-            ? 'nhost-admin-secret'
+            ? getHasuraAdminSecret()
             : customAdminSecret ||
               currentApplication?.config?.hasura.adminSecret,
         dataSource: customDataSource || (dataSourceSlug as string),

dashboard/src/hooks/dataBrowser/useDeleteRecordMutation/useDeleteRecordMutation.ts

@@ -1,5 +1,6 @@
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
+import { getHasuraAdminSecret } from '@/utils/env';
 import type { MutationOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -49,7 +50,7 @@ export default function useDeleteRecordMutation({
         appUrl: customAppUrl || appUrl,
         adminSecret:
           process.env.NEXT_PUBLIC_ENV === 'dev'
-            ? 'nhost-admin-secret'
+            ? getHasuraAdminSecret()
             : customAdminSecret ||
               currentApplication?.config?.hasura.adminSecret,
         dataSource: customDataSource || (dataSourceSlug as string),

dashboard/src/hooks/dataBrowser/useDeleteTableMutation/deleteTableMigration.ts

@@ -9,7 +9,7 @@ import {
   getPreparedHasuraQuery,
 } from '@/utils/dataBrowser/hasuraQueryHelpers';
 import normalizeQueryError from '@/utils/dataBrowser/normalizeQueryError';
-import { LOCAL_MIGRATIONS_URL } from '@/utils/env';
+import { getHasuraMigrationsApiUrl } from '@/utils/env';
 
 export interface DeleteTableMigrationVariables {
   /**
@@ -40,7 +40,7 @@ export default async function deleteTable({
     ),
   ];
 
-  const response = await fetch(`${LOCAL_MIGRATIONS_URL}/apis/migrate`, {
+  const response = await fetch(`${getHasuraMigrationsApiUrl()}/apis/migrate`, {
     method: 'POST',
     headers: {
       'x-hasura-admin-secret': adminSecret,

dashboard/src/hooks/dataBrowser/useDeleteTableMutation/useDeleteTableMutation.ts

@@ -1,6 +1,7 @@
 import useIsPlatform from '@/hooks/common/useIsPlatform';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
+import { getHasuraAdminSecret } from '@/utils/env';
 import type { MutationOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -48,7 +49,7 @@ export default function useDeleteTableMutation({
         appUrl: customAppUrl || appUrl,
         adminSecret:
           process.env.NEXT_PUBLIC_ENV === 'dev'
-            ? 'nhost-admin-secret'
+            ? getHasuraAdminSecret()
             : customAdminSecret ||
               currentApplication?.config?.hasura.adminSecret,
         dataSource: customDataSource || (dataSourceSlug as string),

dashboard/src/hooks/dataBrowser/useManagePermissionMutation/managePermissionMigration.ts

@@ -7,7 +7,7 @@ import type {
   QueryResult,
 } from '@/types/dataBrowser';
 import normalizeQueryError from '@/utils/dataBrowser/normalizeQueryError';
-import { LOCAL_MIGRATIONS_URL } from '@/utils/env';
+import { getHasuraMigrationsApiUrl } from '@/utils/env';
 
 export interface ManagePermissionMigrationVariables {
   /**
@@ -113,7 +113,7 @@ export default async function managePermissionMigration({
     };
   }
 
-  const response = await fetch(`${LOCAL_MIGRATIONS_URL}/apis/migrate`, {
+  const response = await fetch(`${getHasuraMigrationsApiUrl()}/apis/migrate`, {
     method: 'POST',
     headers: {
       'x-hasura-admin-secret': adminSecret,

dashboard/src/hooks/dataBrowser/useManagePermissionMutation/useManagePermissionMutation.ts

@@ -1,6 +1,7 @@
 import useIsPlatform from '@/hooks/common/useIsPlatform';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
+import { getHasuraAdminSecret } from '@/utils/env';
 import type { MutationOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -56,7 +57,7 @@ export default function useManagePermissionMutation({
         appUrl: customAppUrl || appUrl,
         adminSecret:
           process.env.NEXT_PUBLIC_ENV === 'dev'
-            ? 'nhost-admin-secret'
+            ? getHasuraAdminSecret()
             : customAdminSecret ||
               currentApplication?.config?.hasura.adminSecret,
         dataSource: customDataSource || (dataSourceSlug as string),

dashboard/src/hooks/dataBrowser/useMetadataQuery/useMetadataQuery.ts

@@ -1,5 +1,6 @@
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
+import { getHasuraAdminSecret } from '@/utils/env';
 import type { QueryKey, UseQueryOptions } from '@tanstack/react-query';
 import { useQuery } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -53,7 +54,7 @@ export default function useMetadataQuery(
         appUrl: customAppUrl || appUrl,
         adminSecret:
           process.env.NEXT_PUBLIC_ENV === 'dev'
-            ? 'nhost-admin-secret'
+            ? getHasuraAdminSecret()
             : customAdminSecret ||
               currentApplication?.config?.hasura.adminSecret,
         dataSource: customDataSource || (dataSourceSlug as string),

dashboard/src/hooks/dataBrowser/useTableQuery/useTableQuery.ts

@@ -1,5 +1,6 @@
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
+import { getHasuraAdminSecret } from '@/utils/env';
 import type { QueryKey, UseQueryOptions } from '@tanstack/react-query';
 import { useQuery } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -53,7 +54,7 @@ export default function useTableQuery(
         appUrl: customAppUrl || appUrl,
         adminSecret:
           process.env.NEXT_PUBLIC_ENV === 'dev'
-            ? 'nhost-admin-secret'
+            ? getHasuraAdminSecret()
             : customAdminSecret ||
               currentApplication?.config?.hasura.adminSecret,
         dataSource: customDataSource || (dataSourceSlug as string),

dashboard/src/hooks/dataBrowser/useTrackForeignKeyRelationsMutation/trackForeignKeyRelationsMigration.ts

@@ -6,7 +6,7 @@ import type {
   QueryResult,
 } from '@/types/dataBrowser';
 import normalizeQueryError from '@/utils/dataBrowser/normalizeQueryError';
-import { LOCAL_MIGRATIONS_URL } from '@/utils/env';
+import { getHasuraMigrationsApiUrl } from '@/utils/env';
 import prepareTrackForeignKeyRelationsMetadata from './prepareTrackForeignKeyRelationsMetadata';
 
 export interface TrackForeignKeyRelationsMigrationVariables {
@@ -46,7 +46,7 @@ export default async function trackForeignKeyRelationsMigration({
     foreignKeyRelations,
   });
 
-  const response = await fetch(`${LOCAL_MIGRATIONS_URL}/apis/migrate`, {
+  const response = await fetch(`${getHasuraMigrationsApiUrl()}/apis/migrate`, {
     method: 'POST',
     headers: {
       'x-hasura-admin-secret': adminSecret,

dashboard/src/hooks/dataBrowser/useTrackForeignKeyRelationsMutation/useTrackForeignKeyRelationsMutation.ts

@@ -1,6 +1,7 @@
 import useIsPlatform from '@/hooks/common/useIsPlatform';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
+import { getHasuraAdminSecret } from '@/utils/env';
 import type { MutationOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -50,7 +51,7 @@ export default function useTrackForeignKeyRelationMutation({
         appUrl: customAppUrl || appUrl,
         adminSecret:
           process.env.NEXT_PUBLIC_ENV === 'dev'
-            ? 'nhost-admin-secret'
+            ? getHasuraAdminSecret()
             : customAdminSecret ||
               currentApplication?.config?.hasura.adminSecret,
         dataSource: customDataSource || (dataSourceSlug as string),

dashboard/src/hooks/dataBrowser/useTrackTableMutation/trackTableMigration.ts

@@ -6,7 +6,7 @@ import type {
   QueryResult,
 } from '@/types/dataBrowser';
 import normalizeQueryError from '@/utils/dataBrowser/normalizeQueryError';
-import { LOCAL_MIGRATIONS_URL } from '@/utils/env';
+import { getHasuraMigrationsApiUrl } from '@/utils/env';
 
 export interface TrackTableMigrationVariables {
   /**
@@ -24,7 +24,7 @@ export default async function trackTableMigration({
   adminSecret,
   table,
 }: TrackTableMigrationOptions & TrackTableMigrationVariables) {
-  const response = await fetch(`${LOCAL_MIGRATIONS_URL}/apis/migrate`, {
+  const response = await fetch(`${getHasuraMigrationsApiUrl()}/apis/migrate`, {
     method: 'POST',
     headers: {
       'x-hasura-admin-secret': adminSecret,

dashboard/src/hooks/dataBrowser/useTrackTableMutation/useTrackTableMutation.ts

@@ -1,6 +1,7 @@
 import useIsPlatform from '@/hooks/common/useIsPlatform';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
+import { getHasuraAdminSecret } from '@/utils/env';
 import type { MutationOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -48,7 +49,7 @@ export default function useTrackTableMutation({
         appUrl: customAppUrl || appUrl,
         adminSecret:
           process.env.NEXT_PUBLIC_ENV === 'dev'
-            ? 'nhost-admin-secret'
+            ? getHasuraAdminSecret()
             : customAdminSecret ||
               currentApplication?.config?.hasura.adminSecret,
         dataSource: customDataSource || (dataSourceSlug as string),

dashboard/src/hooks/dataBrowser/useUpdateColumnMutation/updateColumnMigration.ts

@@ -7,7 +7,7 @@ import type {
 } from '@/types/dataBrowser';
 import { getEmptyDownMigrationMessage } from '@/utils/dataBrowser/hasuraQueryHelpers';
 import normalizeQueryError from '@/utils/dataBrowser/normalizeQueryError';
-import { LOCAL_MIGRATIONS_URL } from '@/utils/env';
+import { getHasuraMigrationsApiUrl } from '@/utils/env';
 import prepareUpdateColumnQuery from './prepareUpdateColumnQuery';
 
 export interface UpdateColumnMigrationVariables {
@@ -66,7 +66,7 @@ export default async function updateColumnMigration({
     ];
   }
 
-  const response = await fetch(`${LOCAL_MIGRATIONS_URL}/apis/migrate`, {
+  const response = await fetch(`${getHasuraMigrationsApiUrl()}/apis/migrate`, {
     method: 'POST',
     headers: {
       'x-hasura-admin-secret': adminSecret,

dashboard/src/hooks/dataBrowser/useUpdateColumnMutation/useUpdateColumnMutation.ts

@@ -1,6 +1,7 @@
 import useIsPlatform from '@/hooks/common/useIsPlatform';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
+import { getHasuraAdminSecret } from '@/utils/env';
 import type { MutationOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -53,7 +54,7 @@ export default function useUpdateColumnMutation({
         appUrl: customAppUrl || appUrl,
         adminSecret:
           process.env.NEXT_PUBLIC_ENV === 'dev'
-            ? 'nhost-admin-secret'
+            ? getHasuraAdminSecret()
             : customAdminSecret ||
               currentApplication?.config?.hasura.adminSecret,
         dataSource: customDataSource || (dataSourceSlug as string),

dashboard/src/hooks/dataBrowser/useUpdateRecordMutation/useUpdateRecordMutation.ts

@@ -1,5 +1,6 @@
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
+import { getHasuraAdminSecret } from '@/utils/env';
 import type { MutationOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -53,7 +54,7 @@ export default function useUpdateRecordMutation<TData extends object = {}>({
         appUrl: customAppUrl || appUrl,
         adminSecret:
           process.env.NEXT_PUBLIC_ENV === 'dev'
-            ? 'nhost-admin-secret'
+            ? getHasuraAdminSecret()
             : customAdminSecret ||
               currentApplication?.config?.hasura.adminSecret,
         dataSource: customDataSource || (dataSourceSlug as string),

dashboard/src/hooks/dataBrowser/useUpdateTableMutation/updateTableMigration.ts

@@ -10,7 +10,7 @@ import type {
 } from '@/types/dataBrowser';
 import { getEmptyDownMigrationMessage } from '@/utils/dataBrowser/hasuraQueryHelpers';
 import normalizeQueryError from '@/utils/dataBrowser/normalizeQueryError';
-import { LOCAL_MIGRATIONS_URL } from '@/utils/env';
+import { getHasuraMigrationsApiUrl } from '@/utils/env';
 import prepareUpdateTableQuery from './prepareUpdateTableQuery';
 
 export interface UpdateTableMigrationVariables {
@@ -57,7 +57,7 @@ export default async function updateTableMigration({
     return;
   }
 
-  const response = await fetch(`${LOCAL_MIGRATIONS_URL}/apis/migrate`, {
+  const response = await fetch(`${getHasuraMigrationsApiUrl()}/apis/migrate`, {
     method: 'POST',
     headers: {
       'x-hasura-admin-secret': adminSecret,

dashboard/src/hooks/dataBrowser/useUpdateTableMutation/useUpdateTableMutation.ts

@@ -1,6 +1,7 @@
 import useIsPlatform from '@/hooks/common/useIsPlatform';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
+import { getHasuraAdminSecret } from '@/utils/env';
 import type { MutationOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -49,7 +50,7 @@ export default function useUpdateTableMutation({
         appUrl: customAppUrl || appUrl,
         adminSecret:
           process.env.NEXT_PUBLIC_ENV === 'dev'
-            ? 'nhost-admin-secret'
+            ? getHasuraAdminSecret()
             : customAdminSecret ||
               currentApplication?.config?.hasura.adminSecret,
         dataSource: customDataSource || (dataSourceSlug as string),

dashboard/src/hooks/overview/useDatabaseSizeOfApplication/fetchProjectDatabaseSize.ts

@@ -1,6 +1,7 @@
 import type { QueryError, QueryResult } from '@/types/dataBrowser';
 import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
 import normalizeQueryError from '@/utils/dataBrowser/normalizeQueryError';
+import { isPlatform } from '@/utils/env';
 
 export interface FetchProjectDatabaseSizeOptions {
   /**
@@ -32,6 +33,7 @@ export default async function fetchProjectDatabaseSize({
   region,
   adminSecret,
 }: FetchProjectDatabaseSizeOptions): Promise<FetchProjectDatabaseSizeReturnType> {
+  const IS_PLATFORM = isPlatform();
   const response = await fetch(
     `${generateAppServiceUrl(subdomain, region, 'hasura')}/v2/query`,
     {
@@ -43,7 +45,7 @@ export default async function fetchProjectDatabaseSize({
         type: 'run_sql',
         args: {
           sql: `SELECT pg_database_size('${
-            subdomain === 'localhost' ? 'postgres' : subdomain
+            !IS_PLATFORM ? 'postgres' : subdomain
           }');`,
         },
       }),

dashboard/src/hooks/overview/useDatabaseSizeOfApplication/useDatabaseSizeOfApplication.ts

@@ -1,4 +1,5 @@
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
+import { getHasuraAdminSecret } from '@/utils/env';
 import type { QueryKey, UseQueryOptions } from '@tanstack/react-query';
 import { useQuery } from '@tanstack/react-query';
 import type { FetchProjectDatabaseSizeReturnType } from './fetchProjectDatabaseSize';
@@ -21,14 +22,11 @@ export default function useDatabaseSizeOfApplication(
     queryKey,
     () =>
       fetchProjectDatabaseSize({
-        subdomain:
-          process.env.NEXT_PUBLIC_ENV === 'dev'
-            ? 'localhost'
-            : currentApplication?.subdomain,
+        subdomain: currentApplication?.subdomain,
         region: currentApplication?.region?.awsName,
         adminSecret:
           process.env.NEXT_PUBLIC_ENV === 'dev'
-            ? 'nhost-admin-secret'
+            ? getHasuraAdminSecret()
             : currentApplication?.config?.hasura.adminSecret,
       }),
     {

dashboard/src/hooks/useAppClient.ts

@@ -1,7 +1,13 @@
-import { LOCAL_SUBDOMAIN } from '@/utils/env';
+import {
+  getAuthServiceUrl,
+  getFunctionsServiceUrl,
+  getGraphqlServiceUrl,
+  getStorageServiceUrl,
+} from '@/utils/env';
 import { isDevOrStaging } from '@/utils/helpers';
 import type { NhostNextClientConstructorParams } from '@nhost/nextjs';
 import { NhostClient } from '@nhost/nextjs';
+import useIsPlatform from './common/useIsPlatform';
 import { useCurrentWorkspaceAndApplication } from './useCurrentWorkspaceAndApplication';
 
 export type UseAppClientOptions = NhostNextClientConstructorParams;
@@ -17,11 +23,22 @@ export type UseAppClientReturn = NhostClient;
 export function useAppClient(
   options?: UseAppClientOptions,
 ): UseAppClientReturn {
+  const isPlatform = useIsPlatform();
   const { currentApplication } = useCurrentWorkspaceAndApplication();
 
+  if (!isPlatform) {
+    return new NhostClient({
+      authUrl: getAuthServiceUrl(),
+      graphqlUrl: getGraphqlServiceUrl(),
+      storageUrl: getStorageServiceUrl(),
+      functionsUrl: getFunctionsServiceUrl(),
+      ...options,
+    });
+  }
+
   if (process.env.NEXT_PUBLIC_ENV === 'dev' || !currentApplication) {
     return new NhostClient({
-      subdomain: LOCAL_SUBDOMAIN,
+      subdomain: 'local',
       ...options,
     });
   }

dashboard/src/hooks/useCurrentWorkspaceAndApplication.tsx

@@ -2,6 +2,7 @@ import { useUserDataContext } from '@/context/workspace1-context';
 import type { Project } from '@/types/application';
 import { ApplicationStatus } from '@/types/application';
 import type { Workspace } from '@/types/workspace';
+import { getHasuraAdminSecret } from '@/utils/env';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 import useIsPlatform from './common/useIsPlatform';
@@ -40,7 +41,7 @@ export function useCurrentWorkspaceAndApplication(): UseCurrentWorkspaceAndAppli
           },
         ],
         deployments: [],
-        subdomain: 'localhost',
+        subdomain: 'local',
         region: {
           id: null,
           countryCode: null,
@@ -57,7 +58,7 @@ export function useCurrentWorkspaceAndApplication(): UseCurrentWorkspaceAndAppli
         plan: null,
         config: {
           hasura: {
-            adminSecret: 'nhost-admin-secret',
+            adminSecret: getHasuraAdminSecret(),
           },
         },
       };

dashboard/src/hooks/useFiles.ts

@@ -1,4 +1,5 @@
 import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
+import { getHasuraAdminSecret } from '@/utils/env';
 import type {
   Files_Order_By as FilesOrderBy,
   GetFilesQuery,
@@ -92,7 +93,7 @@ export default function useFiles({
                     headers: {
                       'x-hasura-admin-secret':
                         process.env.NEXT_PUBLIC_ENV === 'dev'
-                          ? 'nhost-admin-secret'
+                          ? getHasuraAdminSecret()
                           : currentApplication?.config?.hasura.adminSecret,
                     },
                     mode: 'cors',

dashboard/src/hooks/useRemoteApplicationGQLClient.tsx

@@ -1,5 +1,6 @@
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
+import { getHasuraAdminSecret } from '@/utils/env';
 import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client';
 import { useMemo } from 'react';
 
@@ -10,30 +11,28 @@ import { useMemo } from 'react';
 export function useRemoteApplicationGQLClient() {
   const { currentApplication } = useCurrentWorkspaceAndApplication();
 
-  const userApplicationClient = useMemo(
-    () =>
-      new ApolloClient({
-        cache: new InMemoryCache(),
-        link: new HttpLink({
-          uri: generateAppServiceUrl(
-            currentApplication?.subdomain,
-            currentApplication?.region.awsName,
-            'graphql',
-          ),
-          headers: {
-            'x-hasura-admin-secret':
-              process.env.NEXT_PUBLIC_ENV === 'dev'
-                ? 'nhost-admin-secret'
-                : currentApplication?.config?.hasura.adminSecret,
-          },
-        }),
+  const userApplicationClient = useMemo(() => {
+    if (!currentApplication) {
+      return new ApolloClient({ cache: new InMemoryCache() });
+    }
+
+    return new ApolloClient({
+      cache: new InMemoryCache(),
+      link: new HttpLink({
+        uri: generateAppServiceUrl(
+          currentApplication?.subdomain,
+          currentApplication?.region.awsName,
+          'graphql',
+        ),
+        headers: {
+          'x-hasura-admin-secret':
+            process.env.NEXT_PUBLIC_ENV === 'dev'
+              ? getHasuraAdminSecret()
+              : currentApplication?.config?.hasura.adminSecret,
+        },
       }),
-    [
-      currentApplication?.subdomain,
-      currentApplication?.region,
-      currentApplication?.config?.hasura.adminSecret,
-    ],
-  );
+    });
+  }, [currentApplication]);
 
   return userApplicationClient;
 }

dashboard/src/hooks/useSetAppWorkspaceContextFromUserContext.tsx

@@ -1,5 +1,6 @@
 import { useWorkspaceContext } from '@/context/workspace-context';
 import { useUserDataContext } from '@/context/workspace1-context';
+import { getHasuraAdminSecret } from '@/utils/env';
 import { useRouter } from 'next/router';
 import { useEffect } from 'react';
 import { useCurrentWorkspaceAndApplication } from './useCurrentWorkspaceAndApplication';
@@ -39,7 +40,7 @@ export const useSetAppWorkspaceContextFromUserContext = () => {
       appIsProvisioned: currentApplication.isProvisioned,
       appAdminSecret:
         process.env.NEXT_PUBLIC_ENV === 'dev'
-          ? 'nhost-admin-secret'
+          ? getHasuraAdminSecret()
           : currentApplication.config?.hasura.adminSecret,
       repository: currentApplication.githubRepository,
       provisioning:

dashboard/src/pages/[workspaceSlug]/[appSlug]/storage/index.tsx

@@ -4,6 +4,7 @@ import FilesDataGrid from '@/components/files/FilesDataGrid';
 import ProjectLayout from '@/components/layout/ProjectLayout';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
+import { getHasuraAdminSecret } from '@/utils/env';
 import { NhostApolloProvider } from '@nhost/react-apollo';
 import type { ReactElement } from 'react';
 
@@ -25,7 +26,7 @@ export default function StoragePage() {
       headers={{
         'x-hasura-admin-secret':
           process.env.NEXT_PUBLIC_ENV === 'dev'
-            ? 'nhost-admin-secret'
+            ? getHasuraAdminSecret()
             : currentApplication.config?.hasura.adminSecret,
       }}
     >

dashboard/src/utils/common/generateAppServiceUrl/generateAppServiceUrl.test.ts

@@ -14,6 +14,13 @@ beforeEach(() => {
   process.env = {
     NEXT_PUBLIC_NHOST_PLATFORM: 'false',
     NEXT_PUBLIC_ENV: 'dev',
+    NEXT_PUBLIC_NHOST_AUTH_URL: 'https://localdev.nhost.run/v1/auth',
+    NEXT_PUBLIC_NHOST_FUNCTIONS_URL: 'https://localdev.nhost.run/v1/functions',
+    NEXT_PUBLIC_NHOST_GRAPHQL_URL: 'https://localdev.nhost.run/v1/graphql',
+    NEXT_PUBLIC_NHOST_STORAGE_URL: 'https://localdev.nhost.run/v1/storage',
+    NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL: 'http://localhost:9695',
+    NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL: 'http://localhost:9693',
+    NEXT_PUBLIC_NHOST_HASURA_API_URL: 'http://localhost:8080',
     ...env,
   };
 });
@@ -73,8 +80,10 @@ test('should generate staging subdomains in staging environment', () => {
 });
 
 test('should generate no slug for Hasura neither in local mode nor in remote mode', () => {
+  process.env.NEXT_PUBLIC_NHOST_HASURA_API_URL = 'http://localhost:8082';
+
   expect(generateAppServiceUrl('test', 'eu-west-1', 'hasura')).toBe(
-    'http://localhost:1337',
+    'http://localhost:8082',
   );
 
   process.env.NEXT_PUBLIC_NHOST_PLATFORM = 'true';
@@ -91,15 +100,6 @@ test('should generate no slug for Hasura neither in local mode nor in remote mod
   );
 });
 
-test('should be able to override the default local backend slugs', () => {
-  expect(
-    generateAppServiceUrl('test', 'eu-west-1', 'storage', {
-      ...defaultLocalBackendSlugs,
-      storage: '/v1/storage',
-    }),
-  ).toBe('http://localhost:1337/v1/storage');
-});
-
 test('should be able to override the default remote backend slugs', () => {
   process.env.NEXT_PUBLIC_NHOST_PLATFORM = 'true';
   process.env.NEXT_PUBLIC_ENV = 'production';
@@ -115,41 +115,59 @@ test('should be able to override the default remote backend slugs', () => {
   ).toBe('https://test.hasura.eu-west-1.nhost.run/lorem-ipsum');
 });
 
-test('should generate a basic subdomain without region in local mode', () => {
-  expect(generateAppServiceUrl('test', 'eu-west-1', 'auth')).toBe(
-    `http://localhost:1337/v1/auth`,
+test('should construct service URLs based on environment variables', () => {
+  process.env.NEXT_PUBLIC_NHOST_HASURA_API_URL = 'https://localdev0.nhost.run';
+
+  expect(generateAppServiceUrl('test', 'eu-west-1', 'hasura')).toBe(
+    `https://localdev0.nhost.run`,
   );
 
+  process.env.NEXT_PUBLIC_NHOST_AUTH_URL =
+    'https://localdev1.nhost.run/v1/auth';
+
+  expect(generateAppServiceUrl('test', 'eu-west-1', 'auth')).toBe(
+    `https://localdev1.nhost.run/v1/auth`,
+  );
+
+  process.env.NEXT_PUBLIC_NHOST_STORAGE_URL =
+    'https://localdev2.nhost.run/v1/storage';
+
   expect(generateAppServiceUrl('test', 'eu-west-1', 'storage')).toBe(
-    'http://localhost:1337/v1/files',
+    'https://localdev2.nhost.run/v1/storage',
   );
 
+  process.env.NEXT_PUBLIC_NHOST_GRAPHQL_URL =
+    'https://localdev3.nhost.run/v1/graphql';
+
   expect(generateAppServiceUrl('test', 'eu-west-1', 'graphql')).toBe(
-    'http://localhost:1337/v1/graphql',
+    'https://localdev3.nhost.run/v1/graphql',
   );
 
+  process.env.NEXT_PUBLIC_NHOST_FUNCTIONS_URL =
+    'https://localdev4.nhost.run/v1/functions';
+
   expect(generateAppServiceUrl('test', 'eu-west-1', 'functions')).toBe(
-    'http://localhost:1337/v1/functions',
+    'https://localdev4.nhost.run/v1/functions',
   );
 });
 
 test('should generate a basic subdomain with a custom port if provided', () => {
-  const CUSTOM_BACKEND_PORT = '1338';
-  process.env.NEXT_PUBLIC_NHOST_LOCAL_BACKEND_PORT = CUSTOM_BACKEND_PORT;
+  process.env.NEXT_PUBLIC_NHOST_BACKEND_URL = `http://localhost:1338`;
+  process.env.NEXT_PUBLIC_NHOST_PLATFORM = 'true';
 
   expect(generateAppServiceUrl('test', 'eu-west-1', 'auth')).toBe(
-    `http://localhost:${CUSTOM_BACKEND_PORT}/v1/auth`,
+    `http://localhost:1338/v1/auth`,
   );
 
   expect(generateAppServiceUrl('test', 'eu-west-1', 'storage')).toBe(
-    `http://localhost:${CUSTOM_BACKEND_PORT}/v1/files`,
+    `http://localhost:1338/v1/files`,
   );
 
   expect(generateAppServiceUrl('test', 'eu-west-1', 'graphql')).toBe(
-    `http://localhost:${CUSTOM_BACKEND_PORT}/v1/graphql`,
+    `http://localhost:1338/v1/graphql`,
   );
 
   expect(generateAppServiceUrl('test', 'eu-west-1', 'functions')).toBe(
-    `http://localhost:${CUSTOM_BACKEND_PORT}/v1/functions`,
+    `http://localhost:1338/v1/functions`,
   );
 });

dashboard/src/utils/common/generateAppServiceUrl/generateAppServiceUrl.ts

@@ -1,3 +1,12 @@
+import {
+  getAuthServiceUrl,
+  getFunctionsServiceUrl,
+  getGraphqlServiceUrl,
+  getHasuraApiUrl,
+  getStorageServiceUrl,
+  isPlatform,
+} from '@/utils/env';
+
 export type NhostService =
   | 'auth'
   | 'graphql'
@@ -31,7 +40,8 @@ export const defaultRemoteBackendSlugs: Record<NhostService, string> = {
 };
 
 /**
- * Generates a service specific URL for a project.
+ * Generates a service specific URL for a project. Provided `subdomain` is
+ * omitted if the dashboard is running in local mode.
  *
  * @param subdomain - The project's subdomain
  * @param region - The project's region
@@ -47,19 +57,30 @@ export default function generateAppServiceUrl(
   localBackendSlugs = defaultLocalBackendSlugs,
   remoteBackendSlugs = defaultRemoteBackendSlugs,
 ) {
-  if (process.env.NEXT_PUBLIC_NHOST_PLATFORM !== 'true') {
-    return `http://localhost:${
-      process.env.NEXT_PUBLIC_NHOST_LOCAL_BACKEND_PORT || 1337
-    }${localBackendSlugs[service]}`;
+  const IS_PLATFORM = isPlatform();
+
+  if (!IS_PLATFORM) {
+    const serviceUrls: Record<typeof service, string> = {
+      auth: getAuthServiceUrl(),
+      graphql: getGraphqlServiceUrl(),
+      storage: getStorageServiceUrl(),
+      functions: getFunctionsServiceUrl(),
+      hasura: getHasuraApiUrl(),
+    };
+
+    if (!serviceUrls[service]) {
+      throw new Error(
+        `Service URL for "${service}" is not defined. Please check your .env file.`,
+      );
+    }
+
+    return serviceUrls[service];
   }
 
+  // This is only used when running the dashboard locally against its own
+  // backend.
   if (process.env.NEXT_PUBLIC_ENV === 'dev') {
-    return `${
-      process.env.NEXT_PUBLIC_NHOST_BACKEND_URL ||
-      `http://localhost:${
-        process.env.NEXT_PUBLIC_NHOST_LOCAL_BACKEND_PORT || 1337
-      }`
-    }${localBackendSlugs[service]}`;
+    return `${process.env.NEXT_PUBLIC_NHOST_BACKEND_URL}${localBackendSlugs[service]}`;
   }
 
   if (process.env.NEXT_PUBLIC_ENV === 'staging') {

dashboard/src/utils/env.ts

@@ -1,36 +1,92 @@
 /**
- * URL of Hasura's Migration API. This is only used when local development is
- * enabled.
+ * Determines whether the Nhost Dashboard is running in a cloud environment.
  */
-export const LOCAL_MIGRATIONS_URL = `http://localhost:${
-  process.env.NEXT_PUBLIC_NHOST_LOCAL_MIGRATIONS_PORT || 9693
-}`;
-
-/**
- * Port of the locally running backend.s
- */
-export const LOCAL_BACKEND_PORT =
-  process.env.NEXT_PUBLIC_NHOST_LOCAL_BACKEND_PORT;
-
-/**
- * Local subdomain. This is only used when local development is enabled.
- */
-export const LOCAL_SUBDOMAIN = LOCAL_BACKEND_PORT
-  ? `localhost:${LOCAL_BACKEND_PORT}`
-  : 'localhost';
-
-/**
- * URL of Hasura Console. This is only used when running the Nhost Dashboard
- * locally.
- */
-export const LOCAL_HASURA_URL = `http://localhost:${
-  process.env.NEXT_PUBLIC_NHOST_LOCAL_HASURA_PORT || 9695
-}`;
+export function isPlatform() {
+  return process.env.NEXT_PUBLIC_NHOST_PLATFORM === 'true';
+}
 
 /**
  * Backend URL for the locally running instance. This is only used when running
  * the Nhost Dashboard locally.
  */
-export const LOCAL_BACKEND_URL = `http://localhost:${
-  process.env.NEXT_PUBLIC_NHOST_LOCAL_BACKEND_PORT || 1337
-}`;
+export function getLocalBackendUrl() {
+  return `http://localhost:${
+    process.env.NEXT_PUBLIC_NHOST_LOCAL_SERVICES_PORT || '1337'
+  }`;
+}
+
+/**
+ * Admin secret for Hasura.
+ */
+export function getHasuraAdminSecret() {
+  return process.env.NEXT_PUBLIC_NHOST_ADMIN_SECRET || 'nhost-admin-secret';
+}
+
+/**
+ * Custom URL of the Auth service.
+ */
+export function getAuthServiceUrl() {
+  return (
+    process.env.NEXT_PUBLIC_NHOST_AUTH_URL || 'https://local.auth.nhost.run/v1'
+  );
+}
+
+/**
+ * Custom URL of the GraphQL service.
+ */
+export function getGraphqlServiceUrl() {
+  return (
+    process.env.NEXT_PUBLIC_NHOST_GRAPHQL_URL ||
+    'https://local.graphql.nhost.run/v1'
+  );
+}
+
+/**
+ * Custom URL of the Storage service.
+ */
+export function getStorageServiceUrl() {
+  return (
+    process.env.NEXT_PUBLIC_NHOST_STORAGE_URL ||
+    'https://local.storage.nhost.run/v1'
+  );
+}
+
+/**
+ * Custom URL of the Functions service.
+ */
+export function getFunctionsServiceUrl() {
+  return (
+    process.env.NEXT_PUBLIC_NHOST_FUNCTIONS_URL ||
+    'https://local.functions.nhost.run/v1'
+  );
+}
+
+/**
+ * Custom URL of the Hasura service.
+ */
+export function getHasuraConsoleServiceUrl() {
+  return (
+    process.env.NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL ||
+    'https://local.hasura.nhost.run'
+  );
+}
+
+/**
+ * Custom URL of the Hasura Migrations API.
+ */
+export function getHasuraMigrationsApiUrl() {
+  return (
+    process.env.NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL ||
+    'https://local.hasura.nhost.run/v1/migrations'
+  );
+}
+
+/**
+ * Custom URL of the Hasura Schema and Metadata API.
+ */
+export function getHasuraApiUrl() {
+  return (
+    process.env.NEXT_PUBLIC_NHOST_HASURA_API_URL ||
+    'https://local.hasura.nhost.run'
+  );
+}

dashboard/src/utils/helpers.ts

@@ -1,7 +1,7 @@
 import features from '@/data/features.json';
 import { ApplicationStatus } from '@/types/application';
+import { getLocalBackendUrl } from '@/utils/env';
 import slugify from 'slugify';
-import { LOCAL_BACKEND_URL } from './env';
 import type { DeploymentRowFragment } from './__generated__/graphql';
 
 export function getLastLiveDeployment(deployments?: DeploymentRowFragment[]) {
@@ -57,11 +57,11 @@ export function getCurrentEnvironment(): Environment {
 
 export function generateRemoteAppUrl(subdomain: string): string {
   if (process.env.NEXT_PUBLIC_NHOST_PLATFORM !== 'true') {
-    return LOCAL_BACKEND_URL;
+    return getLocalBackendUrl();
   }
 
   if (process.env.NEXT_PUBLIC_ENV === 'dev') {
-    return process.env.NEXT_PUBLIC_NHOST_BACKEND_URL || LOCAL_BACKEND_URL;
+    return process.env.NEXT_PUBLIC_NHOST_BACKEND_URL;
   }
 
   if (process.env.NEXT_PUBLIC_ENV === 'staging') {

dashboard/src/utils/msw/mocks/rest/hasuraMetadataQuery.ts

@@ -1,7 +1,7 @@
 import { rest } from 'msw';
 
 const hasuraMetadataQuery = rest.post(
-  'http://localhost:1337/v1/metadata',
+  'http://localhost:8080/v1/metadata',
   (_req, res, ctx) =>
     res(
       ctx.delay(250),

dashboard/src/utils/msw/mocks/rest/tableQuery.ts

@@ -1,7 +1,7 @@
 import { rest } from 'msw';
 
 const tableQuery = rest.post(
-  'http://localhost:1337/v2/query',
+  'http://localhost:8080/v2/query',
   async (req, res, ctx) => {
     const body = await req.json();
 

dashboard/src/utils/nhost.ts

@@ -1,9 +1,25 @@
+import {
+  getAuthServiceUrl,
+  getFunctionsServiceUrl,
+  getGraphqlServiceUrl,
+  getStorageServiceUrl,
+  isPlatform,
+} from '@/utils/env';
 import { NhostClient } from '@nhost/nextjs';
-import { LOCAL_SUBDOMAIN } from './env';
 
-export const nhost =
-  process.env.NEXT_PUBLIC_NHOST_PLATFORM === 'true'
-    ? new NhostClient({ backendUrl: process.env.NEXT_PUBLIC_NHOST_BACKEND_URL })
-    : new NhostClient({ subdomain: LOCAL_SUBDOMAIN });
+// eslint-disable-next-line no-nested-ternary
+export const nhost = isPlatform()
+  ? new NhostClient({ backendUrl: process.env.NEXT_PUBLIC_NHOST_BACKEND_URL })
+  : getAuthServiceUrl() &&
+    getGraphqlServiceUrl() &&
+    getStorageServiceUrl() &&
+    getFunctionsServiceUrl()
+  ? new NhostClient({
+      authUrl: getAuthServiceUrl(),
+      graphqlUrl: getGraphqlServiceUrl(),
+      storageUrl: getStorageServiceUrl(),
+      functionsUrl: getFunctionsServiceUrl(),
+    })
+  : new NhostClient({ subdomain: 'local' });
 
 export default nhost;

dashboard/src/utils/testUtils.tsx

@@ -31,6 +31,19 @@ const queryClient = new QueryClient({
   },
 });
 
+process.env = {
+  NODE_ENV: 'development',
+  NEXT_PUBLIC_NHOST_PLATFORM: 'false',
+  NEXT_PUBLIC_ENV: 'dev',
+  NEXT_PUBLIC_NHOST_AUTH_URL: 'https://localdev.nhost.run/v1/auth',
+  NEXT_PUBLIC_NHOST_FUNCTIONS_URL: 'https://localdev.nhost.run/v1/functions',
+  NEXT_PUBLIC_NHOST_GRAPHQL_URL: 'https://localdev.nhost.run/v1/graphql',
+  NEXT_PUBLIC_NHOST_STORAGE_URL: 'https://localdev.nhost.run/v1/storage',
+  NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL: 'http://localhost:9695',
+  NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL: 'http://localhost:9693',
+  NEXT_PUBLIC_NHOST_HASURA_API_URL: 'http://localhost:8080',
+};
+
 export const mockRouter: NextRouter = {
   basePath: '',
   pathname: '/',

integrations/apollo/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @nhost/apollo
 
+## 5.0.9
+
+### Patch Changes
+
+- Updated dependencies [088584e7]
+  - @nhost/nhost-js@2.0.9
+
+## 5.0.8
+
+### Patch Changes
+
+- Updated dependencies [1d155559]
+  - @nhost/nhost-js@2.0.8
+
 ## 5.0.7
 
 ### Patch Changes

integrations/apollo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/apollo",
-  "version": "5.0.7",
+  "version": "5.0.9",
   "description": "Nhost Apollo Client library",
   "license": "MIT",
   "keywords": [

integrations/react-apollo/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @nhost/react-apollo
 
+## 5.0.10
+
+### Patch Changes
+
+- Updated dependencies [f375eacc]
+  - @nhost/react@2.0.9
+  - @nhost/apollo@5.0.9
+
+## 5.0.9
+
+### Patch Changes
+
+- @nhost/apollo@5.0.8
+- @nhost/react@2.0.8
+
 ## 5.0.8
 
 ### Patch Changes

integrations/react-apollo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/react-apollo",
-  "version": "5.0.8",
+  "version": "5.0.10",
   "description": "Nhost React Apollo client",
   "license": "MIT",
   "keywords": [

integrations/react-urql/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @nhost/react-urql
 
+## 2.0.9
+
+### Patch Changes
+
+- Updated dependencies [f375eacc]
+  - @nhost/react@2.0.9
+
+## 2.0.8
+
+### Patch Changes
+
+- @nhost/react@2.0.8
+
 ## 2.0.7
 
 ### Patch Changes

integrations/react-urql/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/react-urql",
-  "version": "2.0.7",
+  "version": "2.0.9",
   "description": "Nhost React URQL client",
   "license": "MIT",
   "keywords": [

packages/nextjs/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @nhost/nextjs
 
+## 1.13.15
+
+### Patch Changes
+
+- f375eacc: fix(nextjs): accept service URLs
+- Updated dependencies [f375eacc]
+  - @nhost/react@2.0.9
+
+## 1.13.14
+
+### Patch Changes
+
+- @nhost/react@2.0.8
+
 ## 1.13.13
 
 ### Patch Changes

packages/nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/nextjs",
-  "version": "1.13.13",
+  "version": "1.13.15",
   "description": "Nhost NextJS library",
   "license": "MIT",
   "keywords": [

packages/nextjs/src/index.ts

@@ -1,9 +1,7 @@
 import {
-  BackendUrl,
-  NhostAuthConstructorParams,
   NhostClient as ReactNhostClient,
   NhostProvider,
-  Subdomain
+  NhostReactClientConstructorParams
 } from '@nhost/react'
 import { setNhostSessionInCookie } from './utils'
 
@@ -18,12 +16,10 @@ export const NhostNextProvider: typeof NhostProvider = NhostProvider
 const isBrowser = typeof window !== 'undefined'
 
 export interface NhostNextClientConstructorParams
-  extends Partial<BackendUrl>,
-    Partial<Subdomain>,
-    Omit<
-      NhostAuthConstructorParams,
-      'url' | 'start' | 'client' | 'clientStorage' | 'clientStorageType'
-    > {}
+  extends Omit<
+    NhostReactClientConstructorParams,
+    'clientStorage' | 'clientStorageType' | 'clientStorageGetter' | 'clientStorageSetter'
+  > {}
 
 export class NhostClient extends ReactNhostClient {
   constructor(params: NhostNextClientConstructorParams) {

packages/nhost-js/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nhost/nhost-js
 
+## 2.0.9
+
+### Patch Changes
+
+- 088584e7: feat(nhost-js): add support for `local` as a special subdomain
+
+## 2.0.8
+
+### Patch Changes
+
+- 1d155559: fix(nhost-js): allow `null` as body and return JSON when `content-type` is `application/json`
+
 ## 2.0.7
 
 ### Patch Changes

packages/nhost-js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/nhost-js",
-  "version": "2.0.7",
+  "version": "2.0.9",
   "description": "Nhost JavaScript SDK",
   "license": "MIT",
   "keywords": [

packages/nhost-js/src/clients/functions/index.ts

@@ -40,7 +40,7 @@ export class NhostFunctionsClient {
 
   async call<T = unknown, D = any>(
     url: string,
-    data: D,
+    data: D | null,
     config?: NhostFunctionCallConfig
   ): Promise<NhostFunctionCallResponse<T>>
 
@@ -56,7 +56,7 @@ export class NhostFunctionsClient {
    */
   async call<T = unknown, D = any>(
     url: string,
-    body: D,
+    body: D | null,
     config?: NhostFunctionCallConfig
   ): Promise<NhostFunctionCallResponse<T>> {
     const headers: HeadersInit = {
@@ -69,7 +69,7 @@ export class NhostFunctionsClient {
 
     try {
       const result = await fetch(fullUrl, {
-        body: JSON.stringify(body),
+        body: body ? JSON.stringify(body) : null,
         headers,
         method: 'POST'
       })
@@ -80,7 +80,7 @@ export class NhostFunctionsClient {
 
       let data: T
 
-      if (result.headers.get('content-type') === 'application/json') {
+      if (result.headers.get('content-type')?.includes('application/json')) {
         data = await result.json()
       } else {
         data = (await result.text()) as unknown as T

packages/nhost-js/src/utils/helpers.ts

@@ -2,7 +2,7 @@ import { NhostClientConstructorParams } from './types'
 
 // a port can be a number or a placeholder string with leading and trailing double underscores, f.e. "8080" or "__PLACEHOLDER_NAME__"
 export const LOCALHOST_REGEX =
-  /^((?<protocol>http[s]?):\/\/)?(?<host>localhost)(:(?<port>(\d+|__\w+__)))?$/
+  /^((?<protocol>http[s]?):\/\/)?(?<host>(localhost|local))(:(?<port>(\d+|__\w+__)))?$/
 
 /**
  * `backendUrl` should now be used only when self-hosting
@@ -26,20 +26,31 @@ export function urlFromSubdomain(
     throw new Error('Either `backendUrl` or `subdomain` must be set.')
   }
 
-  // check if subdomain is [http[s]://]localhost[:port]
+  // check if subdomain is [http[s]://]localhost[:port] or [http[s]://]local[:port]
   const subdomainLocalhostFound = subdomain.match(LOCALHOST_REGEX)
   if (subdomainLocalhostFound?.groups) {
-    const { protocol = 'http', host, port = 1337 } = subdomainLocalhostFound.groups
+    const { protocol, host, port } = subdomainLocalhostFound.groups
 
     const urlFromEnv = getValueFromEnv(service)
     if (urlFromEnv) {
       return urlFromEnv
     }
-    return `${protocol}://${host}:${port}/v1/${service}`
+
+    if (host === 'localhost') {
+      console.warn(
+        'The `subdomain` is set to "localhost". Support for this will be removed in a future release. Please use "local" instead.'
+      )
+
+      return `${protocol || 'http'}://localhost:${port || 1337}/v1/${service}`
+    }
+
+    return port
+      ? `${protocol || 'https'}://local.${service}.nhost.run:${port}/v1`
+      : `${protocol || 'https'}://local.${service}.nhost.run/v1`
   }
 
   if (!region) {
-    throw new Error('`region` must be set when using a `subdomain` other than "localhost".')
+    throw new Error('`region` must be set when using a `subdomain` other than "local".')
   }
 
   return `https://${subdomain}.${service}.${region}.nhost.run/v1`

packages/nhost-js/tests/utils.test.ts

@@ -1,4 +1,4 @@
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { buildUrl, LOCALHOST_REGEX, urlFromSubdomain } from '../src/utils/helpers'
 
 describe('urlFromParams', () => {
@@ -56,6 +56,38 @@ describe('urlFromParams', () => {
       })
     })
 
+    describe('"local" without a custom port', () => {
+      it('should return the full authentication url', async () => {
+        const url = urlFromSubdomain({ subdomain: 'local' }, 'auth')
+
+        expect(url).toBe('https://local.auth.nhost.run/v1')
+      })
+
+      it('should return the full storage url', async () => {
+        const url = urlFromSubdomain({ subdomain: 'local' }, 'storage')
+
+        expect(url).toBe('https://local.storage.nhost.run/v1')
+      })
+
+      it('should return the full GraphQL url', async () => {
+        const url = urlFromSubdomain({ subdomain: 'local' }, 'graphql')
+
+        expect(url).toBe('https://local.graphql.nhost.run/v1')
+      })
+
+      it('should return the full functions url', async () => {
+        const url = urlFromSubdomain({ subdomain: 'local' }, 'functions')
+
+        expect(url).toBe('https://local.functions.nhost.run/v1')
+      })
+
+      it('should return the full Hasura url', async () => {
+        const url = urlFromSubdomain({ subdomain: 'local' }, 'hasura')
+
+        expect(url).toBe('https://local.hasura.nhost.run/v1')
+      })
+    })
+
     describe('"localhost" with a custom port', () => {
       it('should use the specified port and return "http://localhost:2001/v1/auth"', async () => {
         const url = urlFromSubdomain({ subdomain: 'localhost:2001' }, 'auth')

packages/react/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @nhost/react
 
+## 2.0.9
+
+### Patch Changes
+
+- f375eacc: fix(react): accept service URLs
+- Updated dependencies [088584e7]
+  - @nhost/nhost-js@2.0.9
+
+## 2.0.8
+
+### Patch Changes
+
+- Updated dependencies [1d155559]
+  - @nhost/nhost-js@2.0.8
+
 ## 2.0.7
 
 ### Patch Changes

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/react",
-  "version": "2.0.7",
+  "version": "2.0.9",
   "description": "Nhost React library",
   "license": "MIT",
   "keywords": [

packages/react/src/client.ts

@@ -1,17 +1,13 @@
 import {
-  BackendUrl,
-  NhostAuthConstructorParams,
   NhostClient as _VanillaNhostClient,
-  Subdomain
+  NhostClientConstructorParams as VanillaNhostClientConstructorParams
 } from '@nhost/nhost-js'
 
 /** @internal */
 export const VanillaNhostClient = _VanillaNhostClient
 
 export interface NhostReactClientConstructorParams
-  extends Partial<BackendUrl>,
-    Partial<Subdomain>,
-    Omit<NhostAuthConstructorParams, 'url' | 'start' | 'client'> {}
+  extends Omit<VanillaNhostClientConstructorParams, 'start' | 'client'> {}
 
 export class NhostClient extends VanillaNhostClient {
   constructor(params: NhostReactClientConstructorParams) {

packages/vue/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @nhost/vue
 
+## 1.13.15
+
+### Patch Changes
+
+- Updated dependencies [088584e7]
+  - @nhost/nhost-js@2.0.9
+
+## 1.13.14
+
+### Patch Changes
+
+- Updated dependencies [1d155559]
+  - @nhost/nhost-js@2.0.8
+
 ## 1.13.13
 
 ### Patch Changes

packages/vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/vue",
-  "version": "1.13.13",
+  "version": "1.13.15",
   "description": "Nhost Vue library",
   "license": "MIT",
   "keywords": [