Why templates include file doesn't work - javascript

I'm learning how to use templatesjs from:
https://www.npmjs.com/package/templatesjs
They have an example of using include html file in other html file (using <%include%> tag)
When I'm trying to build my own example, it doesn't work (The screen is empty, with no errors):
var express = require('express');
var app = express();
var fs = require('fs');
var bodyParser = require('body-parser');
app.use(bodyParser.json())
var templatesjs = require('templatesjs');
// FILES
var MAIN_FILE = '/main.html';
/*
* Home page
*/
app.get('/', function (req, res) {
fs.readFile(__dirname + MAIN_FILE, function(err,data){
if(err) throw err;
templatesjs.set(data, function(err,data){
if(err) throw err;
res.send();
});
});
})
/*
* Startup
*/
var server = app.listen(8082, function () {
var host = server.address().address
var port = server.address().port
// start
console.log("App listening at http://%s:%s", host, port)
})
the main html.file looks:
<html>
<title> Tutorial -> Templates Js Server </title>
<head>
</head>
<body>
<div>
<%include Top.html%>
</div>
<div>
</div>
</body>
</html>
and Top.html file looks:
<p>TOP</p>
(I have tried to add <html> tag into Top.html, but same results);
The problem is that the web screen I'm getting is empty (with no errors at Node.js)
What am I doing wrong ?

It's because you doesn't send back any data to incoming request! your res.send() is empty. you should send something back if you really want to show it. for example: res.send('hello world').
If you want to render your template with your data, you could use templatesjs.renderAll() method to populate your html template with desired data as follows:
// set default directory for html partials
templatesjs.dir = "./public/partials/";
app.get('/', function(req, res) {
fs.readFile(__dirname + MAIN_FILE, function(err, data) {
if (err) throw err;
templatesjs.set(data, function(err, data) {
if (err) throw err;
var list = { // this is your data
name: 'your name'
};
templatesjs.renderAll(list, function(err, data) {
if (err) throw err;
res.send(data);
});
});
});
})
Top.html:
<p>Hello, my name is <%name%></p>
and this file should reside in ./public/partials/ directory as we set default include directory to this path;

Related

How can I dynamically retrieve files from MySql / Node.js server?

