Sam kh Sam kh - 6 months ago 37
CSS Question

Node.js loading empty css file

pretty new to node.js, and I was wondering if anything can help me with this small css and image bug I have. Ive only posted the main parts of my html and .js just to keep it clean. Anyways my css and image arent loading. Ive tried pratically everything but cant figure it. Everything works my form, the server, everything but the css and image. Any help would be great!

file structure

webDemo
node_modules
public
css
indexCss.css
images
powerbyfhirlogo.JPG
index.html
package.json
server.js


main part of my node file.

var http = require('http');
var fs = require('fs');
var path = require('path');
var formidable = require("formidable");
var XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;
var xhr = new XMLHttpRequest();
var request = require("request");
var express = require('express');
var app = express();
var server = http.createServer(function (req, res) {

if (req.method.toLowerCase() == 'get') {
app.use(express.static(path.join(__dirname, '/public')));
displayForm(res);
}
else if (req.method.toLowerCase() == 'post') {

processFormFieldsIndividual(req, res);
}
});

function displayForm(res) {


fs.readFile('index.html', function (err, data) {
res.writeHead(200, {
'Content-Type': 'text/html',
'Content-Length': data.length
});

res.write(data);
res.end();
});
}

server.listen(63342);
console.log("server listening on 63342");


beginning of my html file.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>MI FHIR Demo Form</title>
<link rel="stylesheet" type="text/css" href="public/css/indexCss.css" />

</head>
<body>
<div class=container1>
<img src= "public/images/powerbyfhirlogo.JPG" class="img-rounded" alt="Cinque Terre">
<h1>MI FHIR Demo Form</h1>
</div>
<hr/>

<div class=container2>
<form role="form" action="" method="post" enctype="multipart/form-data">


Edit
solution

var express = require('express');
var path = require('path');
var server = express();

var port = process.env.port || 63342;

// Setup Views & View Engine
server.set('views', path.join(__dirname, 'views'));
server.engine('html', require('ejs').renderFile);
server.set('view engine', 'html');


// Define ./public as static
server.use(express.static(path.join(__dirname, 'public')));

//All POST's use processFormFieldsIndividual
server.post('*', processFormFieldsIndividual);

server.listen(port, function() {
console.log('listening on port ' + port);
});


new file structure

webDemo
node_modules
public
css
indexCss.css
images
powerbyfhirlogo.JPG
index.html
package.json
server.js

Answer

You're utilizing two different servers within your server file, app and server. That is really where you're going wrong. You can't mix and match two different servers and expect one to work for the other and vice versa.

If you're going to use express then you don't need http.createServer() since express is a Node Core http server.

Additionally, you don't want to keep redeclaring your static files for every single GET request, its not necessary.

Fundamentally this is what you need

var express = require('express');
var path = require('path');
var server = express();

var port = process.env.port || 63342;

// Setup Views & View Engine
server.set('views', path.join(__dirname, 'views'));
server.engine('html', require('ejs').renderFile);
server.set('view engine', 'html');


// Define ./public as static
server.use(express.static(path.join(__dirname, 'public')));

//All GET's render index.html
server.get('*', function(req, res) {
    return res.render('index');
});  

//All POST's use processFormFieldsIndividual
server.post('*', processFormFieldsIndividual);

server.listen(port, function() {
    console.log('listening on port ' + port);
});

EDIT

To do away with res.sendFile() which is unnecessary, I've incorporated the use of a view engine utilizing ejs. In order to use this you'll need to install ejs as dependency through npm.

npm i --save ejs

Additionally, you'll need to place your index.html in a new directory in your project folder called views. This is allows you to take advantage of res.render which eliminates the usage of res.sendFile(). Your new directory structure will look like the one below.

webDemo
node_modules
public
   css
     indexCss.css
   images
      powerbyfhirlogo.JPG
views
   index.html
package.json
server.js