feat(cli): CATALYST-246 create-catalyst login, create env, scaffold project #474

matthewvolk · 2024-02-01T15:47:19Z

What/Why?

Adds initial commands for the create-catalyst CLI: create and init.
create is the default command, and invoked by running [npm|pnpm|yarn] create @bigcommerce/catalyst@latest. The command accepts a number of configurable options that can be passed as flags the CLI command (this is mostly useful for running the CLI in a CI environment). A number of the configurable options have some default values if they are left empty. If no options are passed as flags, the user is prompted to enter values for each option via terminal input. The end result is a Catalyst project, created in a local directory, with an (optionally) configured environment variable file, with dependencies installed, and if the environment variable file is configured, the create command also runs GraphQL codegen for GraphQL types + lints the project to ensure the project can build without errors.
init is a utility command that can be used to swap the store that the Catalyst project is connected to. Running [npx|pnpx|yarn dlx] @bigcommerce/create-catalyst init prompts the user for authentication credentials to a BigCommerce store, and when successfully authenticated, overwrites the current local .env.local file with new environment variables that belong to the newly authenticated store.

Testing

Includes Unit and Integration tests

vercel · 2024-02-01T15:47:27Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
catalyst-2000ms-api	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 13, 2024 8:56pm
catalyst-core-kynz	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 13, 2024 8:56pm
catalyst-latest	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 13, 2024 8:56pm
catalyst-storybook	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 13, 2024 8:56pm
catalyst-uk	🔄 Building (Inspect)	Visit Preview	💬 Add feedback	Feb 13, 2024 8:56pm

4 Ignored Deployments

Name	Status	Preview	Updated (UTC)
catalyst	⬜️ Ignored (Inspect)	Visit Preview	Feb 13, 2024 8:56pm
catalyst-1millionproducts-store	⬜️ Ignored (Inspect)	Visit Preview	Feb 13, 2024 8:56pm
catalyst-500ms-api	⬜️ Ignored (Inspect)	Visit Preview	Feb 13, 2024 8:56pm
catalyst-ppr	⬜️ Ignored (Inspect)	Visit Preview	Feb 13, 2024 8:56pm

package.json

…roject

matthewvolk · 2024-02-13T19:54:41Z

@bigcommerce/team-catalyst PR description updated + branch rebased. This one is ready for a final review 👍

github-actions · 2024-02-13T20:54:48Z

⚡️🏠 Lighthouse report

We ran Lighthouse against the changes and produced this report. Here's the summary:

Category	Score
🟢 Performance	98
🟢 Accessibility	95
🟠 Best practices	78
🟢 SEO	92

Lighthouse ran against https://catalyst-latest-4qcnzug32-bigcommerce-platform.vercel.app/

jorgemoya

A lot to unpack but looks good to me!

chanceaclark

I know you already merged this but left a few comments for cleanup whenever you get around to it!

chanceaclark · 2024-02-14T15:02:51Z

packages/create-catalyst/jest.config.cjs

+module.exports = {
+  extensionsToTreatAsEsm: ['.ts'],
+  transform: {
+    '^.+\\.(t|j)s?$': '@swc/jest',
+  },
+  transformIgnorePatterns: [],
+  // moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+  moduleNameMapper: {
+    '^(\\.{1,2}/.*)\\.js$': '$1',
+  },
+  testEnvironment: 'node',
+};


All you need is this (see tsconfig.json comments):

Suggested change

module.exports = {

extensionsToTreatAsEsm: ['.ts'],

transform: {

'^.+\\.(t|j)s?$': '@swc/jest',

},

transformIgnorePatterns: [],

// moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],

moduleNameMapper: {

'^(\\.{1,2}/.*)\\.js$': '$1',

},

testEnvironment: 'node',

};

module.exports = {

transform: {

'^.+\\.(t|j)s?$': '@swc/jest',

},

};

All of this looks good! However, I do need to keep the moduleNameMapper because this is a "type": "module" package, and the .js extensions on imports are not found if the mapper is not present

