How do I serve partially dynamic HTML pages with Express?

Question

Alright, here's my issue: I have an HTML page I am quite happy with, but I wish to make it dynamic. I am using Node with Express, and I was wondering if there was any way to modify and then render plain HTML. I will not be using Jade or any other template engines.

My server.js:

var http = require('http');
var express = require('express');
var app = express()

var port = 3000;
var api_router = express.Router();

....

api_router.route('/webm/test/')
.get(function(req, res){
    res.sendFile(__dirname + "/test.html")
})

app.use('/api/', api_router);
app.listen(port);
console.log("NodeJS Backend API running.");

Currently this does not work (no templating engine for HTML found). It also does not fulfill my needs: I wish to set the "src='blah.webm'" in a tag depending on the GET req.

This is my page I wish to modify:

<!DOCTYPE html>
<html>
    <head>
        <title>Index</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="../stylesheet.css">
        <link rel="stylesheet" type="text/css" href="stylesheet.css">
    </head>

    <body>
        <div id="header">
            <a href="../index.html"><p>../</p></a>
            <p>TrentV.net : Trent VanSlyke</p>
        </div>
        <div class="container" style="display: flex">
            <video id="player" src="CUSTOMIZE ME" controls></video>
            <div id="related">

            </div>

            <script src="webm.js" type="text/javascript"></script>
        </div>
    </body>
</html>

yeiniel · Accepted Answer · 2016-02-25 17:23:39Z

5

You can use express view templating like described here

answered Feb 25, 2016 at 17:23

yeiniel

2,46617 silver badges32 bronze badges

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

3 Comments

Trent Over a year ago

While not exactly what I wanted, EJS works just fine for me now. Accepted. Muchas gracias :)

yeiniel Over a year ago

De nada. Que tengas un buen dia. Saludos

Rahul Kumar Over a year ago

Still using the ejs templating engine

Giovanni P. · Accepted Answer · 2016-12-18 16:08:58Z

then use ejs make a folder templates and add registermessage folder in it and place html.ejs for html file, style.ejs for css and text.ejs for text response.

var templateDir = path.join(__dirname, "../../../", 'templates', 'registermessage')

    var resetpassword = new EmailTemplate(templateDir)
        //var user = {name: 'Joe', pasta: 'spaghetti'}

// the dynamic variable to replace

    var locals = {

        message: message,
        email: email

    };


    resetpassword.render(locals, function (err, temp) {
        if (err) {
            console.log("error" + err + "results" + temp);
            //  console.log( temp.html);
            res.send(temp.html);
            //next(error, null);
        } else {
            //console.log(temp.html)
            res.send(temp.html);
            //  next(null, "email sent");
        }

    })
}

<%message %> will replace dynamically html.ejs

<html lang="en" ng-app="xenon-app">
<head>
</head>
<body class="page-background" >
<div class="login-container" >

      <!--  Your email id  email -->       
      <p style="font-family: Verdana, Geneva, sans-serif;font-size:13px;"><%=message %></p>

</div>
</body>

</html>

Himanshu sharma · Accepted Answer · 2016-02-25 17:36:38Z

-1

You can use angular in node so that you can use like this ...
 make 
      <!DOCTYPE html>
        <html lang="en" ng-app="xenon-app">
        <head>
            <meta charset="utf-8">

           <script src="/assets/js/angular.js"></script>
            <script> 
             var app = angular.module( "xenon-app", [] );
             app.controller( "resetPasswordController",function($scope,$http,) {

        //some http calls of node and render that data in the page by $scope

    $http({
      method: 'GET',
      url: 'http://localhost:3000/someUrl'
    }).then(function successCallback(response) {
        // this callback will be called asynchronously

       $scope.name=response.name;
        // when the response is available
      }, function errorCallback(response) {
        // called asynchronously if an error occurs
        // or server returns response with an error status.
      });





        });

        </script>
        </head>
        <body ng-controller="resetPasswordController">
        <p>
        {{name}}
        </p>
        </body>
        </html>


        and render this page by
         res.sendFile(__dirname + "/test.html")

answered Feb 25, 2016 at 17:36

Himanshu sharma

8,0436 gold badges48 silver badges82 bronze badges

3 Comments

Trent Over a year ago

Angular is a bit beyond the scope of this project.

Himanshu sharma Over a year ago

then only way to use ejs i will provide u code of it

Himanshu sharma Over a year ago

Check above answer for ejs.

Collectives™ on Stack Overflow

How do I serve partially dynamic HTML pages with Express?

3 Answers 3

3 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related