{"id":16615941,"url":"https://github.com/pimterry/server-components-express","last_synced_at":"2025-10-06T16:32:10.280Z","repository":{"id":57372556,"uuid":"58546470","full_name":"pimterry/server-components-express","owner":"pimterry","description":":wrench: :coffee: Express integration plugin for Server Components","archived":false,"fork":false,"pushed_at":"2016-07-23T19:17:21.000Z","size":6,"stargazers_count":4,"open_issues_count":3,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-30T03:58:06.162Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pimterry.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-05-11T13:17:45.000Z","updated_at":"2022-01-03T00:58:48.000Z","dependencies_parsed_at":"2022-09-09T16:41:49.329Z","dependency_job_id":null,"html_url":"https://github.com/pimterry/server-components-express","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pimterry%2Fserver-components-express","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pimterry%2Fserver-components-express/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pimterry%2Fserver-components-express/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pimterry%2Fserver-components-express/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pimterry","download_url":"https://codeload.github.com/pimterry/server-components-express/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235534339,"owners_count":19005470,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-12T02:11:19.090Z","updated_at":"2025-10-06T16:32:04.982Z","avatar_url":"https://github.com/pimterry.png","language":"JavaScript","readme":"# Server Components Express  [![Travis Build Status](https://img.shields.io/travis/pimterry/server-components-express.svg)](https://travis-ci.org/pimterry/server-components-express)\nExpress integration plugin for [Server Components](http://pimterry.github.io/server-components)\n\n## What is this?\n\nThis is a helper for using Server Components with Express. It automatically handles serving static\ncontent for you, so you can just start installing and using server components and have all the content\nJust Work, without having to think about how it gets delivered. It provides some helper rendering\nmethods to make that even easier too.\n\n## Getting started\n\nA minimal setup:\n\n```javascript\nvar components = require(\"server-components\");\n\nvar express = require(\"express\");\nvar app = express();\n\n// Enable this plugin\napp.use(require(\"server-components-express\"));\n\n// Define some components\nvar DemoComponent = components.newElement();\nDemoComponent.createdCallback = function (document) {\n    this.innerHTML = \"Hello world\";\n};\ncomponents.registerElement(\"demo-component\", { prototype: DemoComponent });\n\n// Use response.renderPage(html) or response.renderFragment(html)\napp.get('/', (req, res) =\u003e res.renderPage(\"\u003cdemo-component\u003e\u003c/demo-component\u003e\"));\n\napp.listen(8080, () =\u003e console.log(\"Server ready at http://localhost:8080\"));\n```\n\nThis shows the basic setup, and requests to http://localhost:8080 subsequently will receive the rendered result:\n\n```html\n\u003chtml\u003e\n\u003chead\u003e\u003c/head\u003e\n\u003cbody\u003e\n    \u003cdemo-component\u003eHello world!\u003c/demo-component\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Serving static content\n\nThe key hidden feature server-components-express adds is effortless static content serving. Any components\nthat internally use [server-components-static](https://github.com/pimterry/server-components-static) to\ninclude static content will return URLs (by default) of the form\n`/components/my-component/images/cat-picture.jpg`. This plugin ensures those will automatically resolve\nand serve the correct files from within the corresponding component, without you having to copy those\nstatic files into your core codebase.\n\nFor example, if you install a component from NPM that includes `cat-picture.jpg` and an `index.js` like:\n\n```javascript\nvar components = require(\"server-components\");\n\nvar content = require(\"server-components-static\").forComponent(\"cat-component\");\ncontent.setPath(__dirname);\n\nvar CatComponent = components.newElement();\nCatComponent.createdCallback = function (document) {\n    var img = document.createElement(\"img\");\n    img.src = content.getUrl(\"cat-picture.jpg\");\n    this.appendChild(img);\n};\n\ncomponents.registerElement(\"cat-component\", { prototype: CatComponent });\n```\n\nYou can install this from NPM, require it, use it in your HTML with `\u003ccat-component\u003e\u003c/cat-component\u003e`, and\nit will immediately successfully render an image tag pointing to 'cat-picture.jpg', and resolve\nthe URL for that back to the correct file.\n\nEnabling server-components-express lets you ignore how serving of static content like CSS and images\nworks for any components you use. As long as they use server-components-static, everything will\nJust Work without any interaction.\n\n## API\n\n`expressApp.use(require(\"server-components-express\"));`\n\nRun this to add the static files handler and response helper methods to the given express application.\n\n`response.renderPage(htmlString)`\n\nThis will render the given HTML, identically to\n[components.renderPage(html)](https://github.com/pimterry/server-components#componentsrenderpagehtml),\nand serve the results back in the response.\n\nIf any errors occur, the errors will be passed to your configured error handler. By default, that means\nin development you'll get a stack trace in your console and in the body of a 500 response, and in\nproduction you'll get a 500 response with 'Service Unavailable' and no further details.\n\nThis method returns a promise. If you'd like to do something after the response has been sent, you can\nchain further actions. Note that errors in rendering are already caught and handed off to the standard\nexpress error handling functionality, so `catch()` clauses won't typically trigger.\n\n`response.renderFragment(htmlString)`\n\nThis will render the given HTML identically to [components.renderFragment(html)], and serve the results\nback in the response. It behaves the same as [response.renderPage(html)](https://github.com/pimterry/server-components-express#responserenderpagehtml) above.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpimterry%2Fserver-components-express","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpimterry%2Fserver-components-express","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpimterry%2Fserver-components-express/lists"}