CODEWITHSUNDEEP
phpnode.jsserver-side-rendering
Altimus Prime
Altimus Prime

Reputation: 2327

Render html in nodejs like in php

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.

Upvotes: 5

Views: 4079

Answers (3)

Altimus Prime
Altimus Prime

Reputation: 2327

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.

Upvotes: 3

Austin
Austin

Reputation: 114

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.

Upvotes: 1

JJJ
JJJ

Reputation: 3332

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

Upvotes: 3

Related Questions