Oops 🤦‍♂️ Had to restart ESLint, and now the changes are working. Removing moduleNameMapper! Thank you!

chanceaclark · 2024-02-14T15:09:39Z

packages/create-catalyst/tsconfig.json

Try changing the tsconfig to this along with the jest config changes.

{ "$schema": "https://json.schemastore.org/tsconfig", "display": "Node 18", "compilerOptions": { "strict": true, "target": "es6", "module": "ESNext", "esModuleInterop": true, "moduleResolution": "Bundler", "resolveJsonModule": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true, } }

Additionally, let's remove disable the dts option and enable sourcemap in tsup.config.ts. We don't need types exported with the CLI and sourcemaps will be helpful for debugging.

chanceaclark · 2024-02-14T15:10:23Z

packages/create-catalyst/.swcrc

This should be okay to remove with the jest + tsconfig changes.

chanceaclark · 2024-02-14T15:23:31Z

packages/create-catalyst/src/utils/write-env.ts

+      `BIGCOMMERCE_STORE_HASH=${storeHash}`,
+      `BIGCOMMERCE_CHANNEL_ID=${channelId}`,
+      `BIGCOMMERCE_ACCESS_TOKEN=${accessToken}`,
+      `BIGCOMMERCE_CUSTOMER_IMPERSONATION_TOKEN=${customerImpersonationToken}`,


Should we also add this?

CLIENT_LOGGER="false"

chanceaclark · 2024-02-14T15:23:54Z

packages/create-catalyst/src/utils/spinner.spec.ts

@@ -0,0 +1,29 @@
+import { oraPromise } from 'ora';
+
+import { spinner } from './spinner.js';


With the tsconfig changes, you can remove the .js extension.

chanceaclark · 2024-02-14T15:27:32Z

packages/create-catalyst/src/utils/project-config.ts

+  let projectName = kebabCase(opts.projectName);
+  let projectDir = opts.projectDir && projectName ? join(opts.projectDir, projectName) : undefined;
+
+  if (projectDir && projectName) {
+    return { projectDir, projectName };
+  }


🍹 Instead of using let's, we can just do something like this just to clean these files up.

Suggested change

let projectName = kebabCase(opts.projectName);

let projectDir = opts.projectDir && projectName ? join(opts.projectDir, projectName) : undefined;

if (projectDir && projectName) {

return { projectDir, projectName };

}

if (opts.projectName && opts.projectDir) {

return {

projectDir: join(opts.projectDir, projectName),

projectName: kebabCase(opts.projectName),

};

}

This one is a little tricky, and the more I think about it, I think there's a lot of refactoring that I'm gonna need to do around each option. In this case:

projectDir and projectName can be passed as CLI flags

projectName is optional, and if not passed as a flag it would be equal to undefined in this function.

If projectName is undefined, we need to not return, because we need to prompt the user to enter a project name

If projectName is defined but invalid (such as entering weird characters like *), I need to throw an error (just noticed this isn't currently accounted for)

It's possible for projectName to be a space character, in which case I need to throw an error (this isn't accounted for either)

projectDir always defaults to process.cwd(), but if the user enters a path that does not exist, I need to throw

I think I can reuse the validate method lower down in this file to help with a lot of this. I'll rework it in a separate PR 👍

chanceaclark · 2024-02-14T15:31:35Z

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

