Add `list` and `link` commands to hydrogen-cli #784

graygilmore · 2023-04-12T21:33:39Z

WHY are these changes introduced?

This is the first of many steps in updating the hydrogen-cli to better communicate and interact with Hydrogen storefronts created on Shopify. We want a seamless experience for developers when they are working on their storefront locally.

WHAT is this pull request doing?

This PR introduces new commands to the CLI:

list: list all of the Hydrogen storefronts on a shop
link: link your local development to a specific Hydrogen storefront
unlink: remove the link to a Hydrogen storefront

In and of itself this change will not introduce any new functionality for developers but it lays a foundation for us to build other commands on top of (coming soon: environment variables). In addition to the commands this introduces a new concept of a Shopify project configuration file that lives inside of your local workspace (and is automatically added to your .gitignore).

This PR is split into smaller, atomic commits that should make reviewing much easier.

List

➜  cli git:(cli-list-and-link) h2 list
Found 2 Hydrogen storefronts on test.myshopify.com:

ID   Name         Production URL                          Current deployment
───  ───────────  ──────────────────────────────────────  ──────────────────────────────────
1    Hydrogen     https://hydrogen-1.o2.myshopify.dev     March 22, 2023, Add lockfile
2    Test Shop    https://test-shop-2.o2.myshopify.dev    March 13, 2023, Update README.md

Link

➜  cli git:(cli-list-and-link) h2 link
?  Choose a storefront to link your local development to:

   (1) Hydrogen https://hydrogen-1.o2.myshopify.dev
>  (2) Test Shop https://test-shop-2.o2.myshopify.dev

   Press ↑↓ arrows to select, enter to confirm

After selection:

✅ Success! Linked to Test Shop.
Admin URL: https://test.myshopify.com/admin/custom_storefronts/2
Site URL: https://test-shop-2.o2.myshopify.dev

HOW to test your changes?

Pull the branch and navigate to the cli directory
Run npm run build
Run export SHOPIFY_HYDROGEN_FLAG_PATH=../../templates/demo-store so we're always targeting the demo store
Run h2 list (note: if h2 is unavailable run npx shopify hydrogen shortcut first) to see a list of your storefronts

You should be prompted to provide a shop
You should then be prompted to authenticate with that shop
If you don't have any storefronts you'll be prompted with next steps to rectify that

Run h2 link to link to a specific storefront
Run h2 unlink to remove the link

Post-merge steps

These commands are currently hidden.

Checklist

I've read the Contributing Guidelines
I've considered possible cross-platform impacts (Mac, Linux, Windows)
I've added a changeset if this PR contains user-facing or noteworthy changes
I've added tests to cover my changes
I've added or updated the documentation

packages/cli/src/commands/hydrogen/list.ts

gfscott

Nice! 🤩 Few tweaks and questions, and I think I need to tophat it in the terminal to really get the full flavor, but some initial suggestions here.

packages/cli/src/commands/hydrogen/link.ts

gfscott · 2023-04-13T21:05:21Z

packages/cli/src/commands/hydrogen/link.ts

