Kerim H•4mo ago

Serving a deno vite-bundled react app with router

Hey all, I've been testing using vite with deno and it's been working quite nicely. Although all the examples throw it into a simple file server which doesn't really work when you've got routing done in the react app. From the docs: https://docs.deno.com/deploy/tutorials/vite I tried exploring using Hono to serve it after build, but I can only seem to get it to work if I manually set the rewrite paths. Was curious if anyone had any luck or a nice way of handling this?

3 Replies

Deno AI Helper•4mo ago

Hello! Serving a Vite-bundled React app with routing on Deno can indeed be a bit tricky, especially when it comes to handling client-side routing with a server that primarily serves static files. The documentation provides a guide on how to use Vite with Deno, but it doesn't go into detail about handling client-side routing specifically. However, when using a server like Hono to serve your Vite-bundled React app, you'll typically want to ensure that all navigation requests are redirected to your index.html file, which is the entry point for your React app. This allows React Router to handle the routing on the client side. Here's a general approach you can take, although this isn't explicitly covered in the documentation: 1. Serve static files normally. 2. For routes that are supposed to be handled by React Router, you'll need to configure the server to respond with index.html for any path that doesn't match a static file. In Hono, you might set up a catch-all route that serves index.html for any request that doesn't match a static file or API route. Here's a conceptual example:

import { Hono } from 'hono';
import { static } from 'hono/static';

const app = new Hono();

// Serve static files from the 'public' directory
app.use('/static/*', static({ root: './public' }));

// Your API routes here
// app.get('/api/some-route', (c) => { /* ... */ });

// Catch-all route for handling client-side routing
app.get('*', async (c) => {
  // You might want to check if the request is for a static file here
  // and serve it if it is. Otherwise, serve index.html.
  return await c.sendFile('./public/index.html');
});

app.listen();

import { Hono } from 'hono';
import { static } from 'hono/static';

const app = new Hono();

// Serve static files from the 'public' directory
app.use('/static/*', static({ root: './public' }));

// Your API routes here
// app.get('/api/some-route', (c) => { /* ... */ });

// Catch-all route for handling client-side routing
app.get('*', async (c) => {
  // You might want to check if the request is for a static file here
  // and serve it if it is. Otherwise, serve index.html.
  return await c.sendFile('./public/index.html');
});

app.listen();

In this example, any request that doesn't match a static file or an API route will fall through to the catch-all handler,

Deno AI Helper•4mo ago

which serves index.html. This allows your React app to boot up and take over routing on the client side. Remember that this is a general advice and not directly from the documentation. You might need to adjust the code to fit the specifics of your project and ensure that it works with Deno's permissions model. 🦕

Helpful Links: How to use React with Deno | Deno Docs Deno Docs Deno Docs The State of Web Frameworks on Deno Deno Docs Deno Docs Deno Docs You Don't Need a Build Step

Kerim H•4mo ago

That isn't an available method in Hono.