+  constructor({
+    bigCommerceApiUrl,
+    storeHash,
+    accessToken,
+  }: {
+    bigCommerceApiUrl: string;
+    storeHash: string;
+    accessToken: string;
+  });
+  constructor({
+    sampleDataApiUrl,
+    storeHash,
+    accessToken,
+  }: {
+    sampleDataApiUrl: string;
+    storeHash: string;
+    accessToken: string;
+  });
+  constructor({ bigCommerceAuthUrl }: { bigCommerceAuthUrl: string });
+  constructor({
+    bigCommerceApiUrl,
+    bigCommerceAuthUrl,
+    sampleDataApiUrl,
+    storeHash,
+    accessToken,
+  }: {
+    bigCommerceApiUrl?: string;
+    bigCommerceAuthUrl?: string;
+    sampleDataApiUrl?: string;
+    storeHash?: string;
+    accessToken?: string;
+  }) {


🍹 Would love some descriptive interfaces for these overloaded args.

chanceaclark · 2024-02-14T15:38:00Z

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

+      message: 'Which channel would you like to use?',
+      choices: activeChannels
+        .sort((a, b) => channelSortOrder.indexOf(a.platform) - channelSortOrder.indexOf(b.platform))
+        .map((ch) => ({


🍹 :nit:

Suggested change

.map((ch) => ({

.map((channel) => ({

matthewvolk requested a review from a team February 1, 2024 15:47

matthewvolk commented Feb 1, 2024

View reviewed changes

package.json Outdated Show resolved Hide resolved

matthewvolk force-pushed the create-catalyst branch from 149c9c3 to 4171e49 Compare February 1, 2024 15:58

vercel bot had a problem deploying to Preview – catalyst-storybook February 1, 2024 15:58 Failure

matthewvolk force-pushed the create-catalyst branch 3 times, most recently from c069937 to a78022a Compare February 1, 2024 16:00

vercel bot deployed to Preview – catalyst-storybook February 1, 2024 16:01 View deployment

matthewvolk force-pushed the create-catalyst branch from a78022a to e9fe7a1 Compare February 1, 2024 16:02

vercel bot deployed to Preview – catalyst-storybook February 1, 2024 16:03 View deployment

vercel bot deployed to Preview – catalyst February 1, 2024 16:05 View deployment

vercel bot temporarily deployed to Preview – catalyst-core-kynz February 1, 2024 16:07 Inactive

matthewvolk force-pushed the create-catalyst branch from e9fe7a1 to e01ddc9 Compare February 1, 2024 16:13

vercel bot deployed to Preview – catalyst-storybook February 1, 2024 16:14 View deployment

vercel bot deployed to Preview – catalyst February 1, 2024 16:15 View deployment

vercel bot temporarily deployed to Preview – catalyst-core-kynz February 1, 2024 16:32 Inactive

matthewvolk force-pushed the create-catalyst branch from e01ddc9 to a4a80be Compare February 1, 2024 16:49

vercel bot had a problem deploying to Preview – catalyst-storybook February 1, 2024 16:49 Failure

vercel bot had a problem deploying to Preview – catalyst February 1, 2024 16:49 Failure

vercel bot temporarily deployed to Preview – catalyst-core-kynz February 1, 2024 16:49 Inactive

matthewvolk force-pushed the create-catalyst branch from a4a80be to a6ad439 Compare February 1, 2024 16:50

vercel bot deployed to Preview – catalyst-storybook February 1, 2024 16:51 View deployment

vercel bot temporarily deployed to Preview – catalyst-core-kynz February 1, 2024 16:54 Inactive

vercel bot deployed to Preview – catalyst February 1, 2024 16:54 View deployment

matthewvolk force-pushed the create-catalyst branch from a6ad439 to d41af61 Compare February 1, 2024 16:55

vercel bot deployed to Preview – catalyst-storybook February 1, 2024 16:56 View deployment

matthewvolk force-pushed the create-catalyst branch from d41af61 to 9264edf Compare February 1, 2024 16:56

vercel bot deployed to Preview – catalyst-storybook February 1, 2024 16:56 View deployment

vercel bot deployed to Preview – catalyst February 1, 2024 16:59 View deployment

vercel bot deployed to Preview – catalyst-storybook February 10, 2024 01:07 View deployment

vercel bot deployed to Preview – catalyst-latest February 10, 2024 01:11 View deployment

vercel bot temporarily deployed to Preview – catalyst-core-kynz February 10, 2024 01:11 Inactive

matthewvolk force-pushed the create-catalyst branch from 9e10e5f to 980f017 Compare February 13, 2024 16:21

vercel bot deployed to Preview – catalyst-storybook February 13, 2024 16:22 View deployment

vercel bot deployed to Preview – catalyst-latest February 13, 2024 16:23 View deployment

vercel bot temporarily deployed to Preview – catalyst-core-kynz February 13, 2024 16:25 Inactive

matthewvolk force-pushed the create-catalyst branch from 980f017 to da38108 Compare February 13, 2024 18:05

vercel bot deployed to Preview – catalyst-storybook February 13, 2024 18:06 View deployment

vercel bot deployed to Preview – catalyst-latest February 13, 2024 18:07 View deployment

vercel bot temporarily deployed to Preview – catalyst-core-kynz February 13, 2024 18:09 Inactive

feat(cli): CATALYST-246 create-catalyst login, create env, scaffold p…

a061eb9

…roject

matthewvolk force-pushed the create-catalyst branch from da38108 to a061eb9 Compare February 13, 2024 19:54

vercel bot deployed to Preview – catalyst-storybook February 13, 2024 19:55 View deployment

vercel bot deployed to Preview – catalyst-latest February 13, 2024 19:57 View deployment

vercel bot temporarily deployed to Preview – catalyst-core-kynz February 13, 2024 19:58 Inactive

fix integration test

eae248b

vercel bot deployed to Preview – catalyst-storybook February 13, 2024 20:52 View deployment

vercel bot deployed to Preview – catalyst-latest February 13, 2024 20:53 View deployment

vercel bot temporarily deployed to Preview – catalyst-core-kynz February 13, 2024 20:56 Inactive

jorgemoya approved these changes Feb 13, 2024

View reviewed changes

christensenep approved these changes Feb 14, 2024

View reviewed changes

matthewvolk added this pull request to the merge queue Feb 14, 2024

Merged via the queue into main with commit 57996e8 Feb 14, 2024
18 checks passed

matthewvolk deleted the create-catalyst branch February 14, 2024 01:44

chanceaclark reviewed Feb 14, 2024

View reviewed changes

matthewvolk mentioned this pull request Feb 14, 2024

refactor(cli): misc improvements for bundling and testing #561

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(cli): CATALYST-246 create-catalyst login, create env, scaffold project #474

feat(cli): CATALYST-246 create-catalyst login, create env, scaffold project #474

matthewvolk commented Feb 1, 2024 •

edited

Loading

vercel bot commented Feb 1, 2024 •

edited

Loading

matthewvolk commented Feb 13, 2024

github-actions bot commented Feb 13, 2024

jorgemoya left a comment

chanceaclark left a comment

chanceaclark Feb 14, 2024

matthewvolk Feb 14, 2024

matthewvolk Feb 14, 2024

chanceaclark Feb 14, 2024

chanceaclark Feb 14, 2024

chanceaclark Feb 14, 2024

chanceaclark Feb 14, 2024

chanceaclark Feb 14, 2024

matthewvolk Feb 14, 2024

chanceaclark Feb 14, 2024

chanceaclark Feb 14, 2024

		@@ -0,0 +1,29 @@
		import { oraPromise } from 'ora';

		import { spinner } from './spinner.js';

feat(cli): CATALYST-246 create-catalyst login, create env, scaffold project #474

feat(cli): CATALYST-246 create-catalyst login, create env, scaffold project #474

Conversation

matthewvolk commented Feb 1, 2024 • edited Loading

What/Why?

Testing

vercel bot commented Feb 1, 2024 • edited Loading

matthewvolk commented Feb 13, 2024

github-actions bot commented Feb 13, 2024

⚡️🏠 Lighthouse report

jorgemoya left a comment

Choose a reason for hiding this comment

chanceaclark left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

matthewvolk commented Feb 1, 2024 •

edited

Loading

vercel bot commented Feb 1, 2024 •

edited

Loading