How do I use two different view engines in Javascript?

Question

I made a database using node.js and mysql and all my views are hbs files.I want that when user logs in they are able to check their score on My Account page. I saw a tutorial on how to display score in table form but it used ejs view engine to display the page. Now my default view engine is hbs when I write app.set('view engine',ejs) my Account page works but all other hbs pages crash. I tried using consolidate.js and using app.engine instead of app.set but still either the ejs page crashes or hbs pages. I need to submit this project tomorrow if anyone could help it would mean alot. I've attached app.js and userlist.ejs file below.

//app.js

const express = require("express")

const path = require("path");
const app = express();
const cookieParser = require("cookie-parser");
const bodyParser = require("body-parser");
const nodemailer = require("nodemailer");
const { getMaxListeners } = require("process");
const { info } = require("console");
const ejs = require('ejs');
const exhbs = require('express-handlebars');
const mysql = require("mysql");
const dotenv=require('dotenv');
dotenv.config({path: './.env'})


app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());


const db = mysql.createConnection({
    host: process.env.DATABASE_HOST,
    user: process.env.DATABASE_USER,
    password:process.env.DATABASE_PASSWORD,
    database: process.env.DATABASE


 });
const publicDirectory = path.join(__dirname, './public');
app.use(express.static(publicDirectory));
app.use(express.urlencoded({ extended: false}));
app.use(express.json());
app.use(cookieParser());
app.use(bodyParser.urlencoded({extended: false}));
 app.use(bodyParser.json());


app.set('view engine', 'hbs');

app.set('view engine', 'ejs');


app.get("/instructions", (req, res) => {
   res.render("instructions")
});
app.get("/scoreform", (req, res) => {
    res.render("scoreform")
});



//Define Routes
app.use('/', require('./routes/pages'));
app.use('/auth',require('./routes/auth'));
app.use('/auth',require('./routes/auth'));
app.use('/auth',require('./routes/auth'))

var usersRouter = require('./routes/users');

app.use('/users',usersRouter);
db.connect((error) => {
    if (error) {
        console.log(error)
    }
    else {
        console.log("MYSQL Connected...")
    }
})



app.listen(5002, () => {
    console.log("server started on port 5002")})

//userlist.ejs

   <!DOCTYPE html>
<html lang="en">
<head>
 <title>Fetch using MySQL and Node.js</title>
</head>
<body>
    <div class="table-data">
<h2>Display Data using Node.js & MySQL</h2>
   <table border="1">
        <tr>
            <th>S.N</th>
            <th>Name</th>
            <th>Email</th>
            <th>Score</th>
       
        </tr>
    
        <%
        if(userData.length!=0){
         var i=1;
         userData.forEach(function(data){
        %>
        <tr>
            <td><%=i; %></td>
            <td><%=data.name %></td>
            <td><%=data.email %></td>
            <td><%=data.score %></td>
       
        </tr>
        <%  i++; }) %>
        <% } else{ %>
            <tr>
               <td colspan="7">No Data Found</td>
            </tr>
        <% } %>
    </table>
    </div>
 </body>
<style> 
    table, td, th { 
     border: 1px solid #ddd; 
     text-align: left; 
    } 
    table { 
     border-collapse: collapse; 
     width: 50%; 
    } 
    .table-data{ 
     position: relative; 
     left:150px; 
     top:100px; 
    } 
    th, td { 
     padding: 15px; 
    } 
     </style>
</html>

You can manually render a template just using the template libraries own APIs and then use `res.send()` to send that data. Thus, it has nothing to do with the Express integration at all so Express can know about one type of template and you can manually use another. — jfriend00, Jan 25 '21 at 08:23
But, seriously, you ought to just transform one of the templates so you're just using one template engine. None of this template stuff is all that complicated. — jfriend00, Jan 25 '21 at 08:24
Im like at very beginner level of coding and its my first time using node.js so I dont quite get what you're saying — T H, Jan 25 '21 at 09:29

score 0 · Answer 1 · answered Jan 25 '21 at 09:33

You don't have to go through Express to use a template system. So, one template system could be the one registered with Express that you use res.render() with and the other one could be used manually.

Here's a manual example borrowed from the EJS documentation that uses a simple template from a string, but you could load a template from a file into a string and use it that way too:

const ejs = require('ejs');

app.get("/somePath", (req, res) => {
    let people = ['geddy', 'neil', 'alex'];
    let html = ejs.render('<%= people.join(", "); %>', {people: people});
    res.send(html);
});

But, I think it would be cleaner if you just convert the EJS template example you have to the same template system as you're using for the rest of your project.

I dont know how to convert ejs file to hbs...I'm fetching data from mysql and want to display that in an hbs file — T H, Jan 25 '21 at 11:59
@TH - That requires understanding the hbs template format and what you want to accomplish. You can't code by just grabbing examples and using them without understanding how stuff works. You have to understand how things work. — jfriend00, Jan 25 '21 at 16:31

How do I use two different view engines in Javascript?

1 Answers1