LTRAC-137: Add native hosting option in create-catalyst

Author: jordanarldt

packages/create-catalyst/src/commands/create.ts

@@ -13,9 +13,13 @@ import { Https } from '../utils/https';
 import { installDependencies } from '../utils/install-dependencies';
 import { getAvailableLocales } from '../utils/localization';
 import { login, storeCredentials } from '../utils/login';
+import { promptForInfrastructureProject } from '../utils/prompt-infrastructure-project';
+import { setupNativeHosting } from '../utils/setup-native-hosting';
 import { Telemetry } from '../utils/telemetry/telemetry';
 import { writeEnv } from '../utils/write-env';
 
+type HostingMode = 'next' | 'catalyst';
+
 interface Channel {
   id: number;
   name: string;
@@ -283,6 +287,116 @@ async function setupProject(options: {
   return { projectName, projectDir };
 }
 
+type HostingResolution =
+  | { mode: 'next' }
+  | { mode: 'catalyst'; projectUuid: string; accessToken: string };
+
+async function resolveHostingMode({
+  hostingFlag,
+  storeHash,
+  accessToken,
+  cliApiOrigin,
+  apiHostname,
+  defaultProjectName,
+}: {
+  hostingFlag?: HostingMode;
+  storeHash?: string;
+  accessToken?: string;
+  cliApiOrigin: string;
+  apiHostname: string;
+  defaultProjectName?: string;
+}): Promise<HostingResolution> {
+  if (hostingFlag === 'next') {
+    return { mode: 'next' };
+  }
+
+  if (!storeHash || !accessToken) {
+    if (hostingFlag === 'catalyst') {
+      console.error(
+        colorize(
+          'red',
+          '\n--hosting catalyst requires store credentials (store hash and access token)\n',
+        ),
+      );
+      process.exit(1);
+    }
+
+    return { mode: 'next' };
+  }
+
+  const cliApi = new CliApi({
+    origin: cliApiOrigin,
+    storeHash,
+    accessToken,
+    apiHostname,
+  });
+
+  let hasAccess = false;
+
+  try {
+    hasAccess = await cliApi.checkProjectsAccess();
+  } catch (error) {
+    const message = error instanceof Error ? error.message : 'unknown error';
+
+    if (hostingFlag === 'catalyst') {
+      console.error(
+        colorize(
+          'red',
+          `\nFailed to verify Infrastructure Projects API access: ${message}\nPlease try again.\n`,
+        ),
+      );
+      process.exit(1);
+    }
+
+    console.warn(
+      colorize(
+        'yellow',
+        `\nCould not verify Infrastructure Projects API access: ${message}\nDefaulting to self-hosted (Next.js). Re-run create-catalyst if you intended to use BigCommerce-hosted.\n`,
+      ),
+    );
+
+    return { mode: 'next' };
+  }
+
+  if (hostingFlag === 'catalyst' && !hasAccess) {
+    console.error(
+      colorize(
+        'red',
+        '\nThis store does not have access to the Infrastructure Projects API. Contact support@bigcommerce.com to enable it.\n',
+      ),
+    );
+    process.exit(1);
+  }
+
+  let useNative = hostingFlag === 'catalyst';
+
+  if (hostingFlag === undefined && hasAccess) {
+    useNative = await select({
+      message: 'How would you like to host your Catalyst storefront?',
+      choices: [
+        {
+          name: 'Self-hosted (Next.js)',
+          value: false,
+          description: 'Use standard next dev / build / start',
+        },
+        {
+          name: 'BigCommerce-hosted (Native)',
+          value: true,
+          description: 'Use catalyst dev / build / deploy',
+        },
+      ],
+    });
+  }
+
+  if (!useNative) {
+    return { mode: 'next' };
+  }
+
+  const project = await promptForInfrastructureProject(cliApi, defaultProjectName);
+
+  return { mode: 'catalyst', projectUuid: project.uuid, accessToken };
+}
+
 function checkRequiredTools() {
   try {
     execSync(getPlatformCheckCommand('git'), { stdio: 'ignore' });
@@ -316,6 +430,12 @@ export const create = new Command('create')
   .option('--reset-main', 'Reset the main branch to the gh-ref')
   .option('--repository <repository>', 'GitHub repository to clone from', 'bigcommerce/catalyst')
   .option('--env <vars...>', 'Arbitrary environment variables to set in .env.local')
+  .addOption(
+    new Option(
+      '--hosting <mode>',
+      'Hosting mode: "next" for self-hosted Next.js or "catalyst" for BigCommerce-hosted',
+    ).choices(['next', 'catalyst'] as const),
+  )
   .addOption(
     new Option('--bigcommerce-hostname <hostname>', 'BigCommerce hostname')
       .default('bigcommerce.com')
@@ -363,6 +483,16 @@ export const create = new Command('create')
       envVars.BIGCOMMERCE_STOREFRONT_API_TOKEN = storefrontToken;
     } else {
       if (!storeHash || !accessToken) {
+        if (options.hosting === 'catalyst') {
+          console.error(
+            colorize(
+              'red',
+              '\n--hosting catalyst requires store credentials (store hash and access token)\n',
+            ),
+          );
+          process.exit(1);
+        }
+
         // Create project without credentials
         console.log(`\nCreating '${projectName}' at '${projectDir}'\n`);
         cloneCatalyst({ repository, projectName, projectDir, ghRef, resetMain: options.resetMain });
@@ -418,6 +548,7 @@ export const create = new Command('create')
           origin: options.cliApiOrigin,
           storeHash,
           accessToken,
+          apiHostname: `api.${options.bigcommerceHostname}`,
         });
 
         // If we have channelId but no storefrontToken, just get the init data
@@ -523,9 +654,32 @@ export const create = new Command('create')
     if (!channelId) throw new Error('Something went wrong, channelId is not defined');
     if (!storefrontToken) throw new Error('Something went wrong, storefrontToken is not defined');
 
+    const hosting = await resolveHostingMode({
+      hostingFlag: options.hosting,
+      storeHash,
+      accessToken,
+      cliApiOrigin: options.cliApiOrigin,
+      apiHostname: `api.${options.bigcommerceHostname}`,
+      defaultProjectName: projectName,
+    });
+
+    if (hosting.mode === 'catalyst') {
+      envVars.BIGCOMMERCE_ACCESS_TOKEN = hosting.accessToken;
+    }
+
     // Create the project with all necessary configuration
     console.log(`\nCreating '${projectName}' at '${projectDir}'\n`);
     cloneCatalyst({ repository, projectName, projectDir, ghRef, resetMain: options.resetMain });
+
+    if (hosting.mode === 'catalyst') {
+      setupNativeHosting({
+        projectDir,
+        projectUuid: hosting.projectUuid,
+        storeHash,
+        accessToken: hosting.accessToken,
+      });
+    }
+
     await installDependencies(projectDir);
 
     // Write env vars
@@ -540,6 +694,14 @@ export const create = new Command('create')
       colorize('green', `\nSuccess! Created '${projectName}' at '${projectDir}'\n`),
       '\nNext steps:\n',
       colorize('yellow', `\ncd ${projectName} && pnpm run dev\n`),
+      ...(hosting.mode === 'catalyst'
+        ? [
+            colorize(
+              'yellow',
+              `\nRun 'cd ${projectName}/core && pnpm run deploy' when ready to deploy to BigCommerce hosting.\n`,
+            ),
+          ]
+        : []),
     );
   });
 

packages/create-catalyst/src/commands/init.ts

@@ -109,6 +109,7 @@ export const init = new Command('init')
       origin: options.cliApiOrigin,
       storeHash,
       accessToken,
+      apiHostname: `api.${options.bigcommerceHostname}`,
     });
 
     const channelSortOrder = ['catalyst', 'next', 'bigcommerce'];

packages/create-catalyst/src/utils/auth.ts

@@ -28,6 +28,9 @@ export class Auth {
           'store_v2_information',
           'store_v2_products',
           'store_cart',
+          'store_infrastructure_projects_manage',
+          'store_infrastructure_deployments_manage',
+          'store_infrastructure_logs_read_only',
         ].join(' '),
         client_id: this.DEVICE_OAUTH_CLIENT_ID,
       }),

packages/create-catalyst/src/utils/cli-api-errors.ts

@@ -0,0 +1,6 @@
+export class InfrastructureProjectValidationError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = 'InfrastructureProjectValidationError';
+  }
+}