diff --git a/src/content/docs/pages/framework-guides/deploy-a-hono-site.mdx b/src/content/docs/pages/framework-guides/deploy-a-hono-site.mdx index d4e42df389bd42f..b60ef050ac26a70 100644 --- a/src/content/docs/pages/framework-guides/deploy-a-hono-site.mdx +++ b/src/content/docs/pages/framework-guides/deploy-a-hono-site.mdx @@ -12,7 +12,7 @@ import { TabItem, Tabs, PackageManagers, - Stream, + Stream, } from "~/components"; [Hono](https://honojs.dev/) is a small, simple, and ultrafast web framework for Cloudflare Pages and Workers, Deno, and Bun. Learn more about the creation of Hono by [watching an interview](#creator-interview) with its creator, [Yusuke Wada](https://yusu.ke/). @@ -28,81 +28,16 @@ To use `create-cloudflare` to create a new Hono project, run the following comma -Open your project and create a `src/server.js` file (or `src/server.ts` if you are using TypeScript). Add the following content to your file: - -```javascript -import { Hono } from "hono"; -const app = new Hono(); - -app.get("/", (ctx) => ctx.text("Hello world, this is Hono!!")); - -export default app; -``` - -To serve static files like CSS, image or JavaScript files, add the following to your `src/server.js/ts` file: - -```javascript -app.get("/public/*", async (ctx) => { - return await ctx.env.ASSETS.fetch(ctx.req.raw); -}); -``` - -This will cause all the files in the `public` folder within `dist` to be served in your application. - -:::note - -The `dist` directory is created and used during the bundling process. You will need to create a `public` directory in the `dist` directory. Having `public` inside `dist` is not generally wanted as `dist` is not a directory to commit to your repository whilst `public` is. - -There are different alternatives to fix this issue. For example, you can configure your `.gitignore` file to include the `dist` directory, but ignore all its context except the `public` directory. Alternatively, you can create a `public` directory somewhere else and copy it inside `dist` as part of the bundling process. - -::: - -Open your `package.json` file and update the `scripts` section: - - - -```json - "scripts": { - "dev": "run-p dev:*", - "dev:wrangler": "wrangler pages dev dist --live-reload", - "dev:esbuild": "esbuild --bundle src/server.js --format=esm --watch --outfile=dist/_worker.js", - "build": "esbuild --bundle src/server.js --format=esm --outfile=dist/_worker.js", - "deploy": "wrangler pages deploy dist" - }, -``` - - - -```json - "scripts": { - "dev": "run-p dev:*", - "dev:wrangler": "wrangler pages dev dist --live-reload", - "dev:esbuild": "esbuild --bundle src/server.ts --format=esm --watch --outfile=dist/_worker.js", - "build": "esbuild --bundle src/server.ts --format=esm --outfile=dist/_worker.js", - "deploy": "wrangler pages deploy dist" - }, -``` - - - -Then, run the following command. - -```sh -npm install npm-run-all --save-dev -``` - -Installing `npm-run-all` enables you to use a single command (`npm run dev`) to run `npm run dev:wrangler` and `npm run dev:esbuild` simultaneously in watch mode. +In your new Hono project, you will find a `public/static` directory for your static files, and a `src/index.ts` file which is the entrypoint for your server-side code. ## Run in local dev -Start your dev workflow by running: +Develop your app locally by running: -```sh -npm run dev -``` + You should be able to review your generated web application at `http://localhost:8788`. @@ -161,4 +96,8 @@ For demo applications using Hono and Cloudflare Pages, refer to the following re ### Creator Interview - \ No newline at end of file + diff --git a/src/content/docs/workers/frameworks/framework-guides/hono.mdx b/src/content/docs/workers/frameworks/framework-guides/hono.mdx new file mode 100644 index 000000000000000..da2858333086e59 --- /dev/null +++ b/src/content/docs/workers/frameworks/framework-guides/hono.mdx @@ -0,0 +1,69 @@ +--- +pcx_content_type: how-to +title: Hono +head: [] +description: Create a Hono application and deploy it to Cloudflare Workers with Workers Assets. +--- + +import { + Badge, + Description, + InlineBadge, + Render, + PackageManagers, +} from "~/components"; + +In this guide, you will create a new [Hono](https://hono.dev/) application and deploy to Cloudflare Workers (with the new [ Workers Assets](/workers/static-assets/)). + +## 1. Set up a new project + +Use the [`create-cloudflare`](https://www.npmjs.com/package/create-cloudflare) CLI (C3) to set up a new project. C3 will create a new project directory, use code from the official Hono template, and provide the option to deploy instantly. + +To use `create-cloudflare` to create a new Hono project with Workers Assets, run the following command: + + + + + +After setting up your project, change your directory by running the following command: + +```sh +cd my-hono-app +``` + +## 2. Develop locally + +After you have created your project, run the following command in the project directory to start a local server. This will allow you to preview your project locally during development. + + + +## 3. Deploy your project + +Your project can be deployed to a `*.workers.dev` subdomain or a [Custom Domain](/workers/configuration/routing/custom-domains/), from your own machine or from any CI/CD system, including [Cloudflare's own](/workers/ci-cd/builds/). + +The following command will build and deploy your project. If you are using CI, ensure you update your ["deploy command"](/workers/ci-cd/builds/configuration/#build-settings) configuration appropriately. + + + +--- + +## Bindings + +Your Hono application can be fully integrated with the Cloudflare Developer Platform, in both local development and in production, by using product bindings. The [Hono documentation](https://hono.dev/docs/getting-started/cloudflare-workers#bindings) provides information about configuring bindings and how you can access them. + +## Static assets + +You can serve static assets in your Hono application by [placing them in the `./public/` directory](https://hono.dev/docs/getting-started/cloudflare-workers#serve-static-files). This can be useful for resource files such as images, stylesheets, fonts, and manifests. + +