Just starting out with node.js, and I could really use some help with a small css and image issue that I'm facing. I've streamlined my html and .js for clarity. Despite trying everything, the css and image just won't load. My form and server are all functioning correctly, it's just these two elements giving me trouble. Any assistance would be greatly appreciated!
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