CSS files are not loading and on inspecting element(F12) and going to Networks, my CSS file is not visible.
I have added the middleware
app.use(express.static(path.join(__dirname, '/public')));
and also required path above it.
I have added the middleware, required it and npm installed it too.
My Folder Structure
-app.js
-package.json
-package-lock.json
-node_modules
-public
-stylesheets
-main.css
-views
-index.ejs
-partials
-header.ejs
-footer.ejs
My Header.ejs file has this and my body containing some text.
<link href="/stylesheets/main.css">
My app.js file is
var express = require('express');
var request = require('request');
var ejs = require('ejs');
var path = require('path');
var app = express();
app.set('view engine', 'ejs');
app.use(express.static(path.join(__dirname, '/public')));
and my css file changes the color of backgorund, index.ejs file calls the header and footer respectively
<% include partials/header%>
My css code
body{
background-color: purple;
text-align: center;
}
My chrome console shows no error and still I am not able to upload my CSS.
Thanks in advance for your inputs.
You are using the link tag wrong.
You need to supply rel and type attributes for it to load the css and parse it properly. Check out the documentation of link tag to know more
The problem is with the link tag. You have to specify rel, type and href attributes in your link tag.
<link rel = "stylesheet" type = "text/css" href = "/stylesheets/main.css" />
The mater is that your are requesting stylesheet file given an url who will be completed by navigator with the current root path.
For instance, this is your link below.
<link rel="stylesheet" href = "/stylesheets/main.css" />
This is your NodeJS server code.
app.get("/your/root/path", (req, res)=>{
})
Your href link will correspond to /your/root/path/stylesheets/main.css
I think that it will be your problem.
If so, to correct it, set <base> url for static files or don't let your routes path who return views to be in the form /your/root/path but instead /your-root-path
This is Google Optimize CSS Delivery page. At the bottom google suggests use this code to load CSS file at the end of the page body:
<noscript id="deferred-styles">
<link rel="stylesheet" type="text/css" href="small.css"/>
</noscript>
<script>
var loadDeferredStyles = function() {
var addStylesNode = document.getElementById("deferred-styles");
var replacement = document.createElement("div");
replacement.innerHTML = addStylesNode.textContent;
document.body.appendChild(replacement)
addStylesNode.parentElement.removeChild(addStylesNode);
};
var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
else window.addEventListener('load', loadDeferredStyles);
</script>
</body>
My questions is why not just use this one line to do the job? Especially we are in HTML5 world.
<link rel="stylesheet" type="text/css" href="small.css"/>
</body>
When a browser is parsing an HTML response, it does so line by line. And when it encounters a <link> element, it stops parsing the HTML and goes to fetch the resource set by the element's href attribute.
What the code is doing is wrapping the CSS in a <noscript> element as a fallback, and instead of blocking the page load, making a request for the CSS after the page has finished loading. It is a way to manually give a <link> element similar behavior to the <script> element's defer attribute.
This is how i construct it:
var fs = require("fs");
var jsdom = require("jsdom");
var htmlSource = fs.readFileSync("./test.html", "utf8");
var doc = jsdom.jsdom(htmlSource, {
features: {
FetchExternalResources : ['script'],
ProcessExternalResources : ['script'],
MutationEvents : '2.0'
},
parsingMode: "auto",
created: function (error, window) {
console.log(window.b); // always undefined
}
});
jsdom.jQueryify(doc.defaultView, 'https://code.jquery.com/jquery-2.1.3.min.js', function() {
console.log( doc.defaultView.b ); // undefined with local jquery in html
});
the html:
<!DOCTYPE HTML>
<html>
<head></head>
<body>
<script src="./js/lib/vendor/jquery.js"></script>
<!-- <script src="http://code.jquery.com/jquery.js"></script> -->
<script type="text/javascript">
var a = $("body"); // script crashes here
var b = "b";
</script>
</body>
</html>
As soon as i replace the jquery path in the html with a http source it works. The local path is perfectly relative to the working dir of the shell / actual node script. To be honest i don't even know why i need jQueryify, but without it the window never has jQuery and even with it, it still needs the http source inside the html document.
You're not telling jsdom where the base of your website lies. It has no idea how to resolve the (relative) path you give it (and tries to resolve from the default about:blank, which just doesn't work). This also the reason why it works with an absolute (http) URL, it doesn't need to know where to resolve from since it's absolute.
You'll need to provide the url option in your initialization to give it the base url (which should look like file:///path/to/your/file).
jQuerify just inserts a script tag with the path you give it - when you get the reference in the html working, you don't need it.
I found out. I'll mark Sebmasters answer as accepted because it solved one of two problems. The other cause was that I didn't properly wait for the load event, thus the code beyond the external scripts wasn't parsed yet.
What i needed to do was after the jsdom() call add a load listener to doc.defaultView.
The reason it worked when using jQuerify was simply because it created enough of a timeout for the embedded script to load.
I had the same issue when full relative path of the jquery library to the jQueryify function. and I solved this problem by providing the full path instead.
const jsdom = require('node-jsdom')
const jqueryPath = __dirname + '/node_modules/jquery/dist/jquery.js'
window = jsdom.jsdom().parentWindow
jsdom.jQueryify(window, jqueryPath, function() {
window.$('body').append('<div class="testing">Hello World, It works')
console.log(window.$('.testing').text())
})
I'm trying to follow the instructions to https://stackoverflow.com/a/18633827/2063561, but I still can't get my styles.css to load.
From app.js
app.use(express.static(path.join(__dirname, 'public')));
In my .ejs, I have tried both of these lines
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<link rel="stylesheet" type="text/css" href="/public/css/style.css" />
Neither loads the css. I've gone into the developer's console noticed the type is set to 'text/html' instead of 'text/css'.
My path looks like
.
./app.js
./public
/css
/style.css
Use this in your server.js file
app.use(express.static(__dirname + '/public'));
and add css like
<link rel="stylesheet" type="text/css" href="css/style.css" />
dont need / before css like
<link rel="stylesheet" type="text/css" href="/css/style.css" />
1.Create a new folder named 'public' if none exists.
2.Create a new folder named 'css' under the newly created 'public' folder
3.create your css file under the public/css path
4.On your html link css i.e
<link rel="stylesheet" type="text/css" href="/css/style.css">
// note the href uses a slash(/) before and you do not need to include the 'public'
5.On your app.js include :
app.use(express.static('public'));
Boom.It works!!
The custom style sheets that we have are static pages in our local file system. In order for server to serve static files, we have to use,
app.use(express.static("public"));
where,
public is a folder we have to create inside our root directory and it must have other folders like css, images.. etc
The directory structure would look like :
Then in your html file, refer to the style.css as
<link type="text/css" href="css/styles.css" rel="stylesheet">
For NodeJS I would get the file name from the res.url, write the header for the file by getting the extension of the file with path.extname, create a read stream for the file, and pipe the response.
const http = require('http');
const fs = require('fs');
const path = require('path');
const port = process.env.PORT || 3000;
const server = http.createServer((req, res) => {
let filePath = path.join(
__dirname,
"public",
req.url === "/" ? "index.html" : req.url
);
let extName = path.extname(filePath);
let contentType = 'text/html';
switch (extName) {
case '.css':
contentType = 'text/css';
break;
case '.js':
contentType = 'text/javascript';
break;
case '.json':
contentType = 'application/json';
break;
case '.png':
contentType = 'image/png';
break;
case '.jpg':
contentType = 'image/jpg';
break;
}
console.log(`File path: ${filePath}`);
console.log(`Content-Type: ${contentType}`)
res.writeHead(200, {'Content-Type': contentType});
const readStream = fs.createReadStream(filePath);
readStream.pipe(res);
});
server.listen(port, (err) => {
if (err) {
console.log(`Error: ${err}`)
} else {
console.log(`Server listening at port ${port}...`);
}
});
Use in your main .js file:
app.use('/css',express.static(__dirname +'/css'));
use in you main .html file:
<link rel="stylesheet" type="text/css" href="css/style.css" />
The reason you getting an error because you are using a comma instead of a concat + after __dirname.
In your app or server.js file include this line:
app.use(express.static('public'));
In your index.ejs, following line will help you:
<link rel="stylesheet" type="text/css" href="/css/style.css" />
I hope this helps, it did for me!
IMHO answering this question with the use of ExpressJS is to give a superficial answer. I am going to answer the best I can with out the use of any frameworks or modules. The reason this question is often answerd with the use of a framework is becuase it takes away the requirment of understanding 'Hypertext-Transfer-Protocall'.
The first thing that should be pointed out is that this is more a problem surrounding "Hypertext-Transfer-Protocol" than it is Javascript. When request are made the url is sent, aswell as the content-type that is expected.
The second thing to understand is where request come from. Iitialy a person will request a HTML document, but depending on what is written inside the document, the document itsself might make requests of the server, such as: Images, stylesheets and more. This question refers to CSS so we will keep our focus there. In a tag that links a CSS file to an HTML file there are 3 properties. rel="stylesheet" type="text/css" and href="http://localhost/..." for this example we are going to focus on type and href. Type sends a request to the server that lets the server know it is requesting 'text/css', and 'href' is telling it where the request is being made too.
so with that pointed out we now know what information is being sent to the server now we can now seperate css request from html request on our serverside using a bit of javascript.
var http = require('http');
var url = require('url');
var fs = require('fs');
function onRequest(request, response){
if(request.headers.accept.split(',')[0] == 'text/css') {
console.log('TRUE');
fs.readFile('index.css', (err, data)=>{
response.writeHeader(200, {'Content-Type': 'text/css'});
response.write(data);
response.end();
});
}
else {
console.log('FALSE');
fs.readFile('index.html', function(err, data){
response.writeHead(200, {'Content_type': 'text/html'});
response.write(data);
response.end();
});
};
};
http.createServer(onRequest).listen(8888);
console.log('[SERVER] - Started!');
Here is a quick sample of one way I might seperate request. Now remember this is a quick example that would typically be split accross severfiles, some of which would have functions as dependancys to others, but for the sack of 'all in a nutshell' this is the best I could do. I tested it and it worked. Remember that index.css and index.html can be swapped with any html/css files you want.
I have used the following steps to resolve this problem
create new folder (static) and move all js and css file into this folder.
then add app.use('/static', express.static('static'))
add css like <link rel="stylesheet" type="text/css" href="/static/style.css"/>
restart server to view impact after changes.
Use this in your server.js file
app.use(express.static('public'));
without the directory ( __dirname ) and then within your project folder create a new file and name it public then put all your static files inside it
Its simple if you are using express.static(__dirname + 'public') then don't forget to put a forward slash before public that is express.static(__dirname + '/public') or use express.static('public') its also going to work;
and don't change anything in CSS linking.
the order of registering routes is important . register 404 routes after static files.
correct order:
app.use("/admin", admin);
...
app.use(express.static(join(__dirname, "public")));
app.use((req, res) => {
res.status(404);
res.send("404");
});
otherwise everything which is not in routes , like css files etc.. , will become 404 .
The above responses half worked and I'm not why they didn't on my machine but I had to do the following for it work.
Created a directory at the root
/public/js/
Paste this into your server.js file with name matching the name of directory created above. Note adding /public as the first param
app.use('/public',express.static('public'));
Finally in the HTML page to which to import the javascript file into,
<script src="public/js/bundle.js"></script>
I'm developing a web part which needs some custom CSS files. So I'm using the CssRegistration class to add them to the page header.
The code registers 4 CSS files which got deployed to the layouts folder by the web part feature. A fifth CSS files is optionally registered when there's a path to it set in the web part's property AdditionalCss. The CSS files should be inserted in the header after all SharePoint CSS files and should be sorted in the order they were added by code.
The code I used is the following:
var contentCss = new CssRegistration
{ Name = "/_layouts/MyWebPart/css/content.css",
RevealToNonIE = true };
if (SPContext.Current.Web.UIVersion == 4)
contentCss.After = "corev4.css";
else
contentCss.After = "core.css";
Controls.Add(contentCss);
var customCss = new CssRegistration
{ Name = "/_layouts/MyWebPart/css/cn_custom.css",
After = contentCss.Name, RevealToNonIE = true };
Controls.Add(customCss);
var styleCss = new CssRegistration
{ Name = "/_layouts/MyWebPart/css/styles.css",
After = customCss.Name, RevealToNonIE = true };
Controls.Add(styleCss);
var colorsCss = new CssRegistration
{ Name = "/_layouts/MyWebPart/css/colors.css",
After = styleCss.Name, RevealToNonIE = true};
Controls.Add(colorsCss);
if (!string.IsNullOrEmpty(AdditionalCss))
{
var webPartCustomCss = new CssRegistration
{ Name = AdditionalCss,
After = colorsCss.Name,
RevealToNonIE = true };
Controls.Add(webPartCustomCss);
}
When I add the web part to a page all CSS files are added to the page as expected. Except the files are sorted in the wrong order.
Without the custom CSS file the order is: (link's rel- and type-attribute were removed for a better overview)
...
<link href="/_layouts/1033/styles/Themable/corev4.css"/>
<link href="/_layouts/MyWebPart/css/colors.css"/>
<link href="/_layouts/MyWebPart/css/content.css"/>
<link href="/_layouts/MyWebPart/css/cn_custom.css"/>
<link href="/_layouts/MyWebPart/css/styles.css"/>
With the custom CSS file the order is:
...
<link href="/_layouts/1033/styles/Themable/corev4.css"/>
<link href="/_layouts/MyWebPart/css/cn_custom.css"/>
<link href="/sites/mysite/Style%2520Library/de-de/test.css"/>
<link href="/_layouts/MyWebPart/css/styles.css"/>
<link href="/_layouts/MyWebPart/css/content.css"/>
<link href="/_layouts/MyWebPart/css/colors.css"/>
As you can see both cases provide a totally different order and the CSS files were never sorted in the order they were added by code.
With this strange behavior the whole CssRegistration class is not very useful as you cannot
relay that the CSS files are always in the same order. This makes designing with CSS nearly impossible.
Have you looked at the "After" property of the CssRegistration control? I think that if you don't specify an order using this property then the results are in alphabetical order in your source. This doesn't exactly match what you see but there may be something else going on that is causing your inconsistent behavior.
http://www.wictorwilen.se/Post/What-is-new-with-the-CssRegistration-control-in-SharePoint-2010.aspx