I am learning to use ejs, express, node js. I am having probling my style sheet to my header here is my code and here is a . I am using header and footer as include. Here is my
My app.js-
const express = require("express");
const bodyParser = require("body-parser");
const ejs = require("ejs");
const app = express();
app.set("view engine", "ejs");
app.use(bodyParser.urlencoded({
extended: true
}));
app.use(express.static("public"));
app.get("/", function(req, res) {
res.render("home");
});
app.listen(3000, function() {
console.log("Server started on port 3000");
});
2 things to note here
style.css is an external css file. So you dont need style tags inside that file. It should only contain the css.
In your express app, you have to mention the public directory from which you are serving the static files. Like css/js/image
it can be done by
app.use(express.static(__dirname + '/public'));
assuming you put the css files in public folder from in your app root. now you have to refer to the css files in your tamplate files, like
<link href="/css/style.css" rel="stylesheet" type="text/css">
Here i assume you have put the css file in css folder inside your public folder.
So folder structure would be
.
./app.js
./public
/css
/style.css
close head tag appropriately
Hello guys I dont understand why my css file is not served when the url contains parameters. I want to access a route from another route when I click on the link here : click here located in welcome file.Below is my server config : app.js
let express = require("express");
let path = require("path");
let mongoose = require("mongoose");
let bodyParser = require('body-parser');
let exphbs = require('express-handlebars');
let dotenv = require("dotenv").config();
let app = express();
app.use(express.static(path.join(__dirname,"public")))
app.set("views","views");
app.set("view engine","hbs");
app.engine("hbs",exphbs({
extname:"hbs",
layoutsDir:path.join(__dirname,"views"),
defaultLayout:"template",
partialsDir:path.join(__dirname,"views/partials/")
})) ;
######ROUTING
app.get("/",(req,res)=>{
res.render("welcome") // from which I access "/books/:id" route : css file is served
})
app.get("/books/:id",(req,res)=>{
let p_id = req.params.id;
//here css file is not served but if I access without parameter,css file is served so WHY??????
res.render("bookdetail")
})
NB : my css file is called home.css
My template file template.hbs
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="home.css">
<title>ziri book</title>
</head>
<body>
{{{body}}}
</body>
</html>
I am trying to create a desktop application using Electron but I am unable to load an external URL like google.com in an iframe.
The code below, inside index.html, triggers an error.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
<!-- All of the Node.js APIs are available in this renderer process. -->
<iframe src="http://www.w3schools.com"></iframe>
<script>
// You can also require other files to run in this process
require('./renderer.js')
</script>
</body>
</html>
The error :
index.html:1 Refused to display 'https://www.w3schools.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
www.w3schools.com/ Failed to load resource: net::ERR_BLOCKED_BY_RESPONSE
What is causing this issue and how can I resolve it?
Adding to what has already been answered by Sjoerd Dal.
Adding External URL using IFRAME : Sites block adding their web pages to any other web page, for avoiding click-jacking. This is usually done by :
a. Adding a response in the header. This stops pages which are not whitelisted/not from same-origin to be included in iframes
b. Checking if top window is same as current window.
Now to answer your question, there is actually a very easy way to do that:
const urls = [
"https://www.google.com"
]
const createWindow = () =>{
win = new BrowserWindow({
center: true,
resizable: true,
webPreferences:{
nodeIntegration: false,
show: false
}
});
win.maximize();
win.webContents.openDevTools();
//win.webContents.
console.log(urls[0]);
win.loadURL(urls[0]);
// win.loadURL(url.format({
// pathname: path.join(__dirname,"index.html"),
// protocol: 'file',
// slashes: true
// }));
win.once('ready-to-show',()=>{
win.show()
});
win.on('closed',()=>{
win = null;
});
}
app.on('ready', createWindow);
Most sites these days block other people from iframing them. As you can see with this error, the site only allows iframes coming from the same domain. As an alternative you can use Electron's webview tag which starts the website on a separate thread, sandboxed in its own BrowserWindow. https://electronjs.org/docs/api/webview-tag
So I've built a site in my directory and it can call all the stylesheets I made up just fine but when I create a local host it posts the html without any of the stylesheet. So the node would look like this
app.listen(PORT, function() {
console.log("App listening on PORT " + PORT);
});
And my html like this
<head><link href="custome.css" rel="stylesheet"></head>
<body> /snip </body>
So when ever I open up the local host at PORT it's blank.
You should serve static files. You should give more detail about the issue.
If you're using something like express.js, you can do something like this;
const fs = require('fs');
app.get('/custome.css', function (req, res) {
res.send(fs.readFileSync(__dirname+'/custome.css'));
});
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>