jeff•12mo ago

[SOLVED] Vercel deploy only creates index.html (+3 others)

Hi 👋 I am deploying using Vercel by following the guide. My build succeeds, but the only static assets are: /index.html, /assets/index-1b44bb0f.css, /assets/index-d68674be.js, and /vite.svg. Convex functions do get pushed. When trying to reproduce locally, the build command npx convex deploy --cmd 'npm run build' -v fails with no information. How do I debug this—any help appreciated! 🙂

1 Reply

jeffOP•12mo ago

Output of Vercel build ITT

[22:59:43.064] Running build in Washington, D.C., USA (East) – iad1
[22:59:43.177] Cloning github.com/JeffHemmen/RocketMarket (Branch: main, Commit: 17d1b1b)
[22:59:43.579] Cloning completed: 401.158ms
[22:59:45.187] Restored build cache
[22:59:45.268] Running "vercel build"
[22:59:46.002] Vercel CLI 33.0.2
[22:59:46.621] Installing dependencies...
[22:59:47.640] 
[22:59:47.640] up to date in 685ms
[22:59:47.640] 
[22:59:47.640] 45 packages are looking for funding
[22:59:47.640]   run `npm fund` for details
[22:59:47.657] jeff123
[22:59:48.806] - Running 'npm run build' with environment variable "VITE_CONVEX_URL" set...
[22:59:48.807] 
[22:59:49.140] 
[22:59:49.140] > manual-test@0.0.0 build
[22:59:49.140] > tsc && vite build
[22:59:49.140] 
...

[22:59:43.064] Running build in Washington, D.C., USA (East) – iad1
[22:59:43.177] Cloning github.com/JeffHemmen/RocketMarket (Branch: main, Commit: 17d1b1b)
[22:59:43.579] Cloning completed: 401.158ms
[22:59:45.187] Restored build cache
[22:59:45.268] Running "vercel build"
[22:59:46.002] Vercel CLI 33.0.2
[22:59:46.621] Installing dependencies...
[22:59:47.640] 
[22:59:47.640] up to date in 685ms
[22:59:47.640] 
[22:59:47.640] 45 packages are looking for funding
[22:59:47.640]   run `npm fund` for details
[22:59:47.657] jeff123
[22:59:48.806] - Running 'npm run build' with environment variable "VITE_CONVEX_URL" set...
[22:59:48.807] 
[22:59:49.140] 
[22:59:49.140] > manual-test@0.0.0 build
[22:59:49.140] > tsc && vite build
[22:59:49.140] 
...

