CODEWITHSUNDEEP
htmlnode.js
Enrique Paullada
Enrique Paullada

Reputation: 53

My node.js app doesn't detect .css files

I'm starting up with Node.js but I'm having trouble with my first app: I have my first app set up "app.js", with an html file "new.html" and a .css file "formato.css". The problem is that when I open new.html on my web browser it does respect what is written on the .css file, however when I run "node app.js" the screen that comes up doesn't respect what is on the .css file. How can I fix this?

app.js:

var http = require('http');
var url = require('url');
var fs = require('fs');
var qs = require('querystring');

var nuevoPostHTML= fs.readFileSync('vistas/post/new.html');

function nuevoPost(request, response){
    response.writeHead(200, {'Content-type': 'text/html; charset - utf8'});
    response.end(nuevoPostHTML);
}

function agregarNuevoPost(request, response){
parseBody(request, function(body){
    var post = {
        title: body.title,
        content: body.content
    }
    console.log("Title: " + post.title);
    console.log("Content:" + post.content);
})
response.end();
}


//Utils
function notFound(request, response){
response.writeHead(404);
response.end('404: File not Found');
}

function parseBody(request, callback){
var body = '';
request.on('data', function(chunk){ body += chunk;})
request.on('end', function(){callback(qs.parse(body));})
}
//Rutas
var regexNuevoPost = new RegExp('^/posts/new/?$');
var regexPost = new RegExp('^/posts/?$');


//Comienza servidor
var server = http.createServer(function(request, response){
var nomPath = url.parse(request.url).pathname;

if (regexNuevoPost.test(nomPath)){
    nuevoPost(request, response);
}else if (regexPost.test(nomPath)){
    agregarNuevoPost(request,response);

}else{
    notFound(request,response);
}
});

server.listen(8000);
console.log('Listening on http://127.0.0.1:8000');

new.html:

<!DOCTYPE html>
<html>
<head>
<title>
  Nuevo Post
</title>
<link rel="stylesheet" type="text/css" href="formato.css" />
</head>
<body>
<h1>
  Nuevo Post
</h1>
<form method="post" action="/posts" id="new_post" class="new_post">
  <div class="field">
    <label for="post_title">Titulo</label><br />
    <input type="text" name="title" id="post_title" size="30" />
  </div>
  <div class="field">
    <label for="post_content">Contenido</label><br />
    <textarea name="content" cols="40" rows="20" id="post_content">
    </textarea>
  </div>
  <div class="actions">
    <input type="submit" value="Crear" id="post_submit" />
  </div>
</form>
<p>
  <br />
  <a href="/posts">Back</a>
</p>

formato.css:

body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}

Upvotes: 3

Views: 1391

Answers (2)

Kariem Muhammed
Kariem Muhammed

Reputation: 479

You have to use a static-server middleware to serve your static assets. if you intend to use expressjs framework, it has a built-in serve-static middleware for that.

var express = require('express');
var app = express();

// serve static assets
app.use(express.static(__dirname + '/assets'));

if you won't use express, you can simply use its middleware in your project.

$ npm install serve-static

var serveStatic = require('serve-static');
var serve = serveStatic('/assets', {});

var server = http.createServer(function(req, res){
 var done = finalhandler(req, res);
 serve(req, res, done);
});

Upvotes: 3

Kilreaux
Kilreaux

Reputation: 268

As m59 states, you need to serve files in use by your script.

The easiest way is to use Express since it makes serving static content fairly simple.

A good writeup: http://blog.modulus.io/nodejs-and-express-static-content

Upvotes: 0

Related Questions