chore: Add "Deploy Preview" GitHub workflow #2079

LekoArts · 2023-11-08T08:51:16Z

Description

This PR adds a new GitHub workflow called preview. You'll be able to comment !preview on a PR to build playground/nextjs with the current state of your PR. This also includes clerk-js.

How it works:

Build the monorepo packages
Copy playground/nextjs to a temp dir and use secco to install monorepo packages (and rest of deps) inside newly copied test site
Copy clerk-js/dist to public/clerk-js of test site and set env var to use that CLERK_JS_URL
Build site with Vercel
Upload site to Vercel
Add comment to PR to point towards preview

Note: Only members of Clerk Vercel Team will be able to access the deploy preview

Parts of the logic are copied from https://github.com/clerk/clerk-docs/blob/main/.github/workflows/preview.yml

Checklist

npm test runs as expected.
npm run build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

Packages affected

chore(repo): Add install site in isolation script chore(repo): Globally install secco chore(repo): Begin preview workflow chore(repo): Use actions/core chore(backend): Use cpy instead of rsync chore(repo): Update nextjs playground chore(repo): Add missing dep to nextjs playground chore(repo): Update lock file

changeset-bot · 2023-11-08T08:51:20Z

🦋 Changeset detected

Latest commit: 60bc99f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 0 packages

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

LekoArts · 2023-11-08T10:30:10Z

.github/workflows/preview.yml

+jobs:
+  preview:
+    if: ${{ startsWith(github.event.comment.body, '!preview') && github.repository == 'clerk/javascript' && github.event.issue.pull_request }}
+    runs-on: ${{ vars.RUNNER_NORMAL }}


IMO it's not urgent so no need to spend more money than necessary

LekoArts · 2023-11-08T10:30:41Z

.github/workflows/preview.yml

+      VERCEL_ORG_ID: ${{ secrets.VERCEL_CLERK_PROD_ORG_ID }}
+      VERCEL_PROJECT_ID: ${{ secrets.VERCEL_JS_PREVIEW_PROJECT_ID }}


Env vars that the Vercel API uses (kind of undocumented feature at this point)

LekoArts · 2023-11-08T10:31:05Z

.github/workflows/preview.yml

+          echo "DATE=$(date -u +"%b %d, %Y %I:%M %p")" >> $GITHUB_ENV
+
+      - name: Install site in isolation
+        run: node scripts/install-site-in-isolation.mjs playground/nextjs


In the future we could easily swap this to another site

LekoArts · 2023-11-08T10:32:23Z

packages/backend/package.json

@@ -35,7 +35,7 @@
    "publish:local": "npx yalc push --replace --sig",
    "build:lib": "tsup --env.NODE_ENV production",
    "build:tests": "tsc -p tsconfig.test.json",
-    "build:runtime": "rsync -r --include '*/' --include '*.js' --include '*.mjs' --exclude='*' src/runtime dist",
+    "build:runtime": "cpy 'src/runtime/**/*.{mjs,js,cjs}' dist/runtime",


I was using https://github.com/nektos/act to test this workflow locally and rsync isn't installed in every linux distro. So I switched to a package that'll work everywhere (and is easier to grok)

LekoArts · 2023-11-08T10:33:05Z