I'm working on my CRUD app what I`m trying to do is to download files from MySql Nodejs server. Here the steps I've achieved so far:
I create the below function to query MySql database to find the id=179(just a random id). The function is inside a file called userContoller.js.
exports.readfile = (req, res) => {
connection.query('SELECT * FROM user WHERE id="179"', (err, rows) => {
if (!err) {
res.render('index', { rows, layout: 'main3' });
} else {
console.log(err);
}
console.log('The data from user table:\n', rows);
});
}
With Handlebars in another file called index.hbs I fetch the file with {{this.profile_image}}
{{#each rows}}
{{#if this.profile_image}}
<a href="{{this.profile_image}}" download>
<img class="card__image" src="{{this.profile_image}}" loading="lazy" alt="User Profile">
{{else}}
<img class="card__image" src="/img/cert.png" loading="lazy" alt="User Profile">
</a>
{{/if}}
In another file user.js I placed the router for the /index page.
router.get('/index', userController.readfile);
All work fine. What I want to do is to dynamically access the user id, instead of me inserting 'SELECT * FROM user WHERE id="179"'. To achieve this I create the following function exports.viewall(also included in userController.js). exports.viewall function download the correct name of the file but instead to download the *.jpeg version download a USELESS *.html version and same with other type of file like *.pdf.
exports.viewall = (req, res) => {
//User the connection
connection.query('SELECT * FROM user WHERE id=?', [req.params.id], (err, rows) => {
//when done with the connection, release it
if (!err) {
res.render('view-crew', { rows });
} else {
console.log(err);
}
// console.log('The data from user table:\n', rows);
});
}
How can I dynamically properly query the MySql/Nodejs server to download the file to my local machine?
for reference below I put the app.js:
const express = require("express");
const path = require('path');
const exphbs = require("express-handlebars");
const fileUpload = require('express-fileupload');
const mysql = require('mysql');
// to be removed when deployed in heroku
require("dotenv").config();
const cookieParser = require('cookie-parser');
// Parsing middleware
const app = express();
// default option
app.use(fileUpload());
//to load static file
app.use(express.static("public"));
app.use(express.static("upload"));
//Listen on port 5000
app.use(express.urlencoded({ extended: false })); //To parse URL-encoded bodies (as sent by HTML forms)
app.use(express.json()); //To parse the incoming requests with JSON bodies
app.use(cookieParser());
app.engine("hbs", exphbs({ extname: ".hbs" }));//Templating engine to change the extenion of file from .handlebar to .hbs
app.set("view engine", "hbs");
//link which tell to the server express.js to get the routeing from user.js
// const routes = require('./server/routes/user');
app.use("/", require('./routes/user'));
app.use('/auth', require('./routes/auth'));
// Connection Pool
var connection = mysql.createConnection({
host: 'localhost',
user: 'root',
password: 'password',
database: 'nodejs-login'
});
app.post('', (req, res) => {
let sampleFile;
let uploadPath;
if (!req.files || Object.keys(req.files).length === 0) {
return res.status(400).send('No files were uploaded.');
}
// name of the input is sampleFile
sampleFile = req.files.sampleFile;
uploadPath = __dirname + '/upload/' + sampleFile.name;
console.log(sampleFile);
// Use mv() to place file on the server
sampleFile.mv(uploadPath, function (err) {
if (err) return res.status(500).send(err);
connection.query('UPDATE user SET profile_image = ? WHERE id="179"', [sampleFile.name], (err, rows) => {
if (!err) {
res.redirect('/index');
} else {
console.log(err);
}
});
});
});
const port = process.env.PORT || 5000;
app.listen(port, () => console.log(`Listening on port ${port}`));
You can use express dynamic routes. And pass a string variable for querying the sql database. like this
app.post('/:id', (req, res) =>{
const id = req.params.id.toString;
const queryString = `UPDATE user SET profile_image = ? WHERE id=${id}`
connection.query( queryString,
[sampleFile.name], (err, rows) => {
if (!err) {
res.redirect('/index');
} else {
console.log(err);
}
});
});
I re-think the whole problem and here is the solution working for me:
1- On my front-end side I simply add ../upload/ in front of my handlebar link to database as per below code:
DOWNLOAD
In this way I re-route the the link to the folder where I keep all the file on my server.
2- I modify the router, so dinamycally get the pic with the /:pic on client side request
router.get('/upload/:pic', function (req, res) {
var file = __dirname + '/../upload/' + req.params.pic;
res.download(file);
});
3- I left the controller as follow:
exports.viewall = (req, res) => {
connection.query('SELECT * FROM user WHERE id=?', [req.params.id], (err, rows) => {
if (!err) {
res.render('view-crew', { rows });
} else {
console.log(err);
}
// console.log('The data from user table:\n', rows);
});
}
In this way, I create a download point as per front end code which downloads any file from the server taking the name reference from the MySql database:)

How to pass xml2js response to variable within node.js route?

I'm using xml2js with node.js to retrieve data from an API, but I would only like the code to run when the "/testpage" route is activated, which would then assign the api response to a variable and pass it along to a script on testpage.ejs where the end goal is to print the object/variable contents to the console.
The problem I'm facing is that I'm getting the "undefined" browser console response with the above code.
If I place the code outside of the route, have the response assigned to a variable and then pass that variable to the testpage script, then it works fine.
At this point I'm assuming it could be an asynchronous issue, but I'm not sure, or even how to tackle it if so.
// Node.js
const requestPromise = require('request-promise'),
xml2js = require('xml2js').parseString,
express = require("express"),
app = express();
const port = 3200,
apiURL = 'https://api.exampleapi.com';
app.set("view engine", "ejs");
app.use('/public', express.static(__dirname + "/public"));
app.get("/testpage", function(req, res){
var myApiObject; // To store api response
requestPromise.post(apiURL, (error, response, body) => {
if(error){
console.log(error);
return error;
}
}).then( (body) => {
xml2js(body, (err, result) => {
if(err){
console.log(err);
} else {
myApiObject = result;
return result;
}
});
});
res.render("testpage", {myApiObject: myApiObject});
});
app.listen(process.env.PORT || port, function(){
console.log("Server is running...");
});
<!--testpage.ejs-->
<html>
<head>
<title>
</title>
</head>
<body>
<p>This is the testpage</p>
<script>
var myObj =<%-JSON.stringify(myApiObject)%>
console.log(myObj);
</script>
</body>
Any ideas on what I'm doing wrong?
You need to render your page after the response from API call is received. Change your code like this:
requestPromise.post(apiURL, (error, response, body) => {
if(error){
console.log(error);
return error;
}
}).then( (body) => {
xml2js(body, (err, result) => {
if(err){
console.log(err);
} else {
res.render("testpage", {myApiObject: result});
return result;
}
});
});

MongoDB and Express: Type Error: Converting Circular structure to JSON

I am new to MEAN stack. I am trying to retreive a list of documents from MongoDB. I have used Visual Studio 2013 community edition to create a basic Nodejs Express application. Visual studio created app.js file on the root for configuration. I have put following code in app.js which is relevant to mongodb:
var mongo = require('myDB');
var db = new mongo.Db("myDB", new mongo.Server("localhost", "27017"),
{ safe: true }, { auto_reconnect: true });
// Make our db accessible to our router
app.use(function (req, res, next) {
req.db = db;
next();
});
In the routes folder that visual studio created, I have created a js file which will perform CRUD operations. I have following code in this file:
var express = require('express');
var router = express.Router();
router.get('/myRecords', function (req, res) {
var db = req.db;
db.open(function (err, db) {
if (err)
console.log(err);
else {
var collection = db.collection('myCollection');
var dataToSend = collection.find();
res.send(dataToSend);
}
})
});
module.exports = router;
I am Type Error: Converting Circular structure to JSON.
I am trying to not using any schema.
Please advice.
For those of you, who encounter the similar problem, find() doesn't return the document, we need to use toArray to retrieve documents. Following code did the trick:
router.get('/myRecords', function (req, res) {
var db = req.db;
db.open(function (err, db) { // <------everything wrapped inside this function
db.collection('myCollection', function (err, collection) {
collection.find().toArray(function (err, items) {
res.send(items);
db.close();
});
});
});
});

Not being able to POST in MEAN single page app

I have only just started trying out NodeJS. Having a little experience with Angular, I thought of trying out a MEAN stack to-do app tutorial from scotch.
I understand what is happening and how angular, node and my view are supposed to be working together. But they just aren't. I've made sure not to miss anything. Here is my code.
Server.js is in the root folder
// server.js
// set up ========================
var express = require('express');
var app = express(); // create our app w/ express
var mongoose = require('mongoose'); // mongoose for mongodb
var mongodb = require('mongodb');
var morgan = require('morgan'); // log requests to the console (express4)
var bodyParser = require('body-parser'); // pull information from HTML POST (express4)
var methodOverride = require('method-override'); // simulate DELETE and PUT (express4)
// configuration =================
mongoose.connect('mongodb://<user>:<pass>#proximus.modulusmongo.net:27017/uwa8sIje'); // connect to mongoDB database on modulus.io
app.use(express.static(__dirname +'/public')); // set the static files location /public/img will be /img for users
app.use(morgan('dev')); // log every request to the console
app.use(bodyParser.urlencoded({'extended':'true'})); // parse application/x-www-form-urlencoded
app.use(bodyParser.json()); // parse application/json
app.use(bodyParser.json({ type: 'application/vnd.api+json' })); // parse application/vnd.api+json as json
app.use(methodOverride());
// creating mongoose model ================================
var Todo = mongoose.model('Todo', {
text: String
});
// Todo is the mongo db. Creating API for CRUD in the db
//============================================================
app.get('/api/todos', function(req, res) {
Todo.find(function (err, todos) { //within 'get' we are looking for all the entries in the db
if(err) {
res.send(err) //checking for errors
}
res.json(todos); //response sends all listed todos in JSON
})
})
app.post('/api/todos', function(req, res) { //to post a new todo
Todo.create({ //creating a new post. information comes from AJAX request from Angular
text: req.body.text,
done: false
}, function(err, todo) { //checking errors
if(err) {
res.send(err);
}
Todo.find(function (err, todos) { //after post is added, find and display all existing todos again
if(err) {
res.send(err)
}
res.json(todos);
})
})
})
app.delete('/api/todos/:todo_id', function(req, res) { //delete a todo
Todo.remove({ //remove a todo from database
_id: req.params.todo_id, //todo id to be removed is provided by the request url(params)
}, function(err, todo) {
if(err) {
res.send(err);
}
Todo.find(function (err, todos) {
if (err) {
res.send(err)
}
res.json(todos);
})
})
})
//======================================================================
app.get('*', function(req,res) {
res.sendfile('./public/index.html') //load this single view file. angular will handle the
//page changes on the front end
})
// listen (start app with node server.js) ======================================
app.listen(8080);
console.log("App listening on port 8080");
My angular controller lies in the public folder along with my view
var Todoz = angular.module('Todoz', []);
function mainController($http, $scope) {
$scope.formData = {};
$http.get('/api/todos')
.success(function (data) {
$scope.todos = data;
console.log(data);
})
$scope.createTodo = function() {
$http.post('/api/todos', $scope.formData)
.success(function (data) {
$scope.formData = {};
$scope.todos = data;
})
.error(function (data) {
console.log('Error' + data)
})
}
$scope.deleteTodo = function(id) {
$http.delete('/api/todos/' + id)
.success(function (data) {
$scope.todos = data;
console.log(data);
})
.error(function (data) {
console.log(data)
});
};
Todoz.controller("mainController", mainController);
}
and my minimal view
<head>
<title>
To-Do-and-Node-To-Do
</title>
</head>
<body ng-app="Todoz">
<h1>The To-do-ist</h1>
<div ng-controller="mainController">
<div>
<input type="text" ng-model="formData.text"></input>
<button type="submit" ng-click="createTodo()">Submit</button>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="./core.js"></script>
</body>
When I start the server with 'nodemon server.js' my console logs a /GET request and the app shows on my port 8080. However when I try to post a new item from my text-box and expect it to console.log, it doesn't do anything. My browser console returns this
POST http://localhost:8080/api/todos net::ERR_CONNECTION_REFUSED angular.js:8632
Error core.js:23
POST http://localhost:8080/api/todos net::ERR_CONNECTION_REFUSED angular.js:8632
Error core.js:23
Please help. I have no clue what is going wrong.

Node js displaying images from server

I am trying to display an image on a basic web page on a localhost w/ port 5000
here is main.js
var http = require('http');
var domain = require('domain');
var root = require('./root');
var image = require('./image');
function replyError(res) {
try {
res.writeHead(500);
res.end('Server error.');
} catch (err) {
console.error('Error sending response with code 500.');
}
};
function replyNotFound(res) {
res.writeHead(404);
res.end('not found');
}
function handleRequest(req, res) {
console.log('Handling request for ' + req.url);
if (req.url === '/') {
root.handle(req, res);
} else if (req.url === '/image.png'){
image.handle(req, res);
} else {
replyNotFound(res);
}
}
var server = http.createServer();
server.on('request', function(req, res) {
var d = domain.create();
d.on('error', function(err) {
console.error(req.url, err.message);
replyError(res);
});
d.run(function() { handleRequest(req, res); });
});
function CallbackToInit(){
server.listen(5000);
};
root.init(CallbackToInit);
Using callbacks I want the server to start listening(5000) only after the init function of the following code runs
var http = require('http');
var body;
exports.handle = function(req, res) {
res.writeHead(200, {
'Content-Type': 'image/png'
});
res.end(body);
};
exports.init = function(cb) {
require('fs').readFile('image.png', function(err, data) {
if (err) throw err;
body = data;
cb();
});
}
It's an assignment I can't use express
I am trying to get image.png to be displayed, I think body = data doesn't work because it can't hold an image like a string? I don't want to put any HTML into my js file.
Don't roll your own app server. Use one of the great web app frameworks like express or connect.
var express = require('express');
var app = express();
app.use(express.logger());
app.use(express.static(__dirname + '/public'));
app.listen(process.env.PORT || 5000);
Trust me, this is better.
Take a look at the node.js example for a simple http server or a tutorial/example, such as this, for serving static files through a simple server.

Categories