When launching my NodeJS server and typing localhost:8080, I get the previously mentioned error as it loads the page. Below is my head section in my index.html file, I'm not sure why this occurs, my index.html is in the same directory as script.js and style.css.
<head>
<meta charset="utf-8">
<title>Express & Node Test</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="script.js" type="text/javascript"></script>
</head>
Using the following snippet from my app.js file for ExpressJS routing.
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, "/web/index.html"));
});
I've had no success searching my problem so I have resorted to asking on StackOverflow, any help would be greatly appreciated.
You can set your code like this in order to serve files from the current directory, Instead of path.join you can use:
app.get('/', (req, res) => {
res.sendFile(__dirname + "/index.html"); });
first-time asker here. I just started making a desktop application with electron js, and when I try to load my external stylesheet into my index.html file, it will not work. Here is my HTML:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bundle</title>
<meta name="viewport" content="width=device-width, inital-scale=1.0">
<link rel="stylesheet" type="style.css"
href="https://raw.githubusercontent.com/AlessioToniolo/Bundle/master/style.css">
</head>
<body>
<div class="header-separation">Hello</div>
<script src="main.js"></script>
<script>
/* const electron = require('electron');
const {ipcRenderer} = electron;
ipcRenderer.send('item:add', item);
*/
// For other window:
/* previous code plus
ipcRenderer.on('item:add', (e, item) => {
})
*/
</script>
</body>
</html>
When I tried to link to my external stylesheet originally I just used a path instead of a URL but then when it didn't work I tried loading another stylesheet from a CSS framework which did work. What am I doing wrong? Thanks!
I don't think GitHub allowed that its because the CSP, you should host your CSS on other place like unpkg.com.
Here are GitHub CSP. You can look at your network tab on dev tools
default-src 'none'; style-src 'unsafe-inline'; sandbox
I think it is because used sandbox sandbox described here
and the content type of the request made was text/plain not text/css so it is not executed.
I just tried it out and I can't. First you had typo seperation on you gits, 2 it should be type="text/css"
Try setting the type="style.css" to type="text/css".
I have a node.js app with a static css file. When I create a middleware and call the css file, it is geeting an error as follows:
Refused to apply style from 'http://localhost:3000/files/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Here is my app.js file
var express = require ('express');
var app = express();
app.set('view engine', 'ejs');
app.use('/files', express.static('/files'));
app.get('/', function(req, res){
res.render('index');
});
app.listen(3000);
index.ejs
<!DOCTYPE html>
<html>
<head>
<title>New page</title>
<link rel="stylesheet" type="text/css" href="files/style.css">
</head>
<body>
<p>New style</p>
</body>
</html>
When I use URL : http://localhost:3000/files/style.css
Display "Cannot GET /files/style.css" and when checking in the console's network tab, it says styles.css not found. This happens when I add static javascript files too.
I also tried this with follows
app.use('/files', express.static(__dirname + '/files'));
app.use(express.static(__dirname + '/files'));
app.use(express.static('files'));
and none of them has worked so far.
How can I solve this?
You try to get file from files/files/files/style.css
Try code below:
NodeJs:
app.use(express.static(path.join(__dirname, 'files')));
HTML:
<link rel="stylesheet" type="text/css" href="/style.css">
I am just creating an example website template, and am getting this error in the Chrome console:
Refused to apply style from 'http://localhost:3000/css/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
I am getting a 404 error when trying to load the css/style.css page, but the path seems correct. Below is some of the basic code for the site:
App:
var express = require('express');
var app = express();
var exphbs = require('express-handlebars');
var path = require('path');
app.engine('hbs', exphbs({extname:'hbs'}));
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');
app.use(express.static(path.join(__dirname, "static")));
app.get('/', function(req, res) {
res.render('resume.hbs')
})
app.listen(3000)
HTML:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<base href="/">
<link rel="stylesheet" href="..\css\style.css" type = "text/css">
<title>Example Website</title>
<h1>Header</h1>
<hr id = 'headerBorder'>
</head>
<body>
</body>
</html>
CSS:
h1 {
color: blue
}
Below are what the folders look like, which shows the path. I cannot seem to find a way to fix this. Any ideas?
This is likely just caused by not having the expected path.
You're using this line here:
app.use(express.static(path.join(__dirname, "static")));
So in this case, you need a folder named "static" and inside that folder you can put your css and images. You would be able to link to them as follows:
<link rel="stylesheet" href="/css/style.css" type="text/css">
Reference: https://expressjs.com/en/starter/static-files.html
Since you are working with hbs, create "public" folder and keep your static folders, css,javaScript,img inside the "public" folder. then
const path = require("path");
app.use(express.static(path.join(__dirname, "public")));
Here is the magic, since you told express that use "public" as a static folder, when you link the files inside that folder, hbs will take "public" folder as the "root" folder.
So lets say you have main.css in folder "style" inside the folder ""public", "public/style/main.css" directory, when you link main.css:
<link rel="stylesheet" href="style/main.css" type="text/css" />
Also, this is the complete setup for hbs in express:
app.set("view engine", "hbs");
app.engine(
"hbs",
expressHbs({
defaultLayout: "layout",
extname: ".hbs",
layoutsDir: __dirname + "/views/layouts",
partialsDir: __dirname + "/views/partials"
})
);
Place all your css inside a folder - call it static or public.
So your css is located at public/css/style.css.
In your app.js, you would reference static files by:
app.use(express.static(path.join(__dirname, "public")));
The path of the public folder should be relative to the app.js file.
just make a folder called static. and put your css folder and image folder in static folder.
Don't forget to first make css folder to keep all css files and image folder for all images.
your code:
app.use(express.static(path.join(__dirname, "static")));
in this code you are saying express to look at static folder and because you don't have static folder you are getting error and your css and image are not applying on your website.
Sol:
First create a folder static and transfer css folder to static folder.
2.In html file:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<base href="/">
<link rel="stylesheet" href="css\style.css" type = "text/css">
<title>Example Website</title>
<h1>Header</h1>
<hr id = 'headerBorder'>
</head>
<body>
</body>
</html>
Js file
var express = require('express');
var app = express();
var exphbs = require('express-handlebars');
var path = require('path');
app.engine('hbs', exphbs({extname:'hbs'}));
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');
app.use(express.static("static"));
app.get('/', function(req, res) {
res.render('resume.hbs')
})
app.listen(3000)
I tried to change the different slashes as well, but that does not entirely solve the problem. Propably, the bootstrap CSS defines h1 already as well. You therefore need to change the order of the CSS files in your HTML:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/style.css" type="text/css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<base href="/">
<title>Example Website</title>
<h1>Header</h1>
<hr id = 'headerBorder'>
</head>
<body>
</body>
</html>
Adding only !important to your CSS does not solve the issue.
I am using Polymer combined with a NodeJs/Express server which I am planning on hosting with Firebase functions.
My problem here is that besides the index.html none of the inner files can be found (404). With none of them I am revering to the first imports made inside my index file.(webcomponents-loader.js and the my-app.html)
I tried many different flavours. From absolute paths, with base tag and without and with a different directory structure.
I am clearly not an expert when it comes to node.js or express so I believe I am doing something fundamentally wrong.
Update
The links that can't be found have a different URL then the path that serves my index.html
404: http://localhost:5000/src/my-app.html
index: http://localhost:5000/nodefire-96b46/us-central1/serve
My directory:
fire_node
functions
node_modules
index.js
build
modern
bower_components
index.html
polymer.json
src
my-app
My server file
const express = require('express');
const app = express();
app.use(express.static(__dirname + '/build/modern'));
app.get('/', (req, res) => {
res.sendFile("index.html", {root: '.'});
});
app.listen(2000, () => {
console.log('Server is listening on port 2000');
});
My index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>My App</title>
<base href="/modern/">
<link rel="manifest" href="manifest.json">
<script>
window.Polymer = { rootPath: '/' };
</script>
<script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="http://localhost:4000/fire_node/functions/build/modern/src/my-app.html">
</head>
<body>
<my-app></my-app>
<noscript>
Please enable JavaScript to view this website..
</noscript>
</body>
</html>