feat: serverURL no longer required in config

demo/payload.config.ts

@@ -32,7 +32,6 @@ import GlobalWithStrictAccess from './globals/GlobalWithStrictAccess';
 
 export default buildConfig({
   cookiePrefix: 'payload',
-  serverURL: 'http://localhost:3000',
   admin: {
     user: 'admins',
     indexHTML: path.resolve(__dirname, './client/index.html'),

src/admin/components/views/Account/index.tsx

@@ -9,6 +9,7 @@ import DefaultAccount from './Default';
 import buildStateFromSchema from '../../forms/Form/buildStateFromSchema';
 import RenderCustomComponent from '../../utilities/RenderCustomComponent';
 import { NegativeFieldGutterProvider } from '../../forms/FieldTypeGutter/context';
+import getAbsoluteURL from '../../../utilities/getAbsoluteURL';
 
 const AccountView: React.FC = () => {
   const { state: locationState } = useLocation<{ data: unknown }>();
@@ -47,7 +48,7 @@ const AccountView: React.FC = () => {
 
   const hasSavePermission = collectionPermissions?.update?.permission;
   const dataToRender = locationState?.data || data;
-  const apiURL = `${serverURL}${api}/${user.collection}/${data?.id}`;
+  const apiURL = `${getAbsoluteURL(serverURL)}${api}/${user.collection}/${data?.id}`;
 
   const action = `${serverURL}${api}/${user.collection}/${data?.id}?locale=${locale}&depth=0`;
 

src/admin/components/views/Global/index.tsx

@@ -11,6 +11,7 @@ import DefaultGlobal from './Default';
 import buildStateFromSchema from '../../forms/Form/buildStateFromSchema';
 import { NegativeFieldGutterProvider } from '../../forms/FieldTypeGutter/context';
 import { IndexProps } from './types';
+import getAbsoluteURL from '../../../utilities/getAbsoluteURL';
 
 const GlobalView: React.FC<IndexProps> = (props) => {
   const { state: locationState } = useLocation<{data?: Record<string, unknown>}>();
@@ -90,7 +91,7 @@ const GlobalView: React.FC<IndexProps> = (props) => {
           initialState,
           global,
           onSave,
-          apiURL: `${serverURL}${api}/globals/${slug}?depth=0`,
+          apiURL: `${getAbsoluteURL(serverURL)}${api}/globals/${slug}?depth=0`,
           action: `${serverURL}${api}/globals/${slug}?locale=${locale}&depth=0&fallback-locale=null`,
         }}
       />

src/admin/components/views/collections/Edit/index.tsx

@@ -11,6 +11,7 @@ import { NegativeFieldGutterProvider } from '../../../forms/FieldTypeGutter/cont
 import { useLocale } from '../../../utilities/Locale';
 import { IndexProps } from './types';
 import { StepNavItem } from '../../../elements/StepNav/types';
+import getAbsoluteURL from '../../../../utilities/getAbsoluteURL';
 
 const EditView: React.FC<IndexProps> = (props) => {
   const { collection, isEditing } = props;
@@ -93,7 +94,7 @@ const EditView: React.FC<IndexProps> = (props) => {
 
   const collectionPermissions = permissions?.collections?.[slug];
 
-  const apiURL = `${serverURL}${api}/${slug}/${id}`;
+  const apiURL = `${getAbsoluteURL(serverURL)}${api}/${slug}/${id}`;
   const action = `${serverURL}${api}/${slug}${isEditing ? `/${id}` : ''}?locale=${locale}&depth=0&fallback-locale=null`;
   const hasSavePermission = (isEditing && collectionPermissions?.update?.permission) || (!isEditing && collectionPermissions?.create?.permission);
 

src/admin/utilities/getAbsoluteURL.ts

@@ -0,0 +1 @@
+export default (url: string): string => (url === '' ? `${window.location.protocol}//${window.location.host}` : url);

src/config/defaults.ts

@@ -6,6 +6,7 @@ export const defaults = {
   collections: [],
   globals: [],
   cookiePrefix: 'payload',
+  serverURL: '',
   csrf: [],
   cors: [],
   admin: {

src/config/sanitize.ts

@@ -1,11 +1,11 @@
 import merge from 'deepmerge';
-import { PayloadConfig, Config } from './types';
+import {PayloadConfig, Config} from './types';
 import defaultUser from '../auth/defaultUser';
 import sanitizeCollection from '../collections/config/sanitize';
-import { InvalidConfiguration } from '../errors';
+import {InvalidConfiguration} from '../errors';
 import sanitizeGlobals from '../globals/config/sanitize';
 import checkDuplicateCollections from '../utilities/checkDuplicateCollections';
-import { defaults } from './defaults';
+import {defaults} from './defaults';
 
 const sanitizeConfig = (config: PayloadConfig): Config => {
   const sanitizedConfig = merge(defaults, config) as PayloadConfig;
@@ -28,7 +28,7 @@ const sanitizeConfig = (config: PayloadConfig): Config => {
   sanitizedConfig.csrf = [
     ...sanitizedConfig.csrf,
     config.serverURL,
-  ];
+  ].filter((item) => item);
 
   return sanitizedConfig as Config;
 };

src/config/schema.ts

@@ -9,7 +9,7 @@ const component = joi.alternatives().try(
 
 export default joi.object({
   serverURL: joi.string()
-    .required(),
+    .allow(null, ''),
   cookiePrefix: joi.string(),
   routes: joi.object({
     admin: joi.string(),

src/config/types.ts

@@ -85,7 +85,7 @@ export type PayloadConfig = {
   };
   collections?: PayloadCollectionConfig[];
   globals?: PayloadGlobalConfig[];
-  serverURL: string;
+  serverURL?: string;
   cookiePrefix?: string;
   csrf?: string[];
   cors?: string[] | '*';