I am making a small webhost in Node js using hapi this is for practice as I'm not super familiar with node but I'm learning the best I can.
My current issue is, I am trying to get a css file from an include directory. using Hapi my app.js looks a little like this:
var Path = require("path");
var Hapi = require('hapi');
var HandleBars = require('handlebars');
var server = new Hapi.Server();
server.views({
engines: {
html: HandleBars
},
path: './views'
});
server.connection({
port: 5000,
host: "localhost"
});
server.route({
method: 'GET',
path: '/',
handler: function(request, reply) {
reply.view('index.html');
}
});
server.route({
method: '*',
path: '/{p*}',
handler: function(request, reply) {
reply.view('404.html').code(404);
}
});
server.route({
method: 'GET',
path: '/images/{param*}',
handler: {
directory: {
path: 'public/images'
}
}
});
server.route({
method: 'GET',
path: '/{file}.css',
handler: function (request, reply) {
reply.file("/includes/css/"+request.params.file+".css");
}
});
server.start(function(err) {
console.log('Server running at:', server.info.uri);
});
and my index.html looks like this:
<html>
<head>
<title>Home</title>
</head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<link href="/main.css" rel="stylesheet">
<body>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="" alt="First slide">
<div class="container">
<div class="carousel-caption">
<h1>Welcome to Beta</h1>
<p>Welcome to our site beta, as you will notice a lot of functionality is still being developed. Please be patient!</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Read Latest Log</a>
</p>
</div>
</div>
</div>
<div class="item">
<img src="/images/NewBG.png" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<h1>OOHHH the SPOOKS</h1>
<p>Watch out for the Spooks!</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a>
</p>
</div>
</div>
</div>
<div class="item">
<img src="/images/buttonindie.png" alt="Third slide">
<div class="container">
<div class="carousel-caption">
<h1>Proud Supporter of Indie</h1>
<p>Welcome to our Indie Game page for State of Grey! a new ariel view pixel horror game based in the VX Ace Game engine. Click our About tab and learn about the team!</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a>
</p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<!-- /.carousel -->
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>{{title1}}</h2>
<p>{{content}}</p>
<p><a class="btn btn-default" href="{{detailsLink1}}" role="button">View details »</a>
</p>
</div>
<div class="col-md-4">
<h2>{{title2}}</h2>
<p>{{content}}</p>
<p><a class="btn btn-default" href="{{detailsLink2}}" role="button">View details »</a>
</p>
</div>
<div class="col-md-4">
<h2>{{title3}}</h2>
<p>{{content}}</p>
<p><a class="btn btn-default" href="{{detailsLink3}}" role="button">View details »</a>
</p>
</div>
</div>
<!--#include virtual="/web/includes/footer.html"-->
</div>
<!-- /.container -->
When I run my host through heroku locally I can't seem to find main.css when it's called by / when I console log the path it seems to be pointing perfectly where I need it to go. However it still shows up as 404 not found. Could anyone point me in a solid direction? Thanks ahead of time!
Aucun commentaire:
Enregistrer un commentaire