Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 2 commits into from
Feb 14, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 55 additions & 0 deletions .github/workflows/cli-integration.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
name: Create Catalyst CLI

on:
push:
branches: [main]
pull_request:
types: [opened, synchronize]
merge_group:
types: [checks_requested]

jobs:
integration-tests:
name: Integration Tests

runs-on: ubuntu-latest

env:
TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
TURBO_TEAM: ${{ vars.TURBO_TEAM }}
TURBO_REMOTE_CACHE_SIGNATURE_KEY: ${{ secrets.TURBO_REMOTE_CACHE_SIGNATURE_KEY }}
BIGCOMMERCE_STORE_HASH: ${{ secrets.BIGCOMMERCE_STORE_HASH }}
BIGCOMMERCE_CUSTOMER_IMPERSONATION_TOKEN: ${{ secrets.BIGCOMMERCE_CUSTOMER_IMPERSONATION_TOKEN }}

steps:
- name: Checkout code
uses: actions/checkout@main
with:
fetch-depth: 2

- uses: pnpm/action-setup@v2

- name: Use Node.js
uses: actions/setup-node@main
with:
node-version-file: ".nvmrc"
cache: "pnpm"

- name: Install dependencies
run: pnpm install --frozen-lockfile

- name: Build CLI
run: pnpm build
working-directory: packages/create-catalyst

- name: Run CLI
run: |
node dist/index.js \
--ghRef ${{ github.sha }} \
--projectDir ${{ runner.temp }} \
--projectName catalyst-integration-test \
--channelId 1 \
--accessToken some_access_token \
--storeHash ${{ secrets.BIGCOMMERCE_STORE_HASH }} \
--customerImpersonationToken ${{ secrets.BIGCOMMERCE_CUSTOMER_IMPERSONATION_TOKEN }}
working-directory: packages/create-catalyst
43 changes: 43 additions & 0 deletions .github/workflows/cli-unit.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
name: Create Catalyst CLI

on:
push:
branches: [main]
pull_request:
types: [opened, synchronize]
merge_group:
types: [checks_requested]

jobs:
unit-tests:
name: Unit Tests

runs-on: ubuntu-latest

env:
TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
TURBO_TEAM: ${{ vars.TURBO_TEAM }}
TURBO_REMOTE_CACHE_SIGNATURE_KEY: ${{ secrets.TURBO_REMOTE_CACHE_SIGNATURE_KEY }}
BIGCOMMERCE_STORE_HASH: ${{ secrets.BIGCOMMERCE_STORE_HASH }}
BIGCOMMERCE_CUSTOMER_IMPERSONATION_TOKEN: ${{ secrets.BIGCOMMERCE_CUSTOMER_IMPERSONATION_TOKEN }}

steps:
- name: Checkout code
uses: actions/checkout@main
with:
fetch-depth: 2

- uses: pnpm/action-setup@v2

- name: Use Node.js
uses: actions/setup-node@main
with:
node-version-file: ".nvmrc"
cache: "pnpm"

- name: Install dependencies
run: pnpm install --frozen-lockfile

- name: Run Tests
run: pnpm test
working-directory: packages/create-catalyst
2 changes: 2 additions & 0 deletions packages/create-catalyst/.eslintrc.cjs
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ const config = {
extends: ['@bigcommerce/catalyst/base', '@bigcommerce/catalyst/prettier'],
rules: {
'no-console': 'off',
'import/no-named-as-default': 'off',
'@typescript-eslint/naming-convention': 'off',
},
ignorePatterns: ['/dist/**'],
};
Expand Down
17 changes: 17 additions & 0 deletions packages/create-catalyst/.swcrc
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
{
"$schema": "https://json.schemastore.org/swcrc",
"sourceMaps": true,
"jsc": {
"parser": {
"syntax": "typescript",
"decorators": true,
"dynamicImport": true
},
"transform": {
"legacyDecorator": true,
"decoratorMetadata": true
},
"baseUrl": "./"
},
"minify": false
}
56 changes: 12 additions & 44 deletions packages/create-catalyst/README.md
Original file line number Diff line number Diff line change
@@ -1,55 +1,23 @@
# packages/create-catalyst
# create-catalyst

> [!WARNING]
> The create-catalyst package is in development and not published to the NPM registry
Create a new Catalyst project, optionally connect the project to a BigCommerce store. Also supports "switching" the store that Catalyst is connected to by running `init`.

Scaffolding for Catalyst storefront projects.

## Usage

**NPM:**

```sh
npm create @bigcommerce/catalyst@latest my-catalyst-store
```

**PNPM:**
## NPM

```sh
pnpm create @bigcommerce/catalyst@latest my-catalyst-store
npm create catalyst-storefront@latest --storeHash your_store_hash --accessToken your_access_token
```

