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

Experimental https localhost flag #5479

Open
wants to merge 8 commits into
base: main
Choose a base branch
from

Conversation

byrichardpowell
Copy link
Contributor

@byrichardpowell byrichardpowell commented Mar 3, 2025

important

Do not release these changes until https://github.com/shop/world/pull/9621 has shipped.

WHY are these changes introduced?

To allow partners to develop apps without the use of a tunnel. Tunnels have proven extremely flakey and are the cause of a lot of friction for 3P developers building apps. Here is the Vault project: https://vault.shopify.io/gsd/projects/42691-Shopify-CLI-Self-signed-certificates-for-app-development

Instead developers can serve their app from https://localhost/ using a self-signed cert by using a --use-localhost flag. This is the CLI PR, here is the shopify/web PR: https://github.com/shop/world/pull/9621

WHAT is this pull request doing?

Add a new flag to shopify app dev which is --use-localhost. When this flag is enabled, the user is warned of the flags limitations as prompted to provide feedback:

Screenshot 2025-03-03 at 3 27 17 PM

Then the user prompted to install a cert using mkcert:

Screenshot 2025-03-03 at 3 27 57 PM

From that point the app is served from https://localhost

How to test your changes?

See this PR on admin-web

Post-release steps

None for now. We will add documentation for this flag once we make the flag public, after a grace period of data and feedback collection.

Measuring impact

How do we know this change was effective? Please choose one:

  • n/a - this doesn't need measurement, e.g. a linting rule or a bug-fix
  • Existing analytics will cater for this addition
  • PR includes analytics changes to measure impact

Checklist

  • I've considered possible cross-platform impacts (Mac, Linux, Windows)
  • I've considered possible documentation changes

@byrichardpowell byrichardpowell requested a review from shauns March 3, 2025 20:30
@byrichardpowell byrichardpowell requested review from a team as code owners March 3, 2025 20:30
Copy link
Contributor

github-actions bot commented Mar 3, 2025

Coverage report

St.
Category Percentage Covered / Total
🟡 Statements
76.12% (-0.3% 🔻)
9231/12127
🟡 Branches
71.19% (-0.45% 🔻)
4513/6339
🟡 Functions
75.76% (-0.29% 🔻)
2403/3172
🟡 Lines
76.66% (-0.31% 🔻)
8719/11373
Show new covered files 🐣
St.
File Statements Branches Functions Lines
🟢
... / mkcert.ts
89.19% 66.67% 100% 88.57%
🟢
... / test-with-temp-dir.ts
100% 100% 100% 100%
Show files with reduced coverage 🔻
St.
File Statements Branches Functions Lines
🟢
... / dev.ts
81.97% (-1.37% 🔻)
71.43%
80% (-4.21% 🔻)
80% (-1.48% 🔻)
🔴
... / dev.ts
18.94% (-0.44% 🔻)
14.49% (-0.43% 🔻)
24.39%
19.51% (-0.49% 🔻)
🟢
... / urls.ts
82.41% (-0.16% 🔻)
77.5% 75%
84.31% (-0.15% 🔻)
🟢
... / app-event-watcher.ts
96.39% (-1.2% 🔻)
88.57% (-2.86% 🔻)
95.45% 100%
🔴
... / app-management-client.ts
35.69% (-0.24% 🔻)
27.66% 35.05%
34.68% (-0.26% 🔻)
🟡
... / api.ts
68.18% (-15.47% 🔻)
50.85% (-19.92% 🔻)
88.89% (-11.11% 🔻)
67.06% (-15.94% 🔻)
🟡
... / graphql.ts
66.67% (-25% 🔻)
55.56% (-14.81% 🔻)
66.67% (-16.67% 🔻)
65.71% (-25.71% 🔻)
🟡
... / headers.ts
77.27% (-22.73% 🔻)
87.5%
77.78% (-22.22% 🔻)
76.19% (-23.81% 🔻)
🔴
... / environment.ts
26.67% (-18.33% 🔻)
18.18% (-17.11% 🔻)
50% (-10% 🔻)
28.57% (-18.8% 🔻)
🟡
... / fs.ts
68.89% (-1.11% 🔻)
93.75%
65.91% (-2.27% 🔻)
68.18% (-1.14% 🔻)
🟢
... / github.ts
91.11% (+4.9% 🔼)
85.71% (-2.52% 🔻)
87.5% (+7.5% 🔼)
91.11% (+4.9% 🔼)
🔴
... / http.ts
48.15% (-45.85% 🔻)
10% (-83.55% 🔻)
35.71% (-58.04% 🔻)
50% (-44% 🔻)
🟡
... / notifications-system.ts
63.96% (-1.52% 🔻)
62.35% (-2.76% 🔻)
85.71%
71.43% (+0.15% 🔼)
🟢
... / graphql.ts
83.33% (-16.67% 🔻)
57.14% (-14.29% 🔻)
88.89% (-11.11% 🔻)
82.86% (-17.14% 🔻)
🟡
... / prerun.ts
75.76% (-2.37% 🔻)
78.57% (-13.1% 🔻)
90% 77.42%

