Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialLaurence kite
11,768 PointsMy solution to extra credit serve the css
Here are my files but apparently the response.end cause a problem, is this because the css file is read and then the wrest of the html is processed and that writes the response.end
This is just a follow on form Chalkers code for the dynamic site.
here is the route:
//We need to add the css info to the app fille is style.css function processCss(request, response) { if (request.url == "/style.css") { response.writeHead(200,cssHeader); renderer.viewCss("style", response); //response.end(); }
}
Here is the view file it works only with the response.write commented out
function viewCss(templateName, response) { var fileContents = fs.readFileSync('./views/' + templateName + '.css',{encoding: "utf8"}); //console.log(fileContents); // console.log(templateName); response.write(fileContents); }
2 Answers
Rhys Kearns
4,976 PointsCan you please set it up properly so we can understand it
Laurence kite
11,768 PointsHere is my attempt at the serving css I use two functions one to look for the css file request which seems to happen as a result of the link in the header.htm(i had no idea this would happen) the other to read the css file and write it into the header. Since the header is included in all renders it will have the css for all the views. Here is my server with the added route of processCss(request, response). I guessed it should sit after the home which is the home html. I am not sure if this order of routes makes any difference:
Server Code:
const server = http.createServer(function (request, response) {
console.log("The request ", request.url, request.method);
//console.log("The response", response);
router.home(request,response);
router.processCss(request, response);
router.user(request, response);
}).listen(3000);
console.log(`Server running at http://<workspace url>/`);
processCss function
function processCss(request, response) {
if (request.url == "/style.css") {
response.writeHead(200,cssHeader);
renderer.viewCss("style", response);
//response.end();
}
}
It fails if I do not comment out the last line //response .end, I thought this would be required ?
renderer.viewCss("style", response);
function viewCss(templateName, response) {
var fileContents = fs.readFileSync('./views/' + templateName + '.css',{encoding: "utf8"});
//console.log(fileContents);
// console.log(templateName);
response.write(fileContents);
}
The other routes were done by Andrew Chalkers.
Here is the header html view without the css embedded in it:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Treehouse Profile</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--styles have been removed and need to be servedd here some how via a link maybe -->
<link rel="stylesheet" type="text/css" href="/style.css">
</head>
Laurence kite
11,768 PointsLaurence kite
11,768 Pointsok do you mean using Mark down to separate the code
Rhys Kearns
4,976 PointsRhys Kearns
4,976 PointsYes