{"id":21626476,"url":"https://github.com/qodesmith/vite-vercel-example","last_synced_at":"2026-04-05T21:03:17.499Z","repository":{"id":60778865,"uuid":"542055232","full_name":"qodesmith/vite-vercel-example","owner":"qodesmith","description":null,"archived":false,"fork":false,"pushed_at":"2022-10-20T00:08:54.000Z","size":120,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-24T07:01:23.109Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"vite-vercel-example-sqn5.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/qodesmith.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-09-27T11:44:10.000Z","updated_at":"2022-09-27T11:45:11.000Z","dependencies_parsed_at":"2023-01-20T05:15:23.540Z","dependency_job_id":null,"html_url":"https://github.com/qodesmith/vite-vercel-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/qodesmith/vite-vercel-example","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qodesmith%2Fvite-vercel-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qodesmith%2Fvite-vercel-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qodesmith%2Fvite-vercel-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qodesmith%2Fvite-vercel-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/qodesmith","download_url":"https://codeload.github.com/qodesmith/vite-vercel-example/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qodesmith%2Fvite-vercel-example/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28132992,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-12-30T02:00:05.476Z","response_time":64,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-25T01:13:28.043Z","updated_at":"2025-12-30T22:06:51.268Z","avatar_url":"https://github.com/qodesmith.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Notes\n\n## Conflicting File Names\n\n### Scenario 1 - json \u0026 ts\n\nFiles existing:\n\n- `/api/users.json`\n- `/api/users.ts`\n\nBuild error received:\n\n```\nError: Two or more files have conflicting paths or names. Please make sure path segments and filenames, without their extension, are unique. The path \"api/users.ts\" has conflicts with \"api/users.json\".\n```\n\n### Scenario 2 - duplicate entrypoints\n\nFiles existing:\n\n- `/api/users.ts`\n- `/api/users/index.ts`\n\nIndividuall, both files would successfully respond to `fetch(/api/users)`. When both files are in the filesystem, Vercel prioritizes `/api/users.ts` and ignores the other one.\n\n## Same File \u0026 Folder Name\n\nFile - `/api/users.ts`\nFile in folder - `/api/users/[id].ts`\n\nAccording to the [Vercel docs](https://vercel.com/docs/concepts/functions/serverless-functions#path-segments):\n\n\u003e When using path segments, the value passed is made available to the `req.query` object under the key used for the file name.\n\nVercel is able to hit both files accordingly. There are no conflicts:\n\n```javascript\nfetch('/api/users')\nfetch('/api/users/1')\n```\n\n## Node Version\n\nAs of 9/23/2022, Vercel is using Node 16.x. Using the `engines` field in `package.json` to specify a higher version does not work:\n\n```json\n\"engines\": {\n  \"node\": \"\u003e=18.6.0\"\n}\n```\n\nThe error thrown in the build:\n\n```\nWarning: Due to \"engines\": { \"node\": \"\u003e=18.6.0\" } in your `package.json` file, the Node.js Version defined in your Project Settings (\"16.x\") will not apply. Learn More: http://vercel.link/node-version\n\nError: Found invalid Node.js Version: \"\u003e=18.6.0\". Please set \"engines\": { \"node\": \"16.x\" } in your `package.json` file to use Node.js 16.\n\nLearn More: http://vercel.link/node-version\n```\n\nNot sure if this means we can't import native Node modules with the `node:` prefix.\n\n## Accesing `usersData.json`\n\nTrying to fetch this file failed with a `404`:\n\n- `fetch('/api/usersData.json').then(res =\u003e res.text()).then(console.log)`\n- `fetch('/api/usersData').then(res =\u003e res.text()).then(console.log)`\n\n## Serverless Functions - `import` vs `require`\n\nWhen deploying a Vite app on Vercel and utilizing the `/api` directory for a back end with Serverless Functions, _Node_ modules need to be imported via `require`, not `import`. The `import` syntax works for types and _local_ modules. See [this answer](https://github.com/vercel/community/discussions/893#discussioncomment-3756470) (and conversation) in Vercel's community discussions.\n\n## Non-Endpoint Files In `/api`\n\nFile: `/api/helpers.ts`\n\nCode used:\n\n```javascript\nfetch('/api/helpers')\n  .then(res =\u003e res.text())\n  .then(console.log)\n  .catch(e =\u003e console.log('catch:', e))\n```\n\nAfter a few seconds, this resulted in a [502](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/502) error:\n\n```\nGET https://vite-vercel-example-sqn5.vercel.app/api/helpers 502\nAn error occurred with this application.\n\nNO_RESPONSE_FROM_FUNCTION\n```\n\nPurposely trying to access a file that doesn't exist (`/api/helperz` - \"z\") correctly results in a 404.\n\n## Query Params\n\nWhen using dynamic routes, the dynamic information is populated on `req.query`. I had wondered if this would collide with regular url query params. _TL;DR - Vercel's dynamic route information takes precedence._\n\nRoute file - `/api/users/[id].ts`\n\n- This will populate `req.query.id`\n\nExample URL's and the resulting `req.query`:\n\n| URL                            | req.query                   |\n| ------------------------------ | --------------------------- |\n| /api/users/4                   | `{id: '4'}`                 |\n| /api/users/4?hello=world       | `{id: '4', hello: 'world'}` |\n| /api/users/4?hello=world\u0026id=55 | `{id: '4', hello: 'world'}` |\n\n## Assets - `/public` vs `/assets`\n\nBoth these directories serve static assets, so what's the difference? From what the [Vite docs](https://vitejs.dev/guide/assets.html) say, here's what I understand:\n\n| `/assets`                                    | `/public`                                                        |\n| -------------------------------------------- | ---------------------------------------------------------------- |\n| Consumed in code via the `import` statement. | No `import` statement - consume from the root like `/asset.jpg`. |\n| Will a get hashed file name at build time.   | Name remains unchanged.                                          |\n\n## Caching Static Assets\n\nI noticed a flash around the 3 logos, indicating some logos were loading before others. When throttling the speed down to slow 3G in Chrome devtools, the Vite logo was taking some time.\n\nAdding a `vercel.json` with [headers](https://vercel.com/docs/project-configuration#project-configuration/headers) for caching showed that the Vite logo loaded instantly on the next refresh. The Vercel logo was slow too, so after adding _that_ file to the config for caching it also loaded immediately.\n\nSince it's not possible to cache assets in the `/assets` directory by name because of hash changes, I was able to target the React svg by caching _all_ svgs with these settings:\n\n```json\n{\n  \"headers\": [\n    {\n      \"source\": \"/(.*).svg\",\n      \"headers\": [\n        {\n          \"key\": \"Cache-Control\",\n          \"value\": \"max-age=604800, must-revalidate, public\"\n        }\n      ]\n    }\n  ]\n}\n```\n\n## SPA\n\nSingle Page Applications let the front end do all the routing. This has a potential to conflict with the `/api` directory used for back end serverless functions. To account for this, we need to supply a `rewrites` setting in `vercel.json`:\n\n```json\n{\n  \"trailingSlash\": false,\n  \"rewrites\": [\n    {\n      \"source\": \"/((?!api/.*).*)\",\n      \"destination\": \"/\"\n    }\n  ]\n}\n```\n\nThanks to [this Stack Overflow solution](https://stackoverflow.com/a/66940777/2525633).\n\n## Catch All vs Optional Catch All Routes\n\n- `/api/[...catchAll].ts`\n  - The `catchAll` route will _not_ respond to requests at `/api` - you will get 404's.\n- `/api/[[...optionalCatchAll]].ts`\n  - The `optionalCatchAll` route _will_ respond to requests at the directory the file is located in (i.e. `/api`).\n  - The value of `req.query` will be `undefined` when accessing `/api`.\n  - See https://youtu.be/Y8HJCfWRMTE?t=211.\n\n### Only Available For Next.js\n\nThese features are _only_ available when using Next.js - see [this discussion](https://github.com/orgs/vercel/discussions/947#discussioncomment-3872755). Using `[...catchAll]` and `[[...optionalCatchAll]]` routes in Vercel's `/api` directory in a non-Next.js app is **not supported**. However, `[dynamicRoutes]` are supported. It's interesting because at the end of the day, it's all running on Vercel's infrastructure anyway 🤷‍♂️.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqodesmith%2Fvite-vercel-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fqodesmith%2Fvite-vercel-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqodesmith%2Fvite-vercel-example/lists"}