As Connect Application

.github/workflows/deploy-preview.yml

@@ -14,23 +14,31 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
 
-      - name: Install pnpm
-        uses: pnpm/action-setup@v2.2.4
-        id: pnpm-install
-        with:
-          run_install: false
+      - name: Read .nvmrc
+        run: echo ::set-output name=NVMRC::$(cat .nvmrc)
+        id: nvm
 
       - name: Setup Node (uses version in .nvmrc)
         uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
-          cache: 'pnpm'
+          node-version: "${{ steps.nvm.outputs.NVMRC }}"
+
+      - name: Get yarn cache
+        id: yarn-cache
+        run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
+
+      - uses: actions/cache@v3
+        with:
+          path: ${{ steps.yarn-cache.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
 
       - name: Install dependencies
-        run: pnpm install
+        run: yarn install --immutable
 
       - name: Building application
-        run: pnpm build
+        run: yarn build
 
       - name: Extract branch name
         id: branch
@@ -44,9 +52,9 @@ jobs:
         shell: bash
 
       - name: Deploying to surge (preview)
-        run: pnpm run deploy
+        run: yarn deploy
         env:
-          APPLICATION_ID: ${{ secrets.APPLICATION_ID_STAGING }}
+          CUSTOM_APPLICATION_ID: ${{ secrets.APPLICATION_ID_STAGING }}
           APPLICATION_URL: https://graphql-explorer-commercetools-${{ steps.branch.outputs.name }}.surge.sh
           HOST_GCP_STAGING: ${{ secrets.HOST_GCP_STAGING }}
           CTP_INITIAL_PROJECT_KEY: ${{ secrets.CYPRESS_PROJECT_KEY }}

.github/workflows/deploy.yml

@@ -16,38 +16,46 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
 
-      - name: Install pnpm
-        uses: pnpm/action-setup@v2.2.4
-        id: pnpm-install
-        with:
-          run_install: false
+      - name: Read .nvmrc
+        run: echo ::set-output name=NVMRC::$(cat .nvmrc)
+        id: nvm
 
       - name: Setup Node (uses version in .nvmrc)
         uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
-          cache: 'pnpm'
+          node-version: "${{ steps.nvm.outputs.NVMRC }}"
+
+      - name: Get yarn cache
+        id: yarn-cache
+        run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
+
+      - uses: actions/cache@v3
+        with:
+          path: ${{ steps.yarn-cache.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
 
       - name: Install dependencies
-        run: pnpm install
+        run: yarn install --immutable
 
       - name: Building application
-        run: pnpm build
+        run: yarn build
 
       - name: Deploying to surge (staging)
-        run: pnpm run deploy
+        run: yarn deploy
         env:
-          APPLICATION_ID: ${{ secrets.APPLICATION_ID_STAGING }}
+          CUSTOM_APPLICATION_ID: ${{ secrets.APPLICATION_ID_STAGING }}
           APPLICATION_URL: https://graphql-explorer-commercetools-staging.surge.sh
           HOST_GCP_STAGING: ${{ secrets.HOST_GCP_STAGING }}
           CTP_INITIAL_PROJECT_KEY: ${{ secrets.CYPRESS_PROJECT_KEY }}
           SURGE_LOGIN: ${{ secrets.SURGE_LOGIN }}
           SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }}
 
       - name: Deploying to surge (production eu)
-        run: pnpm run deploy
+        run: yarn deploy
         env:
-          APPLICATION_ID: ${{ secrets.APPLICATION_ID_PRODUCTION_EU }}
+          CUSTOM_APPLICATION_ID: ${{ secrets.APPLICATION_ID_PRODUCTION_EU }}
           APPLICATION_URL: https://graphql-explorer-commercetools-production-eu.surge.sh
           HOST_GCP_STAGING: ${{ secrets.HOST_GCP_STAGING }}
           CTP_INITIAL_PROJECT_KEY: ${{ secrets.CYPRESS_PROJECT_KEY }}

.github/workflows/main.yml

@@ -21,35 +21,43 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
 
-      - name: Install pnpm
-        uses: pnpm/action-setup@v2.2.4
-        id: pnpm-install
-        with:
-          run_install: false
+      - name: Read .nvmrc
+        run: echo ::set-output name=NVMRC::$(cat .nvmrc)
+        id: nvm
 
       - name: Setup Node (uses version in .nvmrc)
         uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
-          cache: 'pnpm'
+          node-version: "${{ steps.nvm.outputs.NVMRC }}"
+
+      - name: Get yarn cache
+        id: yarn-cache
+        run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
+
+      - uses: actions/cache@v3
+        with:
+          path: ${{ steps.yarn-cache.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
 
       - name: Install dependencies
-        run: pnpm install
+        run: yarn install --immutable
         env:
           # https://github.com/bahmutov/cypress-gh-action-split-install/blob/ca3916d4e7240ebdc337825d2d78eb354855464b/.github/workflows/tests.yml#L14-L18
           # https://github.com/marketplace/actions/cypress-io#custom-install
           CYPRESS_INSTALL_BINARY: 0
 
       - name: Building application
-        run: pnpm build
+        run: yarn build
         env:
-          APPLICATION_ID: ${{ secrets.APPLICATION_ID }}
+          CUSTOM_APPLICATION_ID: ${{ secrets.APPLICATION_ID }}
           APPLICATION_URL: https://graphql-explorer-commercetools-staging.surge.sh
           HOST_GCP_STAGING: ${{ secrets.HOST_GCP_STAGING }}
           CTP_INITIAL_PROJECT_KEY: ${{ secrets. CYPRESS_PROJECT_KEY }}
 
       - name: Running linters and tests
-        run: pnpm jest --projects jest.{eslint,test}.config.js
+        run: yarn jest --projects jest.{eslint,test}.config.js
         env:
           CI: true
 
@@ -65,17 +73,17 @@ jobs:
           key: ${{ runner.os }}-cypress-${{ hashFiles('**/package.json') }}
 
       - name: Installing Cypress binary
-        run: pnpm cypress install && pnpm cypress cache list
+        run: yarn cypress install && yarn cypress cache list
 
       - name: Running End-to-End tests
-        run: pnpm start-server-and-test 'pnpm start:prod:local' http-get://127.0.0.1:3001 'pnpm test:e2e'
+        run: yarn start-server-and-test 'yarn start:prod:local' 3001 'yarn test:e2e'
         env:
           NODE_ENV: test
           CYPRESS_CI: "true"
           CYPRESS_LOGIN_USER: ${{ secrets.CYPRESS_LOGIN_USER }}
           CYPRESS_LOGIN_PASSWORD: ${{ secrets.CYPRESS_LOGIN_PASSWORD }}
           CYPRESS_PROJECT_KEY: ${{ secrets.CYPRESS_PROJECT_KEY }}
-          APPLICATION_ID: ${{ secrets.APPLICATION_ID }}
+          CUSTOM_APPLICATION_ID: ${{ secrets.APPLICATION_ID }}
           APPLICATION_URL: https://graphql-explorer-commercetools-staging.surge.sh
           HOST_GCP_STAGING: ${{ secrets.HOST_GCP_STAGING }}
           CTP_INITIAL_PROJECT_KEY: ${{ secrets. CYPRESS_PROJECT_KEY }}

.gitignore

@@ -56,15 +56,11 @@ typings/
 .yarn-integrity
 
 # Yarn
-.yarn/*
-!.yarn/patches
-!.yarn/plugins
-!.yarn/releases
-!.yarn/sdks
-!.yarn/versions
+.yarn/
 
 # dotenv environment variables file
-.env
+!.env
+.env.local
 
 # Lerna changelog cache
 .changelog

connect.yaml

@@ -0,0 +1,22 @@
+deployAs:
+  - name: merchant-center-graphql-explorer
+    applicationType: merchant-center-custom-application
+    configuration:
+      standardConfiguration:
+        - key: CUSTOM_APPLICATION_ID
+          description: The Custom Application ID
+          required: true
+        - key: ENTRY_POINT_URI_PATH
+          description: The Application entry point URI path
+          required: true
+          default: 'graphql-explorer-commercetools'
+        - key: CTP_INITIAL_PROJECT_KEY
+          description: development project key
+          required: true
+        - key: HOST_GCP_STAGING
+          description: one of the following us-central1.gcp.commercetools.com, us-east-2.aws.commercetools.com, europe-west1.gcp.commercetools.com, eu-central-1.aws.commercetools.com, australia-southeast1.gcp.commercetools.com, cn-northwest-1.aws.commercetools.cn
+          required: true
+        - key: CLOUD_IDENTIFIER
+          description: one of the following gcp-us, gcp-eu, aws-us, aws-eu
+          required: true
+          default: 'gcp-eu'

merchant-center-graphql-explorer/.env

@@ -0,0 +1,8 @@
+FAST_REFRESH="true"
+ENABLE_NEW_JSX_TRANSFORM="true"
+CUSTOM_APPLICATION_ID=TODO
+APPLICATION_URL=https://your_app_hostname.com
+HOST_GCP_STAGING=""
+CTP_INITIAL_PROJECT_KEY=""
+ENTRY_POINT_URI_PATH="graphql-explorer-commercetools"
+CLOUD_IDENTIFIER="gcp-eu"

merchant-center-graphql-explorer/.env.template

@@ -0,0 +1,8 @@
+# Duplicate and rename this file to `.env.local`
+
+CUSTOM_APPLICATION_ID="TODO"
+APPLICATION_URL="https://your_app_hostname.com"
+HOST_GCP_STAGING=""
+CTP_INITIAL_PROJECT_KEY=""
+ENTRY_POINT_URI_PATH=""
+CLOUD_IDENTIFIER=""

merchant-center-graphql-explorer/.husky/commit-msg

@@ -0,0 +1,5 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+cd merchant-center-graphql-explorer
+yarn commitlint --edit $1

merchant-center-graphql-explorer/.husky/pre-commit

@@ -0,0 +1,5 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+cd merchant-center-graphql-explorer
+yarn lint-staged

.prettierignore → merchant-center-graphql-explorer/.prettierignore

@@ -4,5 +4,3 @@ public/
 .percy.yml
 .cache
 .yarn
-pnpm-lock.yaml
-pnpm-workspace.yaml

custom-application-config.ts → merchant-center-graphql-explorer/custom-application-config.ts

@@ -1,16 +1,16 @@
-import { entryPointUriPath, PERMISSIONS } from './src/constants';
+import { PERMISSIONS } from './src/constants';
 import type { ConfigOptions } from '@commercetools-frontend/application-config';
 
 const config: ConfigOptions = {
   name: 'GraphQL Explorer',
-  entryPointUriPath,
-  cloudIdentifier: 'gcp-eu',
+  entryPointUriPath: '${env:ENTRY_POINT_URI_PATH}',
+  cloudIdentifier: '${env:CLOUD_IDENTIFIER}',
   env: {
     development: {
       initialProjectKey: '${env:CTP_INITIAL_PROJECT_KEY}',
     },
     production: {
-      applicationId: '${env:APPLICATION_ID}',
+      applicationId: '${env:CUSTOM_APPLICATION_ID}',
       url: '${env:APPLICATION_URL}',
     },
   },

jest-runner-eslint.config.js → merchant-center-graphql-explorer/jest-runner-eslint.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   cliOptions: {
-    format: 'node_modules/eslint-formatter-pretty',
+    format: require.resolve('eslint-formatter-pretty'),
     rules: {
       'import/no-unresolved': 2,
       'prettier/prettier': [

jest.eslint.config.js → merchant-center-graphql-explorer/jest.eslint.config.js

@@ -4,5 +4,8 @@ module.exports = {
   moduleFileExtensions: ['js', 'ts', 'tsx'],
   modulePathIgnorePatterns: ['dist', 'public'],
   testMatch: ['<rootDir>/**/*.js', '<rootDir>/**/*.ts', '<rootDir>/**/*.tsx'],
-  watchPlugins: ['jest-watch-typeahead/filename'],
+  watchPlugins: [
+    'jest-watch-typeahead/filename',
+    'jest-runner-eslint/watch-fix',
+  ],
 };

lint-staged.config.js → merchant-center-graphql-explorer/lint-staged.config.js

@@ -11,7 +11,7 @@ module.exports = {
     //   Error: An error occurred while adding the reporter at path "/path/to/file".Reporter is not a constructor
     //
     // For that reason, we move the `--onlyChanged` flag next to it.
-    'pnpm lint --reporters=jest-silent-reporter --onlyChanged',
+    'yarn lint --reporters=jest-silent-reporter --onlyChanged',
   ],
   '!(cypress)/**/*.{ts,tsx}': [
     'prettier --write',
@@ -23,7 +23,7 @@ module.exports = {
     //   Error: An error occurred while adding the reporter at path "/path/to/file".Reporter is not a constructor
     //
     // For that reason, we move the `--onlyChanged` flag next to it.
-    'pnpm lint --passWithNoTests --reporters=jest-silent-reporter --onlyChanged',
+    'yarn lint --passWithNoTests --reporters=jest-silent-reporter --onlyChanged',
     // Always include the `client.d.ts` file.
     'tsc-files --noEmit node_modules/@commercetools-frontend/application-config/client.d.ts',
   ],
@@ -37,7 +37,7 @@ module.exports = {
     //   Error: An error occurred while adding the reporter at path "/path/to/file".Reporter is not a constructor
     //
     // For that reason, we move the `--onlyChanged` flag next to it.
-    'pnpm lint --reporters=jest-silent-reporter --onlyChanged',
-    () => 'pnpm typecheck:cypress',
+    'yarn lint --reporters=jest-silent-reporter --onlyChanged',
+    () => 'yarn typecheck:cypress',
   ],
 };