Hello world vercel tutorial

Hi,

I've been trying to find a Vercel "hello world" type tutorial but there doesn't seem to be one. The Getting Started docs basically branch into two directions – neither of which is useful to a beginner: select a template (there are 1000's of template and no way to know how to choose between them), or upload your own existing codebase (which isn't useful because I don't know what that should look like).

So I really am trying to just get a "hello world" deployment up and running; i.e. the simplest possible deployment to succeed. So far, no matter what I do, I just get a 404 error after deployment.

Any help?

Thanks for the feedback, ! Since Vercel deployments are based on project code, there's not really one specific path to follow for all projects. But I do have some recommendations to help get you started!

If you don't already have a project in mind, I would recommend looking at the Next.js Boilerplate template as an essentially "hello world" example. The Learn Next.js course is also great if you're not familiar with Next yet.

Our documentation includes some setup info for frequently used frameworks like Next.js, SvelteKit, Astro, and Nuxt. Many popular frontend frameworks also have their own documentation to help configure your project for serverless deployment with Vercel.

Please let me know if there's a specific framework you want to use. I'm happy to link more resources, but I don't want to write a wall of text and overwhelm you with all of the possibilities. 😄

Thanks for your kind reply.

I’m framework agnostic at this point. I’m just trying to get something, anything, deployed on Vercel. And I’ve tried various frameworks and can’t get any of it to work.

I tried a vanilla javascript app, deployed it via GitHub linkage on Vercel. Result: deployed but 404 NOT_FOUND I tried the same app deployed via Vercel CLI. Result: deployed but 404 NOT_FOUND I tried building a new app via hono / bun and deploying via Vercel CLI. Result: deployed but 404 NOT_FOUND I tried deploying just a single index.html file containing just

hello world

via GitHub. Result: deployed and “hello world”. Hooray!

Thus, so far, as far as I can tell, I’m only able to deploy single html pages, which isn’t terribly useful :)

Here’s the hono preview: https://actor-studio-openai-cr1va5hpn-geoidesics-projects.vercel.app

If I run that code locally using bun dev it shows up on https://localhost:3000

But if I deploy that I get a 404.

I suspect I’m misunderstanding something fundamental about what Vercel does.

What am I missing?

So I ended up using this: https://github.com/vercel/hono-starter/blob/main/vercel.json And was able to deploy that successfully. I still don't understand why this works while the others didn't but at least that's progress.

My suggestion for the documentation is that this: https://vercel.com/docs/getting-started-with-vercel/projects-deployments does not qualify as a tutorial. When the only options are "use a template" (i.e. someone else has made this, just use it) and "Import existing project" (which we won't tell you how to build), that does not qualify as a tutorial.

A tutorial should show you how to build a "hollo world" simplest implementation from the ground up, using vanilla code for the most popular languages – e.g. JavaScript, Python, PHP

I'm glad you got it working with the Hono starter! And I really appreciate you sharing this feedback.

It sounds like the Import an existing project steps would have been more useful for you if they included specific instructions for how to configure a project. Is there anything else that you think would be helpful to include for someone new to Vercel?

Yes, I see a lot of example code that has no context. For example, the code samples here: https://vercel.com/docs/functions/runtimes/node-js it's not clear which framework this would / wouldn't work for. E.g. for Hono, the requests don't look like that, so it's hard to know what to take away from the examples.

I find it very difficult to figure out what's going wrong and how to fix it. So far (as a developer who's been in the game for 20+ years) I find it weird that Vercel has a reputation for being easier to deploy to than one's average VPS. I certainly haven't found it that way. I mean yes, it's easy and simple once it's working. BUT, while a VPS is always complex, at least you have logs and full access to everything that's happening so you have a trail to follow to figure out what's going wrong.

E.g. I tried to implement https://hono.dev/docs/middleware/builtin/bearer-auth but got a cryptic message from vercel: ReferenceError: crypto is not defined, which gives me absolutely nothing to go on for debugging what the problem is. One can only presume that it's a node_modules problem, but doing e.g. bun add crypto doesn't solve the problem. So how does one troubleshoot / debug something like this where it's just not a normal operating environment?

Any feedback on this error please? ReferenceError: crypto is not defined, Here's the full console log:

