You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
35
-
36
-
```javascript
37
-
import { Hono } from"hono";
38
-
constapp=newHono();
39
-
40
-
app.get("/", (ctx) =>ctx.text("Hello world, this is Hono!!"));
41
-
42
-
exportdefaultapp;
43
-
```
44
-
45
-
To serve static files like CSS, image or JavaScript files, add the following to your `src/server.js/ts` file:
46
-
47
-
```javascript
48
-
app.get("/public/*", async (ctx) => {
49
-
returnawaitctx.env.ASSETS.fetch(ctx.req.raw);
50
-
});
51
-
```
52
-
53
-
This will cause all the files in the `public` folder within `dist` to be served in your application.
54
-
55
-
:::note
56
-
57
-
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.
58
-
59
-
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.
60
-
61
-
:::
62
-
63
-
Open your `package.json` file and update the `scripts` section:
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.
34
+
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.
98
35
99
36
## Run in local dev
100
37
101
-
Start your dev workflow by running:
38
+
Develop your app locally by running:
102
39
103
-
```sh
104
-
npm run dev
105
-
```
40
+
<PackageManagerstype="run"args={"dev"} />
106
41
107
42
You should be able to review your generated web application at `http://localhost:8788`.
description: Create a Hono application and deploy it to Cloudflare Workers with Workers Assets.
6
+
---
7
+
8
+
import {
9
+
Badge,
10
+
Description,
11
+
InlineBadge,
12
+
Render,
13
+
PackageManagers,
14
+
} from"~/components";
15
+
16
+
In this guide, you will create a new [Hono](https://hono.dev/) application and deploy to Cloudflare Workers (with the new [<InlineBadgepreset="beta" /> Workers Assets](/workers/static-assets/)).
17
+
18
+
## 1. Set up a new project
19
+
20
+
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.
21
+
22
+
To use `create-cloudflare` to create a new Hono project with <InlineBadgepreset="beta" /> Workers Assets, run the following command:
23
+
24
+
<PackageManagers
25
+
type="create"
26
+
pkg="cloudflare@latest my-hono-app"
27
+
args={"--framework=hono --platform=workers"}
28
+
/>
29
+
30
+
<Render
31
+
file="c3-post-run-steps"
32
+
product="workers"
33
+
params={{
34
+
category: "web-framework",
35
+
framework: "Hono",
36
+
}}
37
+
/>
38
+
39
+
After setting up your project, change your directory by running the following command:
40
+
41
+
```sh
42
+
cd my-hono-app
43
+
```
44
+
45
+
## 2. Develop locally
46
+
47
+
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.
48
+
49
+
<PackageManagerstype="run"args={"dev"} />
50
+
51
+
## 3. Deploy your project
52
+
53
+
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/).
54
+
55
+
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.
56
+
57
+
<PackageManagerstype="run"args={"deploy"} />
58
+
59
+
---
60
+
61
+
## Bindings
62
+
63
+
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.
64
+
65
+
## Static assets
66
+
67
+
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.
0 commit comments