anand248 Comments - Answer Overflow

anand248

Explore posts from servers

•Created by anand248 on 10/15/2024 in #help

Vite plugin does not compile the commonjs module

module is not defined at eval (/Users/sutikshandubey/invoice001/web-360/node_modules/@babel/runtime/helpers/typeof.js:12:1) at instantiateModule (file:///Users/sutikshandubey/invoice001/web-360/node_modules/vite/dist/node/chunks/dep-Cyk9bIUq.js:52961:11 Click outside, press Esc key, or fix the code to dismiss. You can also disable this overlay by setting server.hmr.overlay to false in vite.config.ts.

3 replies

HHono

•Created by anand248 on 10/15/2024 in #help

Vite plugin does not compile the commonjs module

the library I am trying to use is jspdf

3 replies

CDCloudflare Developers

•Created by ENSainETY on 10/11/2024 in #workers-help

Save Files Generated in Pages App

after writing the file to bucket I generated a url and saved it in my DB That URL endpoint points to my own hono endpoint GET request, which downlods the file from R2, and returns to browser, Some indicative code

const uploadLogo = async (c: Context, logo: File): Promise<string> => {
  const fileName = `${c.var.user.id}-${Date.now()}.${logo.name.split('.').pop()}`;
  const r2 = c.env.ORG_BUCKET;
  await r2.put(fileName, await logo.arrayBuffer());
  return `${c.env.BASE_URL}/user/organization/file/${fileName}`;
};

const uploadLogo = async (c: Context, logo: File): Promise<string> => {
  const fileName = `${c.var.user.id}-${Date.now()}.${logo.name.split('.').pop()}`;
  const r2 = c.env.ORG_BUCKET;
  await r2.put(fileName, await logo.arrayBuffer());
  return `${c.env.BASE_URL}/user/organization/file/${fileName}`;
};

And GET endpoint code where the above url points to

import { createRoute } from "honox/factory";

import { HTTPException } from "hono/http-exception";

// Gets the id of the file from url parameters, then fetches the file from R2 and streams it to the client
export default createRoute(async (c) => {
  const id = c.req.param("id");
  const r2 = c.env.ORG_BUCKET;
  const file = await r2.get(id);

  if (!file) {
    throw new HTTPException(404, { message: 'File not found' });
  }

  const headers = new Headers();
  file.writeHttpMetadata(headers);
  headers.set("etag", file.httpEtag);

  // Set the appropriate content type
  headers.set("Content-Type", file.httpMetadata?.contentType ?? "application/octet-stream");

  // Stream the file body
  return new Response(file.body, {
    headers: headers,
    status: 200
  });
});

import { createRoute } from "honox/factory";

import { HTTPException } from "hono/http-exception";

// Gets the id of the file from url parameters, then fetches the file from R2 and streams it to the client
export default createRoute(async (c) => {
  const id = c.req.param("id");
  const r2 = c.env.ORG_BUCKET;
  const file = await r2.get(id);

  if (!file) {
    throw new HTTPException(404, { message: 'File not found' });
  }

  const headers = new Headers();
  file.writeHttpMetadata(headers);
  headers.set("etag", file.httpEtag);

  // Set the appropriate content type
  headers.set("Content-Type", file.httpMetadata?.contentType ?? "application/octet-stream");

  // Stream the file body
  return new Response(file.body, {
    headers: headers,
    status: 200
  });
});

2 replies

CDCloudflare Developers

•Created by anand248 on 10/12/2024 in #workers-help

I am trying to add a new binding for R2 after deploying my application on cloudflare in wrangler.tom

Found the solution, logs helped me - "env.production" environment configuration - "r2_buckets" exists at the top level, but not on "env.production". This is not what you probably want, since "r2_buckets" is not inherited by environments. Please add "r2_buckets" to "env.production".

2 replies

HHono

•Created by anand248 on 10/9/2024 in #help

honox - not returning anything from POST, gives 404.

If POST implementation does not return anything, then endpoint gives 404 error, which is misleading.

3 replies

HHono

•Created by anand248 on 10/6/2024 in #help

Nested form objects POST

Server side code was

export const invoiceFormSchema = z.object({
  invoiceHeader: invoiceSchema,
  items: z.array(invoiceDetailsSchema),
});

export const POST = createRoute(zValidator("form", invoiceFormSchema), async (c) => {
    const data = c.req.valid("form");
...

export const invoiceFormSchema = z.object({
  invoiceHeader: invoiceSchema,
  items: z.array(invoiceDetailsSchema),
});

export const POST = createRoute(zValidator("form", invoiceFormSchema), async (c) => {
    const data = c.req.valid("form");
...

It was failing the zod validation saying no nested object present. I googled more and found that this is where the world abondons the HTML form post https://www.reddit.com/r/webdev/comments/ug13uc/how_can_i_make_post_request_with_nested_form_data/ I also went back to usual way of start sending body as application/json and start calling the server POST manually with fetch.

4 replies

CDCloudflare Developers

•Created by anand248 on 9/29/2024 in #pages-help

Developing a new application using template - https://github.com/yusukebe/cloudflare-d1-drizzle-hono

i was missing preview_database_id = "LOCAL-INVOICE-DB" # Required for Pages local development , in my .toml, I am able to do npx wrangler pages dev locally which avoids me using vite.

3 replies

CDCloudflare Developers

•Created by anand248 on 9/29/2024 in #pages-help

Developing a new application using template - https://github.com/yusukebe/cloudflare-d1-drizzle-hono

I guess, if i can manage to run my D1/Honox app locally using npx wrangler pages dev , I will be closer to cloud env of cloudflare. But it fails with below error ✘ [ERROR] Cannot read properties of undefined (reading 'prepare') [wrangler:inf] POST /login 500 Internal Server Error (10ms)

3 replies

CDCloudflare Developers

•Created by anand248 on 9/26/2024 in #pages-help

daisy ui styles not applying on cloudflare built deployment

Solved this problem by adding Daisy UI css CDN on renderer of honox.

2 replies

Gaming

Programming