1% vercel dev2Vercel CLI 37.6.03> Ready! Available at http://localhost:30004ReferenceError: crypto is not defined5    at createHash (file:///Users/me/myapp/node_modules/hono/dist/utils/crypto.js:36:3)6    at sha256 (file:///Users/me/myapp/node_modules/hono/dist/utils/crypto.js:4:22)7    at timingSafeEqual (file:///Users/me/myapp/node_modules/hono/dist/utils/buffer.js:24:20)8    at bearerAuth2 (file:///Users/me/myapp/node_modules/hono/dist/middleware/bearer-auth/index.js:44:25)9    at dispatch (file:///Users/me/myapp/node_modules/hono/dist/compose.js:29:23)10    at file:///Users/me/myapp/node_modules/hono/dist/compose.js:30:2011    at cors2 (file:///Users/me/myapp/node_modules/hono/dist/middleware/cors/index.js:65:11)12    at dispatch (file:///Users/me/myapp/node_modules/hono/dist/compose.js:29:23)

vercel.json

1{2  "rewrites": [3    {4      "source": "/api/(.*)",5      "destination": "/api"6    }7  ],8  "redirects": [9    { "source": "/", "destination": "/api", "permanent": false }10  ]11}

package.json

1{2  "type": "module",3  "engines": {4    "node": "20.x"5  },6  "scripts": {7    "start": "vercel dev",8    "deploy": "vercel"9  },10  "dependencies": {11    "@ai-sdk/openai": "^0.0.58",12    "@hono/node-server": "^1.12.2",13    "ai": "^3.3.34",14    "axios": "^1.7.7",15    "hono": "^4.4.2",16    "openai": "^4.59.0",17    "zod": "^3.23.8"18  },19  "devDependencies": {20    "vercel": "^32.4.1"21  }22}23

Here's the main script entry serverless index.js:

1import { Hono } from 'hono'2import { cors } from 'hono/cors'3import { handle } from 'hono/vercel'4import { myName } from '../utils/name.js'5import { setupLicenseRoutes } from './routes/licenseRoutes.js'6import { setupAIRoutes } from './routes/aiRoutes.js'78const app = new Hono().basePath('/api')910// Apply CORS middleware to all routes11app.use(12  '*',13  cors({14    origin: ['http://localhost:30001'],15    allowMethods: ['POST', 'GET', 'OPTIONS'],16    allowHeaders: ['Content-Type', 'Authorization'],17  })18);192021app.get('/', (c) => {22  return c.json({ message: `Congrats, ${ myName }! You've deployed Hono to Vercel` })23})2425setupLicenseRoutes(app);26setupAIRoutes(app);27const handler = handle(app);2829export const GET = handler;30export const POST = handler;31export const PATCH = handler;32export const PUT = handler;33export const OPTIONS = handler;

This seems related but for a different template. It suggests that this should not be an issue for the version of node I'm using... but it is: https://github.com/vercel/next.js/issues/46852

I looked at the hono starter: and it said to use:

1npm install2npm run start

... instead of vercel dev. This made the above error go away but then I'm into problematic territory where CORS will prevent the app from working because the dev server is using http and browsers no longer allow CORS to work unless over https.

So how exactly is one supposed to use the local environment?

Here's the error...

1ccess to fetch at 'http://localhost:3000/api/generateName' from origin 'http://localhost:30001' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.2index.js:13 3        4        5       POST http://localhost:3000/api/generateName net::ERR_FAILED6generateName @ index.js:137generateName @ Footer.svelte:368(anonymous) @ Footer.svelte:2039index.js:13 10        11        12       13        14       Uncaught (in promise) TypeError: Failed to fetch15    at OpenAI.generateName (index.js:13:28)16    at Array.generateName (Footer.svelte:36:31)17    at HTMLDivElement.<anonymous> (Footer.svelte:203:400)

Sorry for the delay. I just tested again today with a fresh copy of the Hono template using Node v20 and Vercel CLI v37.12.0 but did not get the crypto error. I hope it's working for you now as well!

Hey, Geoidesic. Just wanted to let you know we shipped support for zero-configuration Hono deployments to Vercel today.

More info here: https://community.vercel.com/t/introducing-zero-configuration-hono-backends/17619

Hi,