Skip to content

Enable fixtures/view-transition deploy to Vercel #32994

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

Open
wants to merge 13 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .prettierrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ module.exports = {
arrowParens: 'avoid',
overrides: [
{
files: ['*.code-workspace'],
files: ['*.code-workspace', '*.json'],
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

drive-by to allow force-formatting of .json files. They used to be handled by Hermes parser which can't parse .json files.

options: {
parser: 'json-stringify',
},
Expand Down
2 changes: 2 additions & 0 deletions fixtures/view-transition/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
.vercel
.env*.local
8 changes: 8 additions & 0 deletions fixtures/view-transition/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,3 +28,11 @@ yarn start:prod
```

This will pre-build all static resources and then start a server-side rendering HTTP server that hosts the React app and service the static resources (without hot reloading).

## Deploy

Deployed to https://react-fixture-view-transition-six.vercel.app
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I don't like the -six suffix. Maybe I accidentally sit on react-fixture-view-transition.vercel.app. I'll double check.

Dashboard: https://vercel.com/react-fixtures/react-fixture-view-transition.

Ask a member of React Core team for access if you need it.
Deployments should be public and happen automatically on PRs except those only targetting `compiler/`.
10 changes: 7 additions & 3 deletions fixtures/view-transition/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,15 @@
"private": true,
"devDependencies": {
"concurrently": "3.1.0",
"http-proxy-middleware": "3.0.3",
"react-scripts": "5.0.1",
"@babel/plugin-proposal-private-property-in-object": "7.21.11"
"react-scripts": "5.0.1"
},
"dependencies": {
"@babel/core": "7.26.0",
"@babel/plugin-proposal-private-property-in-object": "7.21.11",
"@babel/register": "^7.25.9",
"babel-preset-react-app": "10.0.1",
"express": "^4.14.0",
"http-proxy-middleware": "3.0.3",
Comment on lines 9 to +15
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

These are used when running the server so I classified them as prod dependencies. This enables a simple yarn install --production to avoid file limits when deploying. The alternative is bundling the server via ncc but that was its own fight I lost.

"ignore-styles": "^5.0.1",
"react": "^19.0.0",
"react-dom": "^19.0.0"
Expand All @@ -30,6 +32,8 @@
"dev:server": "NODE_ENV=development node server",
"start": "react-scripts build && NODE_ENV=production node server",
"build": "react-scripts build",
"postinstall": "cp -r ../../build/oss-experimental/* ./node_modules/",
"vc-build": "node scripts/vercel-build.js",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
Expand Down
88 changes: 88 additions & 0 deletions fixtures/view-transition/scripts/vercel-build.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
const childProcess = require('child_process');
const fs = require('fs/promises');
const path = require('path');

/**
* vite-plugin-ssr for create-react-app
*/
async function main() {
const projectDir = path.resolve(__dirname, '..');
const craBuildDir = path.join(projectDir, 'build');

const buildOutputDir = path.join(projectDir, '.vercel/output');
const buildStaticOutputDir = path.join(buildOutputDir, 'static');
const buildFunctionsOutputDir = path.join(buildOutputDir, 'functions');

childProcess.execSync('yarn build', {stdio: 'inherit'});
// reduce amount of n_m shipped
childProcess.execSync('yarn install --production', {stdio: 'inherit'});

await fs.rm(buildOutputDir, {recursive: true, force: true});
await fs.mkdir(buildOutputDir, {recursive: true});

await fs.cp(
path.join(craBuildDir, 'static'),
path.join(buildStaticOutputDir, 'static'),
{
recursive: true,
}
);

const indexFunctionDir = path.join(buildFunctionsOutputDir, 'index.func');
await fs.mkdir(indexFunctionDir, {recursive: true});
const indexFunctionConfig = {
handler: 'server/index.js',
launcherType: 'Nodejs',
runtime: 'nodejs22.x',
environment: {},
};
await fs.writeFile(
path.join(indexFunctionDir, '.vc-config.json'),
JSON.stringify(indexFunctionConfig, null, 2)
);
await fs.cp(
path.join(projectDir, 'package.json'),
path.join(indexFunctionDir, 'package.json'),
{
recursive: true,
}
);
await fs.cp(
path.join(projectDir, 'build'),
path.join(indexFunctionDir, 'build'),
{
recursive: true,
}
);
await fs.cp(
path.join(projectDir, 'node_modules'),
path.join(indexFunctionDir, 'node_modules'),
{
recursive: true,
}
);
await fs.cp(
path.join(projectDir, 'server'),
path.join(indexFunctionDir, 'server'),
{
recursive: true,
}
);
await fs.cp(
path.join(projectDir, 'src'),
path.join(indexFunctionDir, 'src'),
{
recursive: true,
}
);

const buildOutputConfig = {
version: 3,
};
await fs.writeFile(
path.join(buildOutputDir, 'config.json'),
JSON.stringify(buildOutputConfig, null, 2)
);
}

main();
35 changes: 30 additions & 5 deletions fixtures/view-transition/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.26.3.tgz#99488264a56b2aded63983abd6a417f03b92ed02"
integrity sha512-nHIxvKPniQXpmQLb0vhY3VaFb3S0YrTAwpOWJZh1wn3oJPjJk9Asva204PsBdmAE8vpzfHudT8DB0scYvy9q0g==

"@babel/core@^7.1.0", "@babel/core@^7.11.1", "@babel/core@^7.12.3", "@babel/core@^7.16.0", "@babel/core@^7.7.2", "@babel/core@^7.8.0":
"@babel/core@7.26.0", "@babel/core@^7.1.0", "@babel/core@^7.11.1", "@babel/core@^7.12.3", "@babel/core@^7.16.0", "@babel/core@^7.7.2", "@babel/core@^7.8.0":
version "7.26.0"
resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.26.0.tgz#d78b6023cc8f3114ccf049eb219613f74a747b40"
integrity sha512-i1SLeK+DzNnQ3LL/CswPCa/E5u4lh1k6IAEphON8F+cXt0t9euTshDru0q7/IqMa1PMPz5RnHuHscF8/ZJsStg==
Expand Down Expand Up @@ -2805,7 +2805,7 @@ babel-preset-jest@^27.5.1:
babel-plugin-jest-hoist "^27.5.1"
babel-preset-current-node-syntax "^1.0.0"

babel-preset-react-app@^10.0.1:
babel-preset-react-app@10.0.1, babel-preset-react-app@^10.0.1:
version "10.0.1"
resolved "https://registry.yarnpkg.com/babel-preset-react-app/-/babel-preset-react-app-10.0.1.tgz#ed6005a20a24f2c88521809fa9aea99903751584"
integrity sha512-b0D9IZ1WhhCWkrTXyFuIIgqGzSkRIH5D5AmB0bXbzYAB1OBAwHcUeyWW2LorutLWF5btNo/N7r/cIdmvvKJlYg==
Expand Down Expand Up @@ -8598,7 +8598,16 @@ string-natural-compare@^3.0.1:
resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4"
integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw==

"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0:
"string-width-cjs@npm:string-width@^4.2.0":
version "4.2.3"
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
dependencies:
emoji-regex "^8.0.0"
is-fullwidth-code-point "^3.0.0"
strip-ansi "^6.0.1"

string-width@^4.1.0, string-width@^4.2.0:
version "4.2.3"
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
Expand Down Expand Up @@ -8707,7 +8716,7 @@ stringify-object@^3.3.0:
is-obj "^1.0.1"
is-regexp "^1.0.0"

"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
version "6.0.1"
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
Expand All @@ -8721,6 +8730,13 @@ strip-ansi@^0.3.0:
dependencies:
ansi-regex "^0.2.1"

strip-ansi@^6.0.0, strip-ansi@^6.0.1:
version "6.0.1"
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
dependencies:
ansi-regex "^5.0.1"

strip-ansi@^7.0.1:
version "7.1.0"
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
Expand Down Expand Up @@ -9744,7 +9760,16 @@ [email protected]:
"@types/trusted-types" "^2.0.2"
workbox-core "6.6.1"

"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
version "7.0.0"
resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
dependencies:
ansi-styles "^4.0.0"
string-width "^4.1.0"
strip-ansi "^6.0.0"

wrap-ansi@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,7 @@
"build-for-devtools-prod": "yarn build-for-devtools --type=NODE_PROD",
"build-for-flight-dev": "cross-env RELEASE_CHANNEL=experimental node ./scripts/rollup/build.js react/index,react/jsx,react.react-server,react-dom/index,react-dom/client,react-dom/server,react-dom.react-server,react-dom-server.node,react-dom-server-legacy.node,scheduler,react-server-dom-webpack/ --type=NODE_DEV,ESM_PROD,NODE_ES2015 && mv ./build/node_modules ./build/oss-experimental",
"build-for-vt-dev": "cross-env RELEASE_CHANNEL=experimental node ./scripts/rollup/build.js react/index,react/jsx,react-dom/index,react-dom/client,react-dom/server,react-dom-server.node,react-dom-server-legacy.node,scheduler --type=NODE_DEV && mv ./build/node_modules ./build/oss-experimental",
"build-for-vt-deploy": "cross-env RELEASE_CHANNEL=experimental node ./scripts/rollup/build.js react/index,react/jsx,react-dom/index,react-dom/client,react-dom/server,react-dom-server.node,react-dom-server-legacy.node,scheduler --type=NODE_PROD && mv ./build/node_modules ./build/oss-experimental",
"linc": "node ./scripts/tasks/linc.js",
"lint": "node ./scripts/tasks/eslint.js",
"lint-build": "node ./scripts/rollup/validate/index.js",
Expand Down
Loading