https://github.com/markcellus/html-express-js
Render native HTML in Express middleware using JavaScript
https://github.com/markcellus/html-express-js
Last synced: 8 months ago
JSON representation
Render native HTML in Express middleware using JavaScript
- Host: GitHub
- URL: https://github.com/markcellus/html-express-js
- Owner: markcellus
- License: mit
- Created: 2022-06-14T15:56:54.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2025-01-01T10:25:40.000Z (over 1 year ago)
- Last Synced: 2025-01-31T18:56:45.799Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 1.38 MB
- Stars: 18
- Watchers: 0
- Forks: 4
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# html-express-js
## Features
- Serves HTML documents using template literals
- Supports includes in HTML documents
- Allows shared global state throughout templates
## Installation
```
npm install html-express-js
```
## Basic Usage
The following is a high level example of how the package can be used as an Express template engine. See [example](/example) directory for all details of a working implementation.
Set up your Express app to use this engine:
```js
import htmlExpress, { renderView } from 'html-express-js';
const app = express();
const __dirname = resolve();
const viewsDir = `${__dirname}/public`;
const { engine, staticIndexHandler } = htmlExpress({
viewsDir, // root views directory to serve all index.js files
includesDir: `${viewsDir}/includes`, // OPTIONAL: where all includes reside
notFoundView: '404/index', // OPTIONAL: relative to viewsDir above
});
// set up engine
app.engine('js', engine);
// use engine
app.set('view engine', 'js');
// set directory where all index.js pages are served
app.set('views', viewsDir);
// render HTML in public/homepage.js with data
app.get('/', function (req, res, next) {
renderView('homepage', req, res, {
title: 'Awesome Homepage',
name: 'Bob',
});
});
// OPTIONALLY: route all GET requests to directories
// to their associated static index.js views in the public directory
// and, if not found, route to the 404/index.js view
app.use(staticIndexHandler());
```
Then you can create the associated files:
```js
// public/includes/head.js
import { html } from 'html-express-js';
export const view = () => html`
`;
```
```js
// public/homepage.js
import { html } from 'html-express-js';
export const view = (data, state) => html`
${state.includes.head}
${data.title}
This is the homepage for ${data.name}
`;
```
## Advanced usage
### Injecting and using state based on a request
The following shows an example of showing a logged out state based on the cookie on a request.
```js
import htmlExpress, { renderView } from 'html-express-js';
const app = express();
const __dirname = resolve();
const viewsDir = `${__dirname}/public`;
const { engine, staticIndexHandler } = htmlExpress({
viewsDir,
/**
* Inject global state into all views based on cookie
*/
buildRequestState: (req) => {
if (req.cookies['authed']) {
return {
loggedIn: true,
};
}
},
});
app.engine('js', engine);
app.set('view engine', 'js');
app.set('views', viewsDir);
app.get('/', function (req, res, next) {
renderView('homepage', req, res);
});
```
```js
// public/homepage.js
import { html } from 'html-express-js';
export const view = (data, state) => {
const { loggedIn } = state;
return html`
${data.title}
${loggedIn ? `Logout` : 'Not logged in'}
`;
};
```
## Development
Run site in examples directory
```bash
npm start
```
Run tests
```bash
npm test
```