Test suite run success

2099 tests passing in 929 suites.

Report generated by 🧪jest coverage report action from 5388ac9

@byrichardpowell byrichardpowell force-pushed the experimental-https-localhost-flag branch 3 times, most recently from 7043c2e to 7bd4cf2 Compare March 4, 2025 20:44
@byrichardpowell byrichardpowell force-pushed the experimental-https-localhost-flag branch 2 times, most recently from 0857b24 to 14d19ee Compare March 5, 2025 19:35
shauns and others added 8 commits March 5, 2025 14:36
To do this we:

1. Add a --use-localhost flag that uses mkcert for https://localhost
2. Remove the no-tunnel and no-tunnel-http flags in favor of just use-localhost.
3. Make the run method of the dev command a little easier to read
1. Add changeset
2. Add a Banner explaining the limitations & asking for feedback
3. Make it clear its the use-localhost flag that requires mkcert download
@byrichardpowell byrichardpowell force-pushed the experimental-https-localhost-flag branch from 14d19ee to 5388ac9 Compare March 5, 2025 19:37
@byrichardpowell
Copy link
Contributor Author

@shauns @nickwesselman This is now ready for review & sheperding over the finish line whilst I am away.

Copy link
Contributor

github-actions bot commented Mar 5, 2025

Differences in type declarations

We detected differences in the type declarations generated by Typescript for this branch compared to the baseline ('main' branch). Please, review them to ensure they are backward-compatible. Here are some important things to keep in mind:

  • Some seemingly private modules might be re-exported through public modules.
  • If the branch is behind main you might see odd diffs, rebase main into this branch.

New type declarations

packages/cli-kit/dist/public/node/testing/test-with-temp-dir.d.ts
import { TestAPI } from 'vitest';
interface TempDirFixture {
    tempDir: string;
}
/**
 * Vitest fixture providing the test with a temporary directory to work in.
 */
export declare const testWithTempDir: TestAPI<TempDirFixture>;
export {};

Existing type declarations

packages/cli-kit/dist/public/node/github.d.ts
@@ -47,4 +47,5 @@ export interface GithubRepositoryReference {
  * @param reference - A GitHub repository URL (e.g. https://github.com/Shopify/cli/blob/main/package.json)
  */
 export declare function parseGitHubRepositoryReference(reference: string): GithubRepositoryReference;
+export declare function downloadGitHubRelease(repo: string, version: string, assetName: string, targetPath: string): Promise<void>;
 export {};
\ No newline at end of file

@byrichardpowell byrichardpowell changed the title [WIP] Experimental https localhost flag Experimental https localhost flag Mar 5, 2025
@byrichardpowell byrichardpowell added the #gsd:42691 https://vault.shopify.io/gsd/projects/42691-Shopify-CLI-Self-signed-certificates-for-app-development label Mar 5, 2025
@byrichardpowell
Copy link
Contributor Author

/snapit

Copy link
Contributor

github-actions bot commented Mar 5, 2025

🫰✨ Thanks @byrichardpowell! Your snapshot has been published to npm.

Test the snapshot by installing your package globally:

pnpm i -g @shopify/[email protected]

Tip

If you get an ETARGET error, install it with NPM and the flag --@shopify:registry=https://registry.npmjs.org

Caution

After installing, validate the version by running just shopify in your terminal.
If the versions don't match, you might have multiple global instances installed.
Use which shopify to find out which one you are running and uninstall it.

const certPath = joinPath(appDirectory, '.shopify', 'localhost.pem')

outputInfo(outputContent`🔐 Checking ${mkcertSnippet} root certificate. You may be prompted for your password.`)
await exec(mkcertPath, ['-install', '-key-file', keyPath, '-cert-file', certPath, 'localhost'])
Copy link
Contributor

Choose a reason for hiding this comment

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

Calling out some DX notes:

  • this is where the most visible changes occur -- during mkcert install command
  • we might want to review the error case here. if mkcert fails, is that a bug or user/env error. and what feedback are we presenting in that case.

@nickwesselman
Copy link
Contributor

I implemented some DX suggestions here:

#5491

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
#gsd:42691 https://vault.shopify.io/gsd/projects/42691-Shopify-CLI-Self-signed-certificates-for-app-development
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants