Menu
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.
914
HTML is interpreted by the browser, and that happens AFTER the page is parsed by the web server. The browser then sees the html generated by the php and treats it just the same (as if it never happened).
If speed is extremely important for your application, e.g. a browser-based multiplayer game or a chat application, Node. js can become a better choice than PHP. Comparing Node. js with PHP, the first is inherently asynchronous, event-driven, and non-blocking, while the second is a synchronous programming language.
Due to the V8 engine, asynchronous execution, and real-time server interaction, Node. js offers a better execution speed and certainly outperforms PHP. Node.
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
70
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.
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With