Robin Robin - 6 months ago 9
Node.js Question

error is being shown when I'm trying to display an html page by connecting to //localhost:3000, the error is uploaded as a snippet

This is the mong.js file which has the code to connect to the mongo server perform get,put,post operations



var express = require('express');
var app = express();
var mongoose = require('mongoose');
var bodyParser = require('body-parser');
app.use(bodyParser.json());

mongoose.connect("mongodb://localhost/test");

var todoschema = new mongoose.Schema ({
name : {type: String, required: true}
});

var todomodel = mongoose.model('todolist',todoschema);

app.get('/',function(req,res){

res.sendFile('C:\Users\Rohit\Desktop\New folder\todo.html');
})

app.get('/todolist', function (req, res){
todomodel.find(function(err,tasks){
res.json(tasks);
});
});

app.post('/todolist', function (req, res) {

todomodel.insert(req.body, function(err, task) {
res.json(task);
});
});

app.delete('/todolist/:id', function (req, res) {

todomodel.remove(req.params.id, function (err, task) {
res.json(task);
});
});

app.get('/todolist/:id', function (req, res) {

todomodel.findById(req.params.id, function (err, task) {
res.json(task);
});
});

app.put('/todolist/:id', function (req, res) {

todomodel.findAndModify({
query: req.params.id,
update: {$set: {name: req.body.name}},
new: true}, function (err, task) {

res.json(task);
}
);
});

app.listen(3000);
console.log("Server running on port 3000");





This the todo.html file , the todo list page look like this


<!DOCTYPE html>
<html ng-app="App">
<head>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
<script src="frontend.js"></script>

<style>
#list
{ margin-left:320px;
font-size: 40px;
font-family:verdana;
}
button
{ color:yellow;background-color:red;text-align:center;cursor:pointer;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
font-size:40px;
padding: 14px 32px;
}
button:hover
{ background-color:peachpuff;
color:tomato;
}
</style>
</head>

<body style="background-color:cyan;">

<div ng-controller="Ctrl">

<h1 style="text-align:center;font-family:verdana;">To-Do LiSt</h1>

<div style="margin-left:300px">
<input type="text" ng-model="task.name" style="background-color:black;color:white;font-size:40px;width:40%">
<button ng-click="addtask()">Add</button>&nbsp;
<button ng-click="updatetask()">Update</button>&nbsp;<button ng-click="clearfield()">Clear</button>
</div>

<ul>
<li id="list" ng-repeat="task in todolist">
{{task.name}}
<button ng-click="deletetask(task._id)">Delete</button>&nbsp;&nbsp;<button ng-click="edittask(task._id)">Edit</button>
</tr>
</table>

</div>


</body>
</html>





This is the frontend.js file which has the angular js part and the the functions by which my todo list page works



var App = angular.module('App',[]);
App.controller('Ctrl',['$scope','$http',function($scope,$http) {

var reset = function(){
$http.get('/todolist').success(function(response){
$scope.todolist=response;
$scope.task="";
});
};

reset();

$scope.addtask = function() {
$http.post('/todolist', $scope.task).success(function(response) {
reset();
});
};

$scope.deletetask = function() {
$http.delete('/todolist/'+ id).success(function(response){
reset();
});
};

$scope.edittask = function(id) {
$http.get('/todolist/'+ id).success(function(response){
$scope.task=response;
});
};

$scope.updatetask = function(id){
$http.put('/todolist/'+$scope.task._id, $scope.task).success(function(response){
reset();
});
};

$scope.clearfield = function(){
$scope.task="";
}

}]);







TypeError: path must be absolute or specify root to res.sendFile
at ServerResponse.sendFile (C:\Users\Rohit\node_modules\express\lib\response.js:403:11)
at C:\Users\Rohit\Desktop\New folder\mong.js:17:9
at Layer.handle [as handle_request] (C:\Users\Rohit\node_modules\express\lib\router\layer.js:95:5)
at next (C:\Users\Rohit\node_modules\express\lib\router\route.js:131:13)
at Route.dispatch (C:\Users\Rohit\node_modules\express\lib\router\route.js:112:3)
at Layer.handle [as handle_request] (C:\Users\Rohit\node_modules\express\lib\router\layer.js:95:5)
at C:\Users\Rohit\node_modules\express\lib\router\index.js:277:22
at Function.process_params (C:\Users\Rohit\node_modules\express\lib\router\index.js:330:12)
at next (C:\Users\Rohit\node_modules\express\lib\router\index.js:271:10)
at jsonParser (C:\Users\Rohit\node_modules\body-parser\lib\types\json.js:100:40)
at Layer.handle [as handle_request] (C:\Users\Rohit\node_modules\express\lib\router\layer.js:95:5)
at trim_prefix (C:\Users\Rohit\node_modules\express\lib\router\index.js:312:13)
at C:\Users\Rohit\node_modules\express\lib\router\index.js:280:7
at Function.process_params (C:\Users\Rohit\node_modules\express\lib\router\index.js:330:12)
at next (C:\Users\Rohit\node_modules\express\lib\router\index.js:271:10)
at expressInit (C:\Users\Rohit\node_modules\express\lib\middleware\init.js:33:5)





I'm trying to display my html file when i open http://localhost:3000, but I'm not able to, Can you please guide me on how to do it , I'm new to all this , An easier solution would be more helpful so that I could understand it.

Answer

Use:

res.sendFile('./todo.html');

OR

var path = require('path');
res.sendFile(path.join(__dirname + '/todo.html'));

Second ones better.

But again your frontend.js file would not load. So, best approach is to make a public folder and serve the static files using express.static middleware.

app.use(require('express').static('./public'));

for further explanation you can refer to: http://stackoverflow.com/a/36041093/2680461

Comments