Hi, I'm learning Node and I'm using the ejs library to do renders and routes, but I have a little problem. I would like to know how I can make my Bootstrap navbar correctly point to my routes ... Right now that's how I got my answers from the server and the navbar ...
var express = require('express');
var engine = require('ejs-locals');
var app = express();
//var path = require("path");
var serv = require('http').Server(app);
const port = 3000;
app.engine('ejs', engine);
app.set('view engine', 'ejs');
app.get('/', function(req, res) {
// res.sendFile(path.join(__dirname+'/views/home/index.html'));
res.render('home/index');
//__dirname : It will resolve to your project folder.
});
app.get('/about', function(req, res) {
// res.sendFile(path.join(__dirname+'/views/home/index.html'));
res.render('about/index');
//__dirname : It will resolve to your project folder.
});
app.get('/chat', function(req, res) {
res.render('chat/index');
});
serv.listen(port);
console.log('Server Started. ___ in port:' + port);<!-- Navegador implementado en vistas -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="home/">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="about/">About</a></li>
<li><a href="chat/">Chat</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="../navbar/">Default</a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
<li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav> When I'm in the root there is no problem I can access any site / home , / about . The problem is when I'm in a view, suppose that in "about /" when I click on the anchor that points to "/ home" it throws me a request with something like this ...