...
[22:59:52.690] [36mvite v4.5.1 [32mbuilding for production...[36m[39m
[22:59:52.723] transforming...
[22:59:55.794] [32m✓[39m 470 modules transformed.
[22:59:56.155] rendering chunks...
[22:59:56.167] computing gzip size...
[22:59:56.191] [2mdist/[22m[32mindex.html                 [39m[1m[2m  0.46 kB[22m[1m[22m[2m │ gzip:   0.30 kB[22m
[22:59:56.192] [2mdist/[22m[2massets/[22m[35mindex-1b44bb0f.css  [39m[1m[2m254.82 kB[22m[1m[22m[2m │ gzip:  33.57 kB[22m
[22:59:56.192] [2mdist/[22m[2massets/[22m[36mindex-d68674be.js   [39m[1m[33m522.96 kB[39m[22m[2m │ gzip: 147.47 kB[22m
[22:59:56.192] [33m
[22:59:56.192] (!) Some chunks are larger than 500 kBs after minification. Consider:
[22:59:56.192] - Using dynamic import() to code-split the application
[22:59:56.192] - Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
[22:59:56.192] - Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.[39m
[22:59:56.193] [32m✓ built in 3.50s[39m
[22:59:56.222] ✔ Ran "npm run build" with environment variable "VITE_CONVEX_URL" set
[22:59:56.223] - Deploying to https://quirky-dachshund-147.convex.cloud...
[22:59:56.223] 
[23:00:00.259] ✔ Deployed Convex functions to https://quirky-dachshund-147.convex.cloud
[23:00:00.343] Build Completed in /vercel/output [14s]
[23:00:00.370] Deploying outputs...
[23:00:01.221] 
[23:00:01.501] Deployment completed
[23:00:07.607] Uploading build cache [27.89 MB]...
[23:00:08.979] Build cache uploaded: 1.372s

...
[22:59:52.690] [36mvite v4.5.1 [32mbuilding for production...[36m[39m
[22:59:52.723] transforming...
[22:59:55.794] [32m✓[39m 470 modules transformed.
[22:59:56.155] rendering chunks...
[22:59:56.167] computing gzip size...
[22:59:56.191] [2mdist/[22m[32mindex.html                 [39m[1m[2m  0.46 kB[22m[1m[22m[2m │ gzip:   0.30 kB[22m
[22:59:56.192] [2mdist/[22m[2massets/[22m[35mindex-1b44bb0f.css  [39m[1m[2m254.82 kB[22m[1m[22m[2m │ gzip:  33.57 kB[22m
[22:59:56.192] [2mdist/[22m[2massets/[22m[36mindex-d68674be.js   [39m[1m[33m522.96 kB[39m[22m[2m │ gzip: 147.47 kB[22m
[22:59:56.192] [33m
[22:59:56.192] (!) Some chunks are larger than 500 kBs after minification. Consider:
[22:59:56.192] - Using dynamic import() to code-split the application
[22:59:56.192] - Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
[22:59:56.192] - Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.[39m
[22:59:56.193] [32m✓ built in 3.50s[39m
[22:59:56.222] ✔ Ran "npm run build" with environment variable "VITE_CONVEX_URL" set
[22:59:56.223] - Deploying to https://quirky-dachshund-147.convex.cloud...
[22:59:56.223] 
[23:00:00.259] ✔ Deployed Convex functions to https://quirky-dachshund-147.convex.cloud
[23:00:00.343] Build Completed in /vercel/output [14s]
[23:00:00.370] Deploying outputs...
[23:00:01.221] 
[23:00:01.501] Deployment completed
[23:00:07.607] Uploading build cache [27.89 MB]...
[23:00:08.979] Build cache uploaded: 1.372s

bash session of local reproduction attempt ITT

jeff@DESKTOP-FUM4FMP:~/repos/buildtest/RocketMarket$ export CONVEX_DEPLOY_KEY="prod:quirky-dachshund-147|01 . . . 4b"
jeff@DESKTOP-FUM4FMP:~/repos/buildtest/RocketMarket$ npx convex deploy --cmd 'npm run build' -v
⠋ Running 'npm run build' with environment variable "VITE_CONVEX_URL" set...

> manual-test@0.0.0 build
> tsc && vite build

✖ 'npm run build' failed
jeff@DESKTOP-FUM4FMP:~/repos/buildtest/RocketMarket$

jeff@DESKTOP-FUM4FMP:~/repos/buildtest/RocketMarket$ export CONVEX_DEPLOY_KEY="prod:quirky-dachshund-147|01 . . . 4b"
jeff@DESKTOP-FUM4FMP:~/repos/buildtest/RocketMarket$ npx convex deploy --cmd 'npm run build' -v
⠋ Running 'npm run build' with environment variable "VITE_CONVEX_URL" set...

> manual-test@0.0.0 build
> tsc && vite build

✖ 'npm run build' failed
jeff@DESKTOP-FUM4FMP:~/repos/buildtest/RocketMarket$

ℹ️ Update: local build has more success if preceded by npm install, but also creates no static pages in dist/. Looks like it's a Vite or npm issue... Front-end pages:

jeff@DESKTOP-FUM4FMP:~/repos/buildtest/RocketMarket$ ll src/
total 84
drwxr-xr-x 6 jeff jeff 4096 Jan 10 22:41 ./
drwxr-xr-x 8 jeff jeff 4096 Jan 10 23:08 ../
drwxr-xr-x 2 jeff jeff 4096 Jan 10 22:41 Admin/
-rw-r--r-- 1 jeff jeff  398 Jan 10 22:41 Auth0Buttons.tsx
-rw-r--r-- 1 jeff jeff  211 Jan 10 22:41 AwaitingApproval.tsx
drwxr-xr-x 2 jeff jeff 4096 Jan 10 22:41 Buyer/
-rw-r--r-- 1 jeff jeff 1168 Jan 10 22:41 Countdown.tsx
-rw-r--r-- 1 jeff jeff  580 Jan 10 22:41 Footer.tsx
-rw-r--r-- 1 jeff jeff  352 Jan 10 22:41 GenericNavbar.tsx
-rw-r--r-- 1 jeff jeff 1167 Jan 10 22:41 Header.tsx
-rw-r--r-- 1 jeff jeff  152 Jan 10 22:41 Landing.tsx
-rw-r--r-- 1 jeff jeff 1305 Jan 10 22:41 PostLogin.tsx
-rw-r--r-- 1 jeff jeff  665 Jan 10 22:41 PostLogout.tsx
-rw-r--r-- 1 jeff jeff 5343 Jan 10 22:41 RegistrationForm.tsx
drwxr-xr-x 2 jeff jeff 4096 Jan 10 22:41 Supplier/
-rw-r--r-- 1 jeff jeff  197 Jan 10 22:41 Suspended.tsx
drwxr-xr-x 2 jeff jeff 4096 Jan 10 22:41 assets/
-rw-r--r-- 1 jeff jeff 1195 Jan 10 22:41 index.css
-rw-r--r-- 1 jeff jeff 3810 Jan 10 22:41 main.tsx
-rw-r--r-- 1 jeff jeff   38 Jan 10 22:41 vite-env.d.ts

jeff@DESKTOP-FUM4FMP:~/repos/buildtest/RocketMarket$ ll src/
total 84
drwxr-xr-x 6 jeff jeff 4096 Jan 10 22:41 ./
drwxr-xr-x 8 jeff jeff 4096 Jan 10 23:08 ../
drwxr-xr-x 2 jeff jeff 4096 Jan 10 22:41 Admin/
-rw-r--r-- 1 jeff jeff  398 Jan 10 22:41 Auth0Buttons.tsx
-rw-r--r-- 1 jeff jeff  211 Jan 10 22:41 AwaitingApproval.tsx
drwxr-xr-x 2 jeff jeff 4096 Jan 10 22:41 Buyer/
-rw-r--r-- 1 jeff jeff 1168 Jan 10 22:41 Countdown.tsx
-rw-r--r-- 1 jeff jeff  580 Jan 10 22:41 Footer.tsx
-rw-r--r-- 1 jeff jeff  352 Jan 10 22:41 GenericNavbar.tsx
-rw-r--r-- 1 jeff jeff 1167 Jan 10 22:41 Header.tsx
-rw-r--r-- 1 jeff jeff  152 Jan 10 22:41 Landing.tsx
-rw-r--r-- 1 jeff jeff 1305 Jan 10 22:41 PostLogin.tsx
-rw-r--r-- 1 jeff jeff  665 Jan 10 22:41 PostLogout.tsx
-rw-r--r-- 1 jeff jeff 5343 Jan 10 22:41 RegistrationForm.tsx
drwxr-xr-x 2 jeff jeff 4096 Jan 10 22:41 Supplier/
-rw-r--r-- 1 jeff jeff  197 Jan 10 22:41 Suspended.tsx
drwxr-xr-x 2 jeff jeff 4096 Jan 10 22:41 assets/
-rw-r--r-- 1 jeff jeff 1195 Jan 10 22:41 index.css
-rw-r--r-- 1 jeff jeff 3810 Jan 10 22:41 main.tsx
-rw-r--r-- 1 jeff jeff   38 Jan 10 22:41 vite-env.d.ts

dist/ after build:

jeff@DESKTOP-FUM4FMP:~/repos/buildtest/RocketMarket$ tree dist/
dist/
├── assets
│   ├── index-1b44bb0f.css
│   └── index-d68674be.js
├── index.html
└── vite.svg

1 directory, 4 files

jeff@DESKTOP-FUM4FMP:~/repos/buildtest/RocketMarket$ tree dist/
dist/
├── assets
│   ├── index-1b44bb0f.css
│   └── index-d68674be.js
├── index.html
└── vite.svg

1 directory, 4 files

[SOLVED] Turns out the whole app got compiled into one of those files, index-<*randomness*>.js. What was missing was a vercel.json file in the project root to tell it to route all requests (for all URL paths) to /index/html. Humbly suggesting this be added as one of the steps in the Vercel guide, with a note that this is required for SPAs. 😁

[SOLVED] Vercel deploy only creates index.html (+3 others)

Did you find this page helpful?