Skip to content

A demo app showing server-first web components with DSD, HTMX, and Islands.

License

Notifications You must be signed in to change notification settings

EisenbergEffect/server-first-web-components

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

37 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Server-first Web Components with DSD, HTMX, and Islands

A demo leveraging common server rendering approaches to enable rendering web components on the server, rather than on the client. This approach enables encapsulating HTML and CSS for each view, declaratively applying common behaviors to views via HTMX, and leveraging browser standards to add custom JavaScript islands as needed to any part of the UI.

To learn more about Web Components, please consider purchasing my Web Component Engineering course. 13 modules, 170+ videos, and an interactive learning app guide you through DOM APIs, Web Components, modular CSS, accessibility, forms, design systems, tools, and more. Purchasing the course helps support my writing, web standards work, and open source.

For group discounts, please reach out to sales@bluespire.com.

Machine Setup

  1. Download and install Node.js LTS v20.16.0 or higher.

Repo Setup

  1. On the command line, execute npm i to install dependencies.

Running the App

  1. On the command line, execute npm run server to run the web server.
  2. Visit http://localhost:3000/ in a browser to view the app.

Dependencies

Server

Important

While this demo uses Node.js, Express, and Handlebars, nearly every major web server/framework today supports the concepts of views, partials, helpers, and request/execution context, that are used to make this approach to web development possible. As a result, pretty much everything shown here should translate in a straightforward way to other platforms like .NET, Ruby, Java, etc.

Client

Data

The data used in this demo was adapted from SWAPI.

About

A demo app showing server-first web components with DSD, HTMX, and Islands.

Resources

License

Stars

Watchers

Forks