**Yarn:**
## PNPM

```sh
yarn create @bigcommerce/catalyst@latest my-catalyst-store
pnpm create catalyst-storefront@latest --storeHash your_store_hash --accessToken your_access_token
```

## Contributing

**Prerequisites:**

- Node `>=18.16`
- [Verdaccio](https://verdaccio.org/) `>=5`

**Developing Locally:**

While developing `create-catalyst` locally, it's essential to test your changes before publishing them to NPM. To achieve this, we utilize Verdaccio, a lightweight private npm proxy registry that you can run in your local environment. By publishing `create-catalyst` to Verdaccio during local development, we can point `[yarn|npm|pnpm] create @bigcommerce/catalyst` at the Verdaccio registry URL and observe how our changes will behave once they are published to NPM.

1. Install Verdaccio: https://verdaccio.org/docs/installation
2. Run Verdaccio: `verdaccio --listen 4873`
3. Add an NPM user with `@bigcommerce` scope to Verdaccio: `npm adduser --scope=@bigcommerce --registry=http://localhost:4873`

> ⚠️ **IMPORTANT:** NPM registry data is immutable, meaning once published, a package cannot change. Be careful to ensure that you do not run commands such as `publish` against the default NPM registry if your work is not ready to be published. Always explicitly pass `--registry=http://localhost:<VERDACCIO_PORT>` with commands that modify the registry (such as `publish`) to ensure you only publish to Verdaccio when working locally.

4. If necessary, run `pnpm build` and `pnpm publish --registry=http://localhost:4873` in each Catalyst-scoped package required by relevant examples listed in `apps/` (e.g., Catalyst `core` examples require `@bigcommerce/components`, `@bigcommerce/eslint-config-catalyst`, `@bigcommerce/catalyst-client`)
5. Run `pnpm build` and `pnpm publish --registry=http://localhost:4873` in the `@bigcommerce/create-catalyst` package
6. Confirm published packages are listed in Verdaccio: http://localhost:4873

In order to point `npm create`, `pnpm create`, and/or `yarn create` to the Verdaccio registry, run one or more of the following commands against the package manager's global configuration:

- **NPM:** `npm config set @bigcommerce:registry http://localhost:4873`
- **PNPM:** `pnpm config set @bigcommerce:registry http://localhost:4873`
- **Yarn:** `yarn config set npmScopes.bigcommerce.npmRegistryServer "http://localhost:4873" -H` and then `yarn config set unsafeHttpWhitelist "localhost" -H`
# To Do

7. Finally, navigate to the directory in which you'd like to create a new Catalyst storefront, and run `[yarn|npm|pnpm] create @bigcommerce/catalyst name-of-your-catalyst-storefront`
- [ ] Channel Site Routes
- [ ] Check Active Storeront Limit
- [ ] Prompt Sample Data API for New Channels
- [ ] Yarn module resolution bug
- [ ] Write root `.vscode/settings.json`
12 changes: 12 additions & 0 deletions packages/create-catalyst/jest.config.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
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',
};
Comment on lines +1 to +12
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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',
},
};

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

29 changes: 28 additions & 1 deletion packages/create-catalyst/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,44 @@
"dist"
],
"scripts": {
"dev": "tsup --watch",
"typecheck": "tsc --noEmit",
"lint": "eslint . --max-warnings 0",
"test": "jest"
"test": "jest",
"build": "tsup"
},
"engines": {
"node": ">=18.16"
},
"dependencies": {
"@inquirer/prompts": "^3.3.0",
"chalk": "^5.3.0",
"commander": "^11.1.0",
"fs-extra": "^11.2.0",
"giget": "^1.2.1",
"lodash.kebabcase": "^4.1.1",
"lodash.merge": "^4.6.2",
"lodash.set": "^4.3.2",
"lodash.unset": "^4.5.2",
"msw": "^2.1.7",
"nypm": "^0.3.6",
"ora": "^8.0.1",
"zod": "^3.22.4",
"zod-validation-error": "^3.0.0"
},
"devDependencies": {
"@bigcommerce/eslint-config": "^2.7.0",
"@bigcommerce/eslint-config-catalyst": "workspace:^",
"@swc/core": "^1.3.107",
"@swc/jest": "^0.2.34",
"@types/fs-extra": "^11.0.4",
"@types/jest": "^29.5.11",
"@types/lodash.kebabcase": "^4.1.9",
"@types/lodash.merge": "^4.6.9",
"@types/lodash.set": "^4.3.9",
"@types/lodash.unset": "^4.5.9",
"@types/node": "^18.17.12",
"@types/prompts": "^2.4.9",
"eslint": "^8.55.0",
"jest": "^29.7.0",
"prettier": "^3.1.1",
Expand Down
Loading
Loading