Search code examples
node.jsexpresstemplate-engine

A lack of line breaks in browser's source view using html-express-js template engine

I am not experienced in express js template engines and I tried to choose a simple one from the list https://expressjs.com/en/resources/template-engines.html

I chose html-express-js that is on GH: https://github.com/markcellus/html-express-js

I implemented it in my own code, but when I ran it, there were no line breaks in Chrome source view. So then I implemented the example code from the html-express-js GitHub site, but then the same bad issue happened.

The picture of the issue:

enter image description here

I need the line breaks there, and I think it is normal for the most HTML sites. Is it a simple way to get the line breaks in this template engine? Or could anyone indicate a good template engine from the list?

Below I insert I think the crucial example files

example/public/index.js:

import { html } from '../../src/index.js';

export const view = (data, state) => html`
  <!DOCTYPE html>
  <html lang="en">
    <head>
      ${state.includes.head}
      <title>Dashboard</title>
    </head>

    <body>
      <h1>This is the dashboard!</h1>

      <p>
        This file is served by the <code>staticIndexHandler</code> in app.js
      </p>

      <p>Click <a href="/hello">here</a> to go hello route.</p>
    </body>
  </html>
`;

example/app.js:

import express from 'express';
import { resolve } from 'path';
import htmlExpress, { staticIndexHandler } from '../src/index.js';

const __dirname = resolve();

const app = express();

app.engine(
  'js',
  htmlExpress({
    includesDir: 'includes',
  })
);

app.set('view engine', 'js');
app.set('views', `${__dirname}/example/public`);

// serve all other static files like CSS, images, etc
app.use(express.static(`${__dirname}/example/public`));

app.get('/hello', async function (req, res) {
  res.render('hello', {
    name: 'world',
  });
});

// Automatically serve any index.js file as HTML in the public directory
app.use(
  staticIndexHandler({
    viewsDir: `${__dirname}/example/public`,
    notFoundView: 'not-found', // OPTIONAL: defaults to `404/index`
  })
);

export default app;
Solution

  • The html() function of html-express-js template engine will replace the \n and \r with '' globally from the HTML template string. See this line v1.1.1/src/index.js#L65:

    export function html(strings, ...data) {
  let rawHtml = '';
  for (const [i, str] of strings.entries()) {
    const exp = data[i] || '';
    rawHtml += str + exp;
  }
  const html = rawHtml.replace(/[\n\r]/g, '');
  return html;
}

    You can use ejs or Pug template engine. Please choose the famous libraries, they are usually more full-featured, well-tested, and well-maintained.