+
+  if (configStorefront && !force) {
+    const overwriteLink = await renderConfirmationPrompt({
+      message: `${configStorefront.title} is currently linked to your local environment. Do you want to change storefronts?`,


Maybe local project here too?

Wondering if we need to introduce the idea and terminology of local/remote, or if we can get away with storefront as the stand-in for the idea of "remote"

Suggested change

message: `${configStorefront.title} is currently linked to your local environment. Do you want to change storefronts?`,

message: `Your project is currently linked to ${configStorefront.title}. Do you want to re-link to a different Hydrogen storefront?`,

Yes, I've been struggling with the terminology here because I don't want to keep saying "Hydrogen storefront defined in the admin". Maybe we can include the word Shopify to imply that it's a record we hold?

Your project is currently linked to ${title}. Do you want to re-link to a different Hydrogen storefront on Shopify?

Does "on Shopify" make sense?

Maybe "a different Shopify Hydrogen storefront"?

packages/cli/src/commands/hydrogen/link.ts

gfscott · 2023-04-13T21:14:57Z

packages/cli/src/commands/hydrogen/list.ts

+
+export default class List extends Command {
+  static description =
+    "Returns a list of storefronts in your Shop's Hydrogen sales channel.";


I think it's a good idea to name the shop every time. Some people will work across multiple merchant clients etc. Let's just remove even the possibility of ambiguity here.

Also I think it makes sense to be specific across the board about Hydrogen storefronts.

Suggested change

"Returns a list of storefronts in your Shop's Hydrogen sales channel.";

`Returns a list of Hydrogen storefronts available on ${shop}.`;

This description won't have access to any data so we can't insert things here, unfortunately. We can make this a little cleaner, though:

Returns a list of Hydrogen storefronts available on a given shop.

packages/cli/src/commands/hydrogen/unlink.ts

frandiox

Good job, just adding minor comments here.
Should we keep these commands hidden from users until they can actually be used for something?

packages/cli/src/lib/flags.ts

packages/cli/src/lib/graphql/admin/link-storefront.ts

graygilmore · 2023-04-19T18:35:18Z

Force Push Patch Notes

Removed the unnecessary import of gql (link-storefronts, list-storefronts)
Moved storefront flag from commonFlags into the only command we expect to use it in

graygilmore · 2023-04-19T20:19:24Z

Should we keep these commands hidden from users until they can actually be used for something?

@frandiox exactly! I was going to keep them hidden until we've been able to get things merged in and have the whole flow tested. I understand anyone will be able to use them if they're watching these PRs (👋🏻) but marking them as hidden is the one lever I feel that's available to us to mark something as beta-ish.

graygilmore · 2023-04-21T18:22:29Z

Force Push Patch Notes

Rebased with 2023-04 now that it's been released

cartogram

This looks great! Just a few comments.

cartogram · 2023-04-24T22:00:54Z

packages/cli/src/lib/shop.test.ts

+  });
+
+  describe('when a shop is passed via flag', () => {
+    it('returns the shop', async () => {


Just a heads up, eventually I would like to add the shopify cli eslint configs to this package which will prefer we write test instead of it. We'll change the entire package over in one go when we add the rules.

cartogram · 2023-04-24T22:00:59Z

packages/cli/src/lib/missing-storefronts.ts

+
+import {newHydrogenStorefrontUrl} from './admin-urls.js';
+
+export function missingStorefronts(adminSession: AdminSession) {


I like the idea of starting a more specific sub-set of cli-kit/node/ui that is specific to custom-storefronts and lives inside this package (lib/ui?). This should be a future thing, but for now I would call this renderMissingStorefronts so that the name is more suggestive of what the function does (render things).

Oooo I like that! Let's revisit that idea when this first batch of commands go in.

frandiox

I'd say let's get this merged asap after checking comments from other reviewers 👍

graygilmore · 2023-05-01T17:12:34Z

Force Push Patch Notes

Rebased with 2023-04 since this was sitting for a week
Renamed missingStorefronts to logMissingStorefronts to match missing-routes functions

graygilmore requested review from frehner, cartogram, frandiox, lordofthecactus, blittle, wizardlyhel and gfscott April 12, 2023 21:34

graygilmore commented Apr 12, 2023

View reviewed changes

packages/cli/src/commands/hydrogen/list.ts Outdated Show resolved Hide resolved

graygilmore force-pushed the cli-list-and-link branch from 66e8742 to 98fbe82 Compare April 13, 2023 20:42

gfscott reviewed Apr 13, 2023

View reviewed changes

graygilmore force-pushed the cli-list-and-link branch 2 times, most recently from 9606961 to 07dae0d Compare April 18, 2023 22:55

frandiox reviewed Apr 19, 2023

View reviewed changes

packages/cli/src/lib/flags.ts Outdated Show resolved Hide resolved

packages/cli/src/lib/graphql/admin/link-storefront.ts Outdated Show resolved Hide resolved

graygilmore force-pushed the cli-list-and-link branch from 07dae0d to 14f5479 Compare April 19, 2023 18:33

graygilmore marked this pull request as ready for review April 19, 2023 21:46

graygilmore force-pushed the cli-list-and-link branch from cf81ec3 to 9fc0047 Compare April 21, 2023 18:22

graygilmore changed the base branch from 2023-01 to 2023-04 April 21, 2023 18:22

cartogram approved these changes Apr 25, 2023

View reviewed changes

frandiox approved these changes Apr 28, 2023

View reviewed changes

graygilmore added 8 commits May 1, 2023 10:11

Add utility for admin URLs

e2f6a52

Add utility function for fetching the admin session

7b1718e

Add utility functions for working with the Shopify config

1e95f58

Add utility to ensure a shop is set

23bcdc1

Add shared utility for dealing with null storefronts

4c12c15

Add list command

4cd0033

Add link command

337eabf

Add unlink command

a952870

graygilmore added 5 commits May 1, 2023 10:11

Ignore admin GraphQL files

86a19b2

Add .shopify to the .gitignore

b421e97

Update oclif manifest

027e636

Add changeset notes

2319098

Rename missingStorefronts to logMissingStorefronts

0432916

graygilmore force-pushed the cli-list-and-link branch from 9fc0047 to 0432916 Compare May 1, 2023 17:11

graygilmore merged commit 3d458e2 into 2023-04 May 1, 2023

graygilmore deleted the cli-list-and-link branch May 1, 2023 18:32

shopify-github-actions-access bot mentioned this pull request May 1, 2023

[ci] release 2023-04 #817

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add `list` and `link` commands to hydrogen-cli #784

Add `list` and `link` commands to hydrogen-cli #784

graygilmore commented Apr 12, 2023 •

edited

Loading

gfscott left a comment

gfscott Apr 13, 2023

graygilmore Apr 14, 2023

graygilmore Apr 14, 2023

gfscott Apr 13, 2023

graygilmore Apr 14, 2023

frandiox left a comment

graygilmore commented Apr 19, 2023

graygilmore commented Apr 19, 2023

graygilmore commented Apr 21, 2023

cartogram left a comment

cartogram Apr 24, 2023

cartogram Apr 24, 2023

graygilmore May 1, 2023

frandiox left a comment

graygilmore commented May 1, 2023

	message: `${configStorefront.title} is currently linked to your local environment. Do you want to change storefronts?`,
	message: `Your project is currently linked to ${configStorefront.title}. Do you want to re-link to a different Hydrogen storefront?`,

	"Returns a list of storefronts in your Shop's Hydrogen sales channel.";
	`Returns a list of Hydrogen storefronts available on ${shop}.`;


		import {newHydrogenStorefrontUrl} from './admin-urls.js';

		export function missingStorefronts(adminSession: AdminSession) {

Add list and link commands to hydrogen-cli #784

Add list and link commands to hydrogen-cli #784

Conversation

graygilmore commented Apr 12, 2023 • edited Loading

WHY are these changes introduced?

WHAT is this pull request doing?

List

Link

HOW to test your changes?

Post-merge steps

Checklist

gfscott 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

frandiox left a comment

Choose a reason for hiding this comment

graygilmore commented Apr 19, 2023

Force Push Patch Notes

graygilmore commented Apr 19, 2023

graygilmore commented Apr 21, 2023

Force Push Patch Notes

cartogram 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

frandiox left a comment

Choose a reason for hiding this comment

graygilmore commented May 1, 2023

Force Push Patch Notes

Add `list` and `link` commands to hydrogen-cli #784

Add `list` and `link` commands to hydrogen-cli #784

graygilmore commented Apr 12, 2023 •

edited

Loading