Render html in nodejs like in php

Question

It seems like a simple question, but I can't find anything about it in google or stackoverflow. Probably I haven't found the right keywords.

In php you can write something like this

example.php

<?php
//a bunch of sloppy logic, or maybe some includes but for this I'll just define the variables below...
  $title = "Word to your mother";
  $heading = "Too legit";
  $paragraph = "Extensive research has shown that people's taste in music stops changing once they are forced to earn a living. Maybe that's when they learn how dumb the lyrics really are or maybe they don't have time to waste on things that no longer matter...";
?>
<!DOCTYPE html>
<html>
 <head>
  <title><?=$title?></title>
 </head>
 <body>
  <h1><?=$heading?></h1>
  <p><?=$paragraph?></p>
  <h2>Counting</h2>
  <?php
    for($x=1;$x<=10;$x++){
  ?>
    <p><?=$x?></p>
  <?php
    }
  ?>
 </body>
</html>

Is there some equivalent of this in nodejs?

The broader question has something to do with serving dynamic content from a nodejs server that the browser sees as static. Solutions that require any kind of JavaScript on the client side will not work for me.

I saw ejs and vue but they both have something like <script src='source.js'> on the DOM which is exactly what I don't want and can't have.

If you think this is a duplicate, please say in the comments and give me a chance to clarify before marking it as a duplicate.

Clarification/Update:

The term "template" is probably a negative keyword for the functionality I'm trying to describe. In the php example above I could nest a html element inside of an if statement or loop while keeping the server markup inline. There's another post here where the question basically asked the same thing but the answer is not remotely satisfactory.

So you don't want styles or interactivity on the page? Then why not hardcode it? — Lawrence Cherone
– Lawrence Cherone, Commented Mar 4, 2018 at 22:28
I want a dynamic page served without javascript. I can't hand write ever combination of html and content for whatever a user may do. Php makes it really easy, and I thought for sure that some similar functionality would exist in nodejs, even if only as a plugin. — Altimus Prime
– Altimus Prime, Commented Mar 5, 2018 at 19:30

JJJ · Accepted Answer · 2018-03-04 22:25:47Z

3

Using Express, you can use a template engine such as EJS to serve static content from the sever.

At runtime, the template engine replaces variables in a template file with actual values, and transforms the template into an HTML file sent to the client.

If you have never used Express, you can read about it here: https://expressjs.com/en/guide/using-template-engines.html

answered Mar 4, 2018 at 22:25

JJJ

3,3525 gold badges31 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Altimus Prime Over a year ago

Thank you for your answer. I specifically researched ejs before posting the question and specifically mentioned it as something that doesn't seem to work. I see the link you included, where content can be fed at render through a json style string into a fixed template. Is there nothing less restrictive?

JJJ Over a year ago

EJS allows you to not only pass data from the sever to the template, but you can also run other JavaScript functions like a for loop. Have a look at their docs: ejs.co

Altimus Prime · Accepted Answer · 2018-03-07 14:53:18Z

Thank you to Josan and Austin. I read ejs.co and the docs and couldn't find what I'm talking about on their page. Josan in his comment described that it could follow the looping and conditional but I couldn't understand how. There weren't any examples of what I included below.

Eventually I came across How to: Use ejs without express which simply spits the rendering to console. Here is the same php example I had in the original question, but done completely in node.js in the most minimal way possible, I think.

server.js

const http = require('http');
var ejs = require('ejs');
var fs = require('fs');

const hostname = 'localhost';
const port = 3000;

const server = http.createServer((req, res) => {
var htmlContent = fs.readFileSync(__dirname + '/main.ejs', 'utf8');
var htmlRenderized = ejs.render(htmlContent, {filename: 'example.ejs'});

  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/html');
  res.end(htmlRenderized);
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

example.ejs:

<%
  var title = "Word to your mother";
  var heading = "Too legit";
  var paragraph = "Extensive research has shown that people's taste in music stops changing once they are forced to earn a living. Maybe that's when they learn how dumb the lyrics really are or maybe they don't have time to waste on things that no longer matter...";
%>

<!DOCTYPE html>
<html>
 <head>
  <title><%=title%></title>
 </head>
 <body>
  <h1><%=heading%></h1>
  <p><%=paragraph%></p>
  <h2>Counting</h2>
  <%
    for(x=1;x<=10;x++){
  %>
    <p><%=x%></p>
  <%
    }
  %>
 </body>
</html>

Granted, the values for title, heading and paragraph in the ejs.render method if included in the object being passed, which is the example you usually get to see when looking up examples for ejs.

Austin · Accepted Answer · 2018-03-04 23:41:39Z

1

PugJS

Integrating PugJS wit Express

PugJS can be integrated quickly into an Express app, rendered server-side into HTML and served to the client without any requirements for client-side JS dependencies.

answered Mar 4, 2018 at 23:41

Austin

1147 bronze badges

Collectives™ on Stack Overflow

Render html in nodejs like in php

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related