Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Introduce experimental support for on-demand bundling via HTML imports and Bun.serve() #16395

Merged
merged 11 commits into from
Jan 15, 2025

Conversation

Jarred-Sumner
Copy link
Collaborator

@Jarred-Sumner Jarred-Sumner commented Jan 14, 2025

What does this PR do?

This adds a zero-configuration frontend production and frontend dev server to Bun.serve() behind the--experimental-html flag.

import hello from "./index.html";

Bun.serve({
  static: {
    "/": hello,
  },
  development: true,

  port: 3003,

  async fetch(req) {
    return new Response("Hello World: " + req.url);
  },
});

When navigating to /, it will bundle ./index.html, reading the <script> tags, bundling any JavaScript, CSS, and assets. Then, those assets get served automatically in Bun.serve(). When development: true is set, Bun.serve() will rebuild the assets on the next reload of the HTML, log on build error and print the build status on completion. When not set, Bun will minify the assets and only build lazily on the first request.

This is an extremely rough, simple version of this feature and it will get better soon. Keep in mind:

  • no hot reloading / watching yet, still need to wire that up
  • no bun build support yet, still need to wire that up. The plan there is it will do this build step statically, and return a manifest which can then also be used in Node or CF Workers or elsewhere

How did you verify your code works?

@robobun
Copy link

robobun commented Jan 14, 2025

Updated 10:20 PM PT - Jan 14th, 2025

@Jarred-Sumner, your commit 6e5b22f has 2 failures in #9625:


🧪   try this PR locally:

bunx bun-pr 16395

Copy link
Member

@paperclover paperclover left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fwiw tests are not a blocker for merging as this is an experimental feature. focus on figuring out how these HTML bundles will be configurable since the with { ... } argument is kind of lame.

other things i think about:

  • taking a directory tree of HTML files, since file system routing is optimal for generated pages
  • a way to have parts or the whole html file generated by javascript / easily SSR an initial app shell or use HTML bundler as a SSG.
    these two use cases should not be worked on yet, but just kept in mind as ways the HTML bundling api will expand over time.

@@ -35,43 +35,7 @@ namespace uWS {

template <class USERDATA>
struct HttpRouter {
/* These are public for now */
std::vector<std::string> upperCasedMethods = {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this reminded me that bun currently doesnt support exotic method strings like walawala, instead defaulting them to get. but this diff is just uws updating so it ok.

this.doWriteHeaders(resp);
}

const StaticRoute = @This();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: make this the first non-comment line. it makes it very obvious to a reader that the file is a struct for that name. not a big deal, one day i'll write a lint to force the ordering of import constants.

@Jarred-Sumner Jarred-Sumner merged commit 522f2b9 into main Jan 15, 2025
63 of 69 checks passed
@Jarred-Sumner Jarred-Sumner deleted the jarred/html-imports branch January 15, 2025 09:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants