Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@developit
Created September 5, 2019 00:30
Show Gist options
  • Star 14 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save developit/699c8d8f180a1e4eed58167f9c6711be to your computer and use it in GitHub Desktop.
Save developit/699c8d8f180a1e4eed58167f9c6711be to your computer and use it in GitHub Desktop.
const express = require('express');
const { html, Component } = require('htm/preact');
const renderToString = require('preact-render-to-string');
class App extends Component {
render(props) {
return html`
<div class="app">
<h1>This is an app</h1>
<p>Current server time: ${new Date + ''}</p>
</div>
`;
}
}
const app = express();
app.get('/', (request, response) => {
// render your app to an HTML string
const body = renderToString(html`<${App} url=${request.url} />`);
// wrap it in an HTML document and send it back
response.send(`<!DOCTYPE html><html><body>${body}</body></html>`);
});
{
"dependencies": {
"htm": "^2.2.1",
"preact": "^8.5.2",
"express": "^4.17.1"
}
}
@mxro
Copy link

mxro commented Dec 6, 2021

Doesn't this also need the dependency preact-render-to-string ?

Copy link

ghost commented Sep 24, 2022

great example!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment