Hono•12mo ago

Honox scripts and styles not working in production

Hi Guys,
Am currently trying to deploy a honox project in Deno deploy. The project is working well in the local machine but when deployed the islands and styles are not working. It might be a path issue but am unsure on how to proceed.

_renderer.tsx

import { jsxRenderer } from "hono/jsx-renderer";
import { Link, Script } from "honox/server";

export default jsxRenderer(({ children, title }) => {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>{title}</title>
        <link rel="icon" href="/favicon.ico" />
        <Link rel="stylesheet" href="/app/site.css" />
        <Script src="/app/client.ts" async />
      </head>
      <body>{children}</body>
    </html>
  );
});

import { jsxRenderer } from "hono/jsx-renderer";
import { Link, Script } from "honox/server";

export default jsxRenderer(({ children, title }) => {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>{title}</title>
        <link rel="icon" href="/favicon.ico" />
        <Link rel="stylesheet" href="/app/site.css" />
        <Script src="/app/client.ts" async />
      </head>
      <body>{children}</body>
    </html>
  );
});

Vite config.

import deno from "@deno/vite-plugin";
import build from "@hono/vite-build/deno";
import adapter from "@hono/vite-dev-server/node";
import honox from "honox/vite";
import { defineConfig } from "vite";

export default defineConfig({
  cacheDir: "node_modules/.vite",
  esbuild: {
    jsx: "automatic",
    jsxImportSource: "hono/jsx",
  },
  plugins: [
    deno(),
    honox({
      devServer: { adapter },
      client: { input: ["/app/site.css"] },
    }),
    build({staticRoot: "dist"}),
  ],
});

import deno from "@deno/vite-plugin";
import build from "@hono/vite-build/deno";
import adapter from "@hono/vite-dev-server/node";
import honox from "honox/vite";
import { defineConfig } from "vite";

export default defineConfig({
  cacheDir: "node_modules/.vite",
  esbuild: {
    jsx: "automatic",
    jsxImportSource: "hono/jsx",
  },
  plugins: [
    deno(),
    honox({
      devServer: { adapter },
      client: { input: ["/app/site.css"] },
    }),
    build({staticRoot: "dist"}),
  ],
});

Looking at the dist folder I see that there is no manifest.json file produced.
Any ideas on what may be wrong ?

Hono•12mo ago

bamato

Honox scripts and styles not working in production

import { jsxRenderer } from "hono/jsx-renderer";
import { Link, Script } from "honox/server";

export default jsxRenderer(({ children, title }) => {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>{title}</title>
        <link rel="icon" href="/favicon.ico" />
        <Link rel="stylesheet" href="/app/site.css" />
        <Script src="/app/client.ts" async />
      </head>
      <body>{children}</body>
    </html>
  );
});

import { jsxRenderer } from "hono/jsx-renderer";
import { Link, Script } from "honox/server";

export default jsxRenderer(({ children, title }) => {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>{title}</title>
        <link rel="icon" href="/favicon.ico" />
        <Link rel="stylesheet" href="/app/site.css" />
        <Script src="/app/client.ts" async />
      </head>
      <body>{children}</body>
    </html>
  );
});

Vite config.

import deno from "@deno/vite-plugin";
import build from "@hono/vite-build/deno";
import adapter from "@hono/vite-dev-server/node";
import honox from "honox/vite";
import { defineConfig } from "vite";

export default defineConfig({
  cacheDir: "node_modules/.vite",
  esbuild: {
    jsx: "automatic",
    jsxImportSource: "hono/jsx",
  },
  plugins: [
    deno(),
    honox({
      devServer: { adapter },
      client: { input: ["/app/site.css"] },
    }),
    build({staticRoot: "dist"}),
  ],
});

import deno from "@deno/vite-plugin";
import build from "@hono/vite-build/deno";
import adapter from "@hono/vite-dev-server/node";
import honox from "honox/vite";
import { defineConfig } from "vite";

export default defineConfig({
  cacheDir: "node_modules/.vite",
  esbuild: {
    jsx: "automatic",
    jsxImportSource: "hono/jsx",
  },
  plugins: [
    deno(),
    honox({
      devServer: { adapter },
      client: { input: ["/app/site.css"] },
    }),
    build({staticRoot: "dist"}),
  ],
});

Looking at the dist folder I see that there is no manifest.json file produced.
Any ideas on what may be wrong ?

Honox scripts and styles not working in production

Similar Threads

Honox scripts and styles not working in production

Similar Threads

Similar Threads

Similar Threads