From 8bead7624cb8c8008400942fac86faa86da6a929 Mon Sep 17 00:00:00 2001 From: RostiMelk Date: Wed, 11 Dec 2024 18:14:37 +0100 Subject: [PATCH 1/5] feat: set cors for template package --- .../init-project/bootstrapRemoteTemplate.ts | 9 ++- .../@sanity/cli/src/util/frameworkPort.ts | 63 +++++++++++++++++++ .../@sanity/cli/src/util/remoteTemplate.ts | 16 +++++ 3 files changed, 87 insertions(+), 1 deletion(-) create mode 100644 packages/@sanity/cli/src/util/frameworkPort.ts diff --git a/packages/@sanity/cli/src/actions/init-project/bootstrapRemoteTemplate.ts b/packages/@sanity/cli/src/actions/init-project/bootstrapRemoteTemplate.ts index 977746a7ea3..611cfdea1f3 100644 --- a/packages/@sanity/cli/src/actions/init-project/bootstrapRemoteTemplate.ts +++ b/packages/@sanity/cli/src/actions/init-project/bootstrapRemoteTemplate.ts @@ -13,12 +13,14 @@ import { generateSanityApiReadToken, getPackages, type RepoInfo, + setCorsOrigin, tryApplyPackageName, validateRemoteTemplate, } from '../../util/remoteTemplate' import {type GenerateConfigOptions} from './createStudioConfig' import {tryGitInit} from './git' import {updateInitialTemplateMetadata} from './updateInitialTemplateMetadata' +import {getDefaultPortForFramework} from '../../util/frameworkPort' export interface BootstrapRemoteOptions { outputPath: string @@ -65,7 +67,12 @@ export async function bootstrapRemoteTemplate( fs: new LocalFileSystemDetector(packagePath), frameworkList: frameworks as readonly Framework[], }) - // Next.js uses `.env.local` for local environment variables + const port = getDefaultPortForFramework(packageFramework?.slug) + + debug('Setting CORS origin to http://localhost:%d', port) + await setCorsOrigin(`http://localhost:${port}`, variables.projectId, apiClient) + + debug('Applying environment variables to %s', pkg) const envName = packageFramework?.slug === 'nextjs' ? '.env.local' : '.env' await applyEnvVariables(packagePath, {...variables, readToken}, envName) } diff --git a/packages/@sanity/cli/src/util/frameworkPort.ts b/packages/@sanity/cli/src/util/frameworkPort.ts new file mode 100644 index 00000000000..b8609f0d56c --- /dev/null +++ b/packages/@sanity/cli/src/util/frameworkPort.ts @@ -0,0 +1,63 @@ +const FALLBACK_PORT = 3000 + +const portMap: Record = { + 'nextjs': 3000, + 'blitzjs': 3000, + 'gatsby': 8000, + 'remix': 3000, + 'astro': 3000, + 'hexo': 4000, + 'eleventy': 8080, + 'docusaurus': 3000, + 'docusaurus-2': 3000, + 'preact': 8080, + 'solidstart': 3000, + 'solidstart-1': 3000, + 'dojo': 3000, + 'ember': 4200, + 'vue': 8080, + 'scully': 1668, + 'ionic-angular': 4200, + 'angular': 4200, + 'polymer': 8081, + 'svelte': 5000, + 'sveltekit': 5173, + 'sveltekit-1': 5173, + 'ionic-react': 3000, + 'create-react-app': 3000, + 'gridsome': 8080, + 'umijs': 8000, + 'saber': 3000, + 'stencil': 3333, + 'nuxtjs': 3000, + 'redwoodjs': 8910, + 'hugo': 1313, + 'jekyll': 4000, + 'brunch': 3333, + 'middleman': 4567, + 'zola': 1111, + 'hydrogen': 3000, + 'vite': 5173, + 'vitepress': 5173, + 'vuepress': 8080, + 'parcel': 1234, + 'fasthtml': 8000, + 'sanity': 3333, + 'sanity-v3': 3333, + 'storybook': 6006, +} + +/** + * Returns the default development port for a given framework. + * Contains default ports for all frameworks supported by `@vercel/frameworks`. + * Falls back to port 3000 if framework is not found or not specified. + * + * @see https://github.com/vercel/vercel/blob/main/packages/frameworks/src/frameworks.ts + * for the complete list of supported frameworks + * + * @param frameworkSlug - The framework identifier from `@vercel/frameworks` + * @returns The default port number for the framework + */ +export function getDefaultPortForFramework(frameworkSlug?: string | null): number { + return portMap[frameworkSlug ?? ''] ?? FALLBACK_PORT +} diff --git a/packages/@sanity/cli/src/util/remoteTemplate.ts b/packages/@sanity/cli/src/util/remoteTemplate.ts index 77db18ec5e9..6f5776890e7 100644 --- a/packages/@sanity/cli/src/util/remoteTemplate.ts +++ b/packages/@sanity/cli/src/util/remoteTemplate.ts @@ -318,3 +318,19 @@ export async function generateSanityApiReadToken( }) return response.key } + +export async function setCorsOrigin( + origin: string, + projectId: string, + apiClient: CliApiClient, +): Promise { + try { + await apiClient({api: {projectId}}).request({ + method: 'POST', + url: '/cors', + body: {origin: origin, allowCredentials: false}, + }) + } catch { + // Silent fail, it most likely means that the origin is already set + } +} From 01883fa3c37d57ab96d9af3f39f1267d720b05c7 Mon Sep 17 00:00:00 2001 From: RostiMelk Date: Fri, 13 Dec 2024 13:07:18 +0100 Subject: [PATCH 2/5] feat: add back comment --- .../cli/src/actions/init-project/bootstrapRemoteTemplate.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/@sanity/cli/src/actions/init-project/bootstrapRemoteTemplate.ts b/packages/@sanity/cli/src/actions/init-project/bootstrapRemoteTemplate.ts index 611cfdea1f3..c8719b0ce12 100644 --- a/packages/@sanity/cli/src/actions/init-project/bootstrapRemoteTemplate.ts +++ b/packages/@sanity/cli/src/actions/init-project/bootstrapRemoteTemplate.ts @@ -73,6 +73,7 @@ export async function bootstrapRemoteTemplate( await setCorsOrigin(`http://localhost:${port}`, variables.projectId, apiClient) debug('Applying environment variables to %s', pkg) + // Next.js uses `.env.local` for local environment variables const envName = packageFramework?.slug === 'nextjs' ? '.env.local' : '.env' await applyEnvVariables(packagePath, {...variables, readToken}, envName) } From 828fa9f75efd6c3e1942d4a5a69bd4e776276ff2 Mon Sep 17 00:00:00 2001 From: RostiMelk Date: Fri, 13 Dec 2024 13:43:37 +0100 Subject: [PATCH 3/5] fix: lints --- .../cli/src/actions/init-project/bootstrapRemoteTemplate.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/@sanity/cli/src/actions/init-project/bootstrapRemoteTemplate.ts b/packages/@sanity/cli/src/actions/init-project/bootstrapRemoteTemplate.ts index c8719b0ce12..4f0aff7ddad 100644 --- a/packages/@sanity/cli/src/actions/init-project/bootstrapRemoteTemplate.ts +++ b/packages/@sanity/cli/src/actions/init-project/bootstrapRemoteTemplate.ts @@ -6,6 +6,7 @@ import {detectFrameworkRecord, LocalFileSystemDetector} from '@vercel/fs-detecto import {debug} from '../../debug' import {type CliCommandContext} from '../../types' +import {getDefaultPortForFramework} from '../../util/frameworkPort' import { applyEnvVariables, checkNeedsReadToken, @@ -20,7 +21,6 @@ import { import {type GenerateConfigOptions} from './createStudioConfig' import {tryGitInit} from './git' import {updateInitialTemplateMetadata} from './updateInitialTemplateMetadata' -import {getDefaultPortForFramework} from '../../util/frameworkPort' export interface BootstrapRemoteOptions { outputPath: string From fc2406d5b84092891d66e32fdc599bb9263536fa Mon Sep 17 00:00:00 2001 From: RostiMelk Date: Fri, 13 Dec 2024 14:22:21 +0100 Subject: [PATCH 4/5] feat: add debug to setCorsOrigin --- packages/@sanity/cli/src/util/remoteTemplate.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/@sanity/cli/src/util/remoteTemplate.ts b/packages/@sanity/cli/src/util/remoteTemplate.ts index 6f5776890e7..b641a636741 100644 --- a/packages/@sanity/cli/src/util/remoteTemplate.ts +++ b/packages/@sanity/cli/src/util/remoteTemplate.ts @@ -12,6 +12,7 @@ import { } from '@sanity/template-validator' import {x} from 'tar' +import {debug} from '../../debug' import {type CliApiClient, type PackageJson} from '../types' const ENV_VAR = { @@ -330,7 +331,8 @@ export async function setCorsOrigin( url: '/cors', body: {origin: origin, allowCredentials: false}, }) - } catch { + } catch (error) { // Silent fail, it most likely means that the origin is already set + debug('Failed to set CORS origin', error) } } From c1a2fbda6889afda2b3cf09999cd1b7878ea0311 Mon Sep 17 00:00:00 2001 From: RostiMelk Date: Fri, 13 Dec 2024 14:27:05 +0100 Subject: [PATCH 5/5] fix: import path for debug --- packages/@sanity/cli/src/util/remoteTemplate.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/@sanity/cli/src/util/remoteTemplate.ts b/packages/@sanity/cli/src/util/remoteTemplate.ts index b641a636741..d1683ecd17f 100644 --- a/packages/@sanity/cli/src/util/remoteTemplate.ts +++ b/packages/@sanity/cli/src/util/remoteTemplate.ts @@ -12,7 +12,7 @@ import { } from '@sanity/template-validator' import {x} from 'tar' -import {debug} from '../../debug' +import {debug} from '../debug' import {type CliApiClient, type PackageJson} from '../types' const ENV_VAR = {