Skip to content

Commit 752856c

Browse files
lobsterkatielobsterkatie
authored
feat(nextjs): Add scripts to allow deploying a branch to vercel (#3624)
1 parent 0efb208 commit 752856c

File tree

5 files changed

+227
-1
lines changed

5 files changed

+227
-1
lines changed

‎packages/nextjs/package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,9 @@
5353
"fix:prettier": "prettier --write \"{src,test}/**/*.ts\"",
5454
"test": "jest",
5555
"test:watch": "jest --watch",
56-
"pack": "npm pack"
56+
"pack": "npm pack",
57+
"vercel:branch": "source vercel/set-up-branch-for-test-app-use.sh",
58+
"vercel:project": "source vercel/make-project-use-current-branch.sh"
5759
},
5860
"volta": {
5961
"extends": "../../package.json"

‎packages/nextjs/vercel/install-sentry-from-branch.sh

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
# SCRIPT TO INCLUDE AS PART OF A VERCEL-DEPLOYED PROJECT, SO THAT IT USES A BRANCH FROM THE SDK REPO
2+
# USE `yarn vercel:project <path-to-project>` TO HAVE IT AUTOMATICALLY ADDED TO YOUR PROJECT
3+
4+
# CUSTOM INSTALL COMMAND FOR PROJECT ON VERCEL: `source .sentry/install-sentry-from-branch.sh`
5+
6+
PROJECT_DIR=$(pwd)
7+
8+
# Set BRANCH_NAME as an environment variable
9+
source .sentry/set-branch-name.sh
10+
11+
echo " "
12+
echo "CLONING SDK REPO"
13+
git clone https://github.com/getsentry/sentry-javascript.git
14+
cd sentry-javascript
15+
git checkout $BRANCH_NAME
16+
echo "Latest commit: $(git log --format="%C(auto) %h - %s" | head -n 1)"
17+
18+
echo " "
19+
echo "INSTALLING SDK DEPENDENCIES"
20+
# We need dev dependencies so that we can build the SDK
21+
yarn --prod false
22+
23+
echo " "
24+
echo "BUILDING SDK"
25+
# we need to build es5 versions because `next.config.js` calls `require` on the SDK (to get `withSentryConfig`) and
26+
# therefore it looks for `dist/index.js`
27+
yarn build:es5
28+
# we need to build esm versions because that's what `next` actually uses when it builds the app
29+
yarn build:esm
30+
cd $PROJECT_DIR
31+
32+
# Add built SDK as a file dependency. This has the side effect of forcing yarn to install all of the other dependencies,
33+
# saving us the trouble of needing to call `yarn` separately after this
34+
echo " "
35+
echo "SUBSTITUTING LOCAL SDK FOR PUBLISHED ONE AND INSTALLING PROJECT DEPENDENCIES"
36+
echo "yarn add file:sentry-javascript/packages/nextjs"
37+
yarn add file:sentry-javascript/packages/nextjs
38+
39+
# In case for any reason we ever need to link the local SDK rather than adding it as a file dependency:
40+
41+
# for abs_package_path in ${PROJECT_DIR}/sentry-javascript/packages/*; do
42+
43+
# # link the built packages into project dependencies
44+
# for abs_package_path in sentry-javascript/packages/*; do
45+
# package=$(basename $abs_package_path)
46+
47+
# # this one will error out because it's not called @sentry/typescript, it's
48+
# # called @sentry-internal/typescript, but we don't need it, so just move on
49+
# if [ "$package" = "typescript" ]; then
50+
# continue
51+
# fi
52+
53+
# echo " "
54+
# echo "Linking @sentry/${package}"
55+
56+
# cd $abs_package_path
57+
# yarn link
58+
59+
# cd $PROJECT_DIR
60+
# yarn link "@sentry/$package"
61+
# done
62+
63+
# # These aren't in the repo and therefore have to be done separately (we link these even though they're not in the repo
64+
# # because the branch might specify a different version of either than the published SDK does)
65+
# for package in "cli" "webpack-plugin"; do
66+
67+
# echo " "
68+
# echo "Linking @sentry/${package}"
69+
70+
# cd sentry-javascript/node_modules/@sentry/$package
71+
# yarn link
72+
73+
# cd $PROJECT_DIR
74+
# yarn link "@sentry/$package"
75+
# done

‎packages/nextjs/vercel/instructions.md

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
### To prepare branch for deploying on Vercel:
2+
3+
From `packages/nextjs`, run
4+
5+
`yarn vercel:branch`.
6+
7+
This will delete unneeded packages (angular, vue, etc) in order to speed up deployment. It will then commit that change.
8+
When your branch is ready to PR, just rebase and drop that commit.
9+
10+
### To prepare test app for using current branch:
11+
12+
First, make sure the branch you want to test is checked out in your `sentry-javascript` repo, and that all changes you
13+
want to test are pushed to GitHub.
14+
15+
From `packages/nextjs`, run
16+
17+
`yarn vercel:project <path/to/testapp>`.
18+
19+
This will copy a script into a `.sentry` folder at the root level of your test app,and create a second one. (The first
20+
script is the one you'll run on Vercel. The second is a helper to the first, so that it knows which branch to use.) It
21+
will then commit (but not push) this change.
22+
23+
Go into your project settings on Vercel and change the install command to
24+
25+
`source .sentry/install-sentry-from-branch.sh`.
26+
27+
If you're using bundle analyzer, change the build command to
28+
29+
`yarn build && mv .next/analyze/* public`.
30+
31+
The bundle visualizations will be available on your deployed site at `/client.html` and `/server.html`.
32+
33+
### To test the SDK:
34+
35+
Once you have pushed the changes made by `yarn vercel:project` to GitHub, just make changes and push, and Vercel will
36+
always use the latest version of both the SDK and your test app. Pushing changes to your test app will trigger a new
37+
build in Vercel; for changes to the SDK, you'll need to manually redeploy, either by kicking off a new build or simply
38+
choosing 'Redeploy' on your most recent existing build.

‎packages/nextjs/vercel/make-project-use-current-branch.sh

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
# SCRIPT TO MAKE TEST APP USE THIS BRANCH
2+
3+
# CALL THIS BY RUNNING `yarn vercel:project <path-to-project>`
4+
5+
NEXTJS_SDK_DIR=$(pwd)
6+
PROJECT_DIR=$1
7+
SDK_BRANCH_NAME=$(git rev-parse --abbrev-ref HEAD)
8+
9+
if [ ! -n "${PROJECT_DIR}" ]; then
10+
echo " "
11+
echo "ERROR: Missing project directory. Please supply the path to your project as an argument to the command."
12+
exit 1
13+
fi
14+
15+
# make sure branch is already set up
16+
echo " "
17+
echo "Making sure branch is set up for vercel deployment."
18+
yarn vercel:branch
19+
20+
cd $PROJECT_DIR
21+
22+
# make sure we're dealing with a clean repo
23+
STASHED_CHANGES=$(git status --porcelain)
24+
if [ -n "${STASHED_CHANGES}" ]; then
25+
echo "Found uncommitted changes in your project. Stashing them."
26+
git stash --quiet --include-untracked
27+
fi
28+
29+
# make sure we have a clean directory into which to put our scripts
30+
echo " "
31+
if [ -d .sentry ]; then
32+
echo "Clearing .sentry directory"
33+
rm -rf .sentry
34+
else
35+
echo "Creating .sentry directory"
36+
fi
37+
mkdir .sentry
38+
39+
# set up scripts for use in vercel deployment
40+
echo " "
41+
echo "Creating install scripts and committing the changes"
42+
cp $NEXTJS_SDK_DIR/vercel/install-sentry-from-branch.sh .sentry
43+
echo "export BRANCH_NAME=${SDK_BRANCH_NAME}" >>.sentry/set-branch-name.sh
44+
git add .
45+
git commit -m "add scripts for using ${SDK_BRANCH_NAME} branch of @sentry/nextjs"
46+
47+
# restore working directory, if necessary
48+
if [ -n "${STASHED_CHANGES}" ]; then
49+
echo " "
50+
echo "Restoring changes from earlier stash:"
51+
git stash pop --quiet
52+
git status --porcelain
53+
echo " "
54+
fi
55+
56+
cd $NEXTJS_SDK_DIR
57+
58+
echo " "
59+
echo "SUCCESS!"
60+
echo "Your project will now use this branch of the SDK repo when deployed to Vercel. If you haven't done so already, go to your project settings in Vercel and set a custom install command:"
61+
echo " $(source .sentry/install-sentry-from-branch.sh)"
62+
echo " "

‎packages/nextjs/vercel/set-up-branch-for-test-app-use.sh

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
# SCRIPT TO SET UP BRANCH FOR USE IN VERCEL-DEPLOYED TEST APPS
2+
3+
# CALL THIS WITH `yarn vercel:branch`
4+
5+
echo " "
6+
7+
NEXTJS_SDK_DIR=$(pwd)
8+
9+
# this puts us in the repo root
10+
cd ../..
11+
12+
# make sure we're dealing with a clean repo
13+
STASHED_CHANGES=$(git status --porcelain)
14+
if [ -n "${STASHED_CHANGES}" ]; then
15+
echo "Found uncommitted changes. Stashing them."
16+
git stash --quiet --include-untracked
17+
fi
18+
19+
# if this hasn't already been done, get rid of irrelevant packages to speed up deploy process
20+
PACKAGES_DELETED=false
21+
for package in "angular" "ember" "eslint-config-sdk" "eslint-plugin-sdk" "gatsby" "serverless" "vue" "wasm"; do
22+
if [ -d packages/${package} ]; then
23+
echo "Deleting ${package}"
24+
rm -rf packages/${package}
25+
PACKAGES_DELETED=true
26+
fi
27+
done
28+
29+
echo " "
30+
31+
# if we deleted anything, commit the result
32+
if [ "$PACKAGES_DELETED" = true ]; then
33+
echo "Committing deletions. Don't forget to push this commit before you deploy."
34+
git add .
35+
git commit -m "delete unneeded packages"
36+
else
37+
echo "Branch already set up for vercel deployment"
38+
fi
39+
40+
# restore working directory, if necessary
41+
if [ -n "${STASHED_CHANGES}" ]; then
42+
echo " "
43+
echo "Restoring changes from earlier stash:"
44+
git stash pop --quiet
45+
git status --porcelain
46+
echo " "
47+
fi
48+
49+
cd $NEXTJS_SDK_DIR

0 commit comments

Comments
 (0)