playground/nextjs/package.json

  },
  "dependencies": {
    "@clerk/backend": "latest",
    "@clerk/clerk-react": "latest",
    "@clerk/clerk-sdk-node": "latest",
    "@clerk/nextjs": "latest",
    "@clerk/shared": "latest",
+    "@clerk/themes": "latest",


@clerk/themes is used but not actually installed

…kincjavascript

brkalow

👏 Looks great! No blocking comments. This will be a nice workflow improvement.

Should we add info on this to the contributing doc as well? Or do you want to stick to the internal notion page?

brkalow · 2023-11-08T15:17:04Z

scripts/install-site-in-isolation.mjs

+
+  // Installing secco
+  await core.group('Installing secco (if not already installed)', async () => {
+    await $`command -v secco || (command -v sudo && sudo npm install -g secco@latest) || npm install -g secco@latest`;


❓ why the need for sudo here?

If you run this locally (which it is designed for, you can fully run this locally) this is sometimes necessary in some environments. Ideally you already have it installed globally anyways then

brkalow · 2023-11-08T15:19:13Z

scripts/install-site-in-isolation.mjs

(passing thought) This feels like the beginning of a util that could be used locally to create playgrounds from our integration templates. 😄

Yeah, you can already use it locally start to finish 👍

.github/workflows/preview.yml

brkalow · 2023-11-08T15:22:17Z

.github/workflows/preview.yml

+      - name: Copy clerk-js/dist into public/clerk-js of test site
+        run: |
+          cp -r $GITHUB_WORKSPACE/packages/clerk-js/dist $FULL_TMP_FOLDER/public/clerk-js


Good thinking 👍

Co-authored-by: Bryce Kalow <bryce@clerk.dev>

LekoArts · 2023-11-08T15:40:34Z

Should we add info on this to the contributing doc as well

I can do that in another PR, I saw some needed unrelated changes there

LekoArts added 2 commits November 8, 2023 09:46

chore(repo): Finish preview workflow

a509e6c

clerk-cookie added actions backend playground labels Nov 8, 2023

LekoArts added 2 commits November 8, 2023 09:55

chore(repo): Add empty changeset

72ae140

chore(*): Add debug thing to test

d296182

clerk-cookie added the clerk-js label Nov 8, 2023

LekoArts added 5 commits November 8, 2023 10:32

testing

bddde1a

testing

0ad9f51

testing

2734308

testing

a4a0053

chore(repo): Reset testing stuff

22bab3a

clerk-cookie removed the clerk-js label Nov 8, 2023

LekoArts changed the title ~~WIP: Deploy Preview~~ chore: Add "Deploy Preview" GitHub workflow Nov 8, 2023

LekoArts commented Nov 8, 2023

View reviewed changes

LekoArts marked this pull request as ready for review November 8, 2023 10:33

LekoArts requested a review from a team as a code owner November 8, 2023 10:33

LekoArts added 2 commits November 8, 2023 13:55

Merge branch 'main' into lekoarts/sdk-853-add-deploy-preview-for-cler…

a90d797

…kincjavascript

chore(repo): Update lockfile

43c8078

brkalow approved these changes Nov 8, 2023

View reviewed changes

Update .github/workflows/preview.yml

60bc99f

Co-authored-by: Bryce Kalow <bryce@clerk.dev>

LekoArts added this pull request to the merge queue Nov 8, 2023

Merged via the queue into main with commit 267d950 Nov 8, 2023

LekoArts deleted the lekoarts/sdk-853-add-deploy-preview-for-clerkincjavascript branch November 8, 2023 15:50

LekoArts mentioned this pull request Nov 9, 2023

chore: Add Deploy preview to docs & improve workflow #2092

Merged

24 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: Add "Deploy Preview" GitHub workflow #2079

chore: Add "Deploy Preview" GitHub workflow #2079

LekoArts commented Nov 8, 2023 •

edited

Loading

changeset-bot bot commented Nov 8, 2023 •

edited

Loading

LekoArts Nov 8, 2023

LekoArts Nov 8, 2023

LekoArts Nov 8, 2023

LekoArts Nov 8, 2023

LekoArts Nov 8, 2023

brkalow left a comment

brkalow Nov 8, 2023

LekoArts Nov 8, 2023

brkalow Nov 8, 2023

LekoArts Nov 8, 2023

brkalow Nov 8, 2023

LekoArts commented Nov 8, 2023

		VERCEL_ORG_ID: ${{ secrets.VERCEL_CLERK_PROD_ORG_ID }}
		VERCEL_PROJECT_ID: ${{ secrets.VERCEL_JS_PREVIEW_PROJECT_ID }}

chore: Add "Deploy Preview" GitHub workflow #2079

chore: Add "Deploy Preview" GitHub workflow #2079

Conversation

LekoArts commented Nov 8, 2023 • edited Loading

Description

Checklist

Type of change

Packages affected

changeset-bot bot commented Nov 8, 2023 • edited Loading

🦋 Changeset detected

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

brkalow 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

LekoArts commented Nov 8, 2023

LekoArts commented Nov 8, 2023 •

edited

Loading

changeset-bot bot commented Nov 8, 2023 •

edited

Loading