Add VS Code launch configs with create-next-app

[TyMick]

Following up on #28815, I thought it'd be nice to start adding the VS Code launch configs we'll soon be recommending to users in the Debugging docs page to apps generated by create-next-app, to provide an easier debugging experience out-of-the-box.

I've tested these changes using the following four commands:

node {pathToRepo}/next.js/packages/create-next-app/dist/index.js
node {pathToRepo}/next.js/packages/create-next-app/dist/index.js --use-npm
node {pathToRepo}/next.js/packages/create-next-app/dist/index.js --example api-routes
node {pathToRepo}/next.js/packages/create-next-app/dist/index.js --example api-routes --use-npm

...and in all four cases, the correct version of .vscode/launch.json (in terms of containing yarn dev or npm run dev) appears in the generated app.

Would this be an appropriate and helpful addition to create-next-app?

Feature

• Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
• Related issues linked using fixes #number
• Integration tests added
• Documentation added
• Telemetry added. In case of a feature if it's used or not.
• Errors have helpful link attached, see contributing.md

[ijjk]

Stats from current PR

Default Build (Decrease detected ✓)

General

	vercel/next.js canary	TyMick/next.js create-next-app-vscode-launch-configs	Change
buildDuration	17.2s	17.4s	⚠️ +165ms
buildDurationCached	4.3s	4.2s	-23ms
nodeModulesSize	182 MB	182 MB	✓

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	TyMick/next.js create-next-app-vscode-launch-configs	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.672	3.574	-0.1
/ avg req/sec	680.9	699.42	+18.52
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	2	2.079	⚠️ +0.08
/error-in-render avg req/sec	1250.12	1202.71	⚠️ -47.41

Client Bundles (main, webpack, commons)

	vercel/next.js canary	TyMick/next.js create-next-app-vscode-launch-configs	Change
779.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.2 kB	42.2 kB	✓
main-HASH.js gzip	26.7 kB	26.7 kB	✓
webpack-HASH.js gzip	1.45 kB	1.45 kB	✓
Overall change	70.6 kB	70.6 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	TyMick/next.js create-next-app-vscode-launch-configs	Change
polyfills-a4..dd70.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	TyMick/next.js create-next-app-vscode-launch-configs	Change
_app-HASH.js gzip	977 B	977 B	✓
_error-HASH.js gzip	194 B	194 B	✓
amp-HASH.js gzip	311 B	311 B	✓
css-HASH.js gzip	328 B	328 B	✓
dynamic-HASH.js gzip	2.67 kB	2.67 kB	✓
head-HASH.js gzip	351 B	351 B	✓
hooks-HASH.js gzip	918 B	918 B	✓
image-HASH.js gzip	4.14 kB	4.14 kB	✓
index-HASH.js gzip	260 B	260 B	✓
link-HASH.js gzip	1.66 kB	1.66 kB	✓
routerDirect..HASH.js gzip	320 B	320 B	✓
script-HASH.js gzip	386 B	386 B	✓
withRouter-HASH.js gzip	319 B	319 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	13 kB	13 kB	✓

Client Build Manifests

	vercel/next.js canary	TyMick/next.js create-next-app-vscode-launch-configs	Change
_buildManifest.js gzip	493 B	493 B	✓
Overall change	493 B	493 B	✓

Rendered Page Sizes

	vercel/next.js canary	TyMick/next.js create-next-app-vscode-launch-configs	Change
index.html gzip	540 B	540 B	✓
link.html gzip	552 B	552 B	✓
withRouter.html gzip	533 B	533 B	✓
Overall change	1.63 kB	1.63 kB	✓

---

Default Build with SWC (Decrease detected ✓)

General

	vercel/next.js canary	TyMick/next.js create-next-app-vscode-launch-configs	Change
buildDuration	8.7s	8.6s	-50ms
buildDurationCached	4.2s	4.3s	⚠️ +141ms
nodeModulesSize	182 MB	182 MB	✓

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	TyMick/next.js create-next-app-vscode-launch-configs	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.586	3.741	⚠️ +0.16
/ avg req/sec	697.23	668.24	⚠️ -28.99
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.932	2.092	⚠️ +0.16
/error-in-render avg req/sec	1294.23	1195.07	⚠️ -99.16

Client Bundles (main, webpack, commons)

	vercel/next.js canary	TyMick/next.js create-next-app-vscode-launch-configs	Change
675-HASH.js gzip	13.8 kB	13.8 kB	✓
770.HASH.js gzip	178 B	178 B	✓
framework-HASH.js gzip	50.7 kB	50.7 kB	✓
main-HASH.js gzip	34.6 kB	34.6 kB	✓
webpack-HASH.js gzip	1.65 kB	1.65 kB	✓
Overall change	101 kB	101 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	TyMick/next.js create-next-app-vscode-launch-configs	Change
polyfills-a4..dd70.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	TyMick/next.js create-next-app-vscode-launch-configs	Change
_app-HASH.js gzip	1.32 kB	1.32 kB	✓
_error-HASH.js gzip	180 B	180 B	✓
amp-HASH.js gzip	315 B	315 B	✓
css-HASH.js gzip	331 B	331 B	✓
dynamic-HASH.js gzip	2.8 kB	2.8 kB	✓
head-HASH.js gzip	356 B	356 B	✓
hooks-HASH.js gzip	637 B	637 B	✓
image-HASH.js gzip	573 B	573 B	✓
index-HASH.js gzip	262 B	262 B	✓
link-HASH.js gzip	2.2 kB	2.2 kB	✓
routerDirect..HASH.js gzip	326 B	326 B	✓
script-HASH.js gzip	393 B	393 B	✓
withRouter-HASH.js gzip	322 B	322 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	10.1 kB	10.1 kB	✓

Client Build Manifests

	vercel/next.js canary	TyMick/next.js create-next-app-vscode-launch-configs	Change
_buildManifest.js gzip	511 B	511 B	✓
Overall change	511 B	511 B	✓

Rendered Page Sizes

	vercel/next.js canary	TyMick/next.js create-next-app-vscode-launch-configs	Change
index.html gzip	539 B	539 B	✓
link.html gzip	552 B	552 B	✓
withRouter.html gzip	531 B	531 B	✓
Overall change	1.62 kB	1.62 kB	✓

Commit: fe0a5db

[fw2568]

Vote +1 - this helped me to a lot to make vscode debugging working. Should be part of create-next-app!

[ijjk]

Hi, I'm not sure we want to automatically copy this config by default as we aim to keep the default templates minimal and we also document these configs here now https://nextjs.org/docs/advanced-features/debugging#debugging-with-vs-code

I'm gonna close this for now, but we can open an idea thread to investigate this more!