I am setting up a web server with exprss.js and socket.io. I set up a static folder so I can link my stylesheets without having to send every single file. But I am getting this error
Refused to apply style from 'http://localhost:3000/public/styles/index.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
this is my app.js file
const express = require("express");
const app = express();
var server = require('http').Server(app);
var io=require('socket.io')(server);
app.use(express.static('public'));
app.get('/', function (req, res) {
res.sendFile(__dirname + '/public/views/index.html');
});
io.on('connection', function(socket){
socket.emit('chat message', {hello: 'world'});
socket.on('chat message', function (data){
console.log(data);
});
});
server.listen(3000);
the index.html page looks like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link type="text/css" rel="stylesheet" href="/public/styles/index.css">
</head>
<body>
<p>yo</p>
</body>
</html>
the file structure is the following
|-public
|-styles
-index.css
|-views
-index.html
-app.js
I think there is something wrong with my server setup
This is my first time using node
You get this error usually when there is no CSS file under that link.
When you use app.use(express.static('public')); directly express serves everything under root endpoint.
So you can use <link type="text/css" rel="stylesheet" href="/styles/index.css">.
If you would like to use /public/xxx.css you can use
app.use('public', express.static('public'));
When you use static, the original folder is not included in the path url, try something like this :
<link type="text/css" rel="stylesheet" href="/styles/index.css">
Related
I am trying to create a web portfolio using html, css, node and particlesJS.
Here is a quick reference to my index.js file where in here I've coded expresss to include the static files(style.css, images,...etc) inside of the folder named static so they're utilized when I run the local server with nodemon. The server runs and loads the initial index.html file. When I click to go to the about me page, that works too. My problem is clicking back to the "Me" page. When I set href="../index.html" , I get the error "Cannot GET /index.html".
I have tried including all the files including index.html in the same folder and making a reference to that in the index.JS file. No avail.
// create an express app
const express = require("express")
const app = express()
// use the express-static middleware
app.use(express.static("public"))
app.use("/static", express.static('./static/'));
// define the first route
app.get("/", function (req, res) {
res.sendFile(__dirname + '/index.html');
})
// start the server listening for requests
app.listen(process.env.PORT || 3000,
() => console.log("Server is running... on localhost:3000"));
Here's another reference to how my directory is setup [Directory][https://imgur.com/JaGaxkd]
This is the about me html file from which I want to navigate back to the first index.html
<!DOCTYPE html>
<html>
<title>Meet Me</title>
<link rel="stylesheet" type="text/css" href="./style.css">
<body>
<div id="particles-js" class="topnav">
<head>About</head>
<H3>About ME</H3>
<ul>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
<li>Me</li>
</ul>
</div>
<script type="text/javascript" src="./particles.min.js"></script>
<script type="text/javascript" src="./app.js"></script>
<script type="text/javascript" src="./index.js"></script>
</body>
</html>
I believe I have the paths right but I think I am missing something I'm just not sure what it is . I would appreciate any help on this. Much thanks in advance
In my directory I have created a public folder in which I have put another folder named css in which is located styles.css. In another folder in my directory named views I have put my ejs file, with which I want to link styles.css like this:
<link rel="stylesheet" type="css/text" href="css/styles.css">
However this does not work.
I dont even get an error in my browsers console.
If you are using npm and Express, we need to set up a public folder for the static content (like your css file):
1) In your root folder, create a folder called 'public', then another one inside called 'css' and place your styles.ccs file in there.
2) In your JS application file (e.g. app.js), we need to have something like this:
//jshint esversion:6
const express = require('express');
const ejs = require("ejs");
const app = express();
app.set('view engine', 'ejs');
app.use(express.static("public"));
app.get('/', (req, res) => {
res.render('index', { foo: 'FOO' });
});
3) In your root folder, create a folder called 'views' and inside place the EJS file you want to render (e.g. index.ejs), stablishing the link like this: <link rel="stylesheet" href="/css/styles.css">:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/css/styles.css">
<title>Document</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
In this case, you should be able to see the css code applied in the home route "/", rendering the index.ejs file. I hope it help you!
Working on frontend and backend using NodeJs for server side and ejs template for frontend. Came across a feature while using ejs scriplets to display data send from server while loading page.
Used <%console.log()%> over ejs, thought this log will be seen on inspect element logs, however got message over server terminal. How did this information is send over to server without any form submit or API call?
Server app.js:
/*jshint multistr: true, node: true, esversion: 6, undef: true, unused: true, varstmt: true*/
"use strict";
// NPM Modules
const express = require('express'),
path = require('path');
const app = express();
// Setup views directory, file type and public filder.
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(express.static(path.join(__dirname, 'public')));
app.get('/', (req, res) => {
res.render('index', {message:'Welcome'});
});
const port = process.env.PORT || 3000;
console.log('server listening at http://127.0.0.1 over port: ', port);
app.listen(port);
EJS template index.ejs:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<!-- All these CSS files are in plublic directory, as we had made all the content of public directory available for anyone from app.js -->
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/css/app.css" />
<link rel="shortcut icon" href="logo.jpg" />
<title>Sign-Up/Login Form</title>
</head>
<body>
<%console.log(message)%>
<%=message%>
<%console.log("anything")%>
</body>
</html>
How can all the <%console.log()%> are send over server terminal and <%=message%> is displayed over browser. Even <%console.log("anything")%> is displayed over server terminal even though this has nothing to do with server. How ejs scriplets communicate with server and not browser?
Had anyone else tried this before or observed it.
Your question is about how ejs templates work. This is an answer for that question. I think you might also have something wonky going on with your express setup causing you problems.
EJS is a server-side rendering system. It's job is done before the html is sent to the client, so it has nothing to do with the browser.
The scriptlets inside <% %> run on the server to insert content into the template before sending to the client.
If you want to print something out on the browser console, don't put it in a scriptlet, just put it into a <script> tag, like this:
<script>
console.log("foo");
</script>
If you want the browser console to print something generated by the server, you could use ejs to put the value of message into what it generates:
<script>
console.log("<%=message%>");
</script>
The server will put the value of message into a console.log() statement that gets delivered to the browser.
This example prints "Wellcomes" to the browser console:
server:
const bodyParser = require('body-parser'),
express = require('express'),
path = require('path');
const app = express();
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(express.static(path.join(__dirname, 'public')));
app.get('/', (req, res) => {
res.render('index', { message: 'Wellcomes' });
});
const port = process.env.PORT || 3000;
const listener = app.listen(port, function() {
console.log('platform listening on', listener.address().port);
});
index.ejs:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Sign-Up/Login Form</title>
</head>
<body>
<script>
console.log("<%=message %>");
</script>
</body>
</html>
If you show page source in your browser, you should see:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Sign-Up/Login Form</title>
</head>
<body>
<script>
console.log("Wellcomes");
</script>
</body>
</html>
I have a html file called myfile.html that displays 'Hello World'. My css file called myfile.css is used to insert background image. My bootstrap files are used to insert a image in the form of a circle.
The HTML file is as follows:
<!DOCTYPE html>
<html>
<head>
<title>MY FILE</title>
<link rel="stylesheet" type="text/css" href="public\css\bootstrap.css">
<link rel="stylesheet" type="text/css" href="public\myfile.css">
</head>
<body>
<h1>Hello World!!</h1>
<img src="public\pinky.jpg" class="img-circle">
</body>
</html>
My CSS file is as follows:
body {
background-image: url('fishy.jpg');
}
My node.js file called new.js is as follows:
const express = require('express')
const app = express()
app.use(express.static('public'))
app.get('/',function (req,res) {
console.log(__dirname)
res.sendFile(__dirname+"/myfile.html")
})
app.listen(3000, function() {
console.log('Example app listening on port 3000!')
})
My main folder is called Bootsstrap and it has the following contents:
Bootsstrap
-myfile.html
-public /*Folder*/
/*inside public folder*/
-myfile.css
-css
-js
-fonts
-fishy.jpg /*background image*/
-pinky.jpg /*circular image*/
I open Command Prompt from Bootsstrap folder and run
node new.js
I get the message as:
'Example app listening on port 3000!'
When I open Chrome Browser and type localhost:3000, I get only 'Hello World'.The images are not getting displayed. I get an Error 404.
What can I do in order to run my HTML file in server using node.js by including all my css and bootstrap files?
You must not use the public path in your html. Also, in URLs use always forward slashes. Backslashes are just for Windows directories.
<!DOCTYPE html> <html> <head> <title>MY FILE</title>
<link rel="stylesheet" type="text/css" href="/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="myfile.css">
</head> <body> <h1>Hello World!!</h1>
<img src="pinky.jpg" class="img-circle"> </body> </html>
replace
<link rel="stylesheet" type="text/css" href="public\css\bootstrap.css">
<link rel="stylesheet" type="text/css" href="public\myfile.css">
by
<link rel="stylesheet" type="text/css" href="css\bootstrap.css">
<link rel="stylesheet" type="text/css" href="myfile.css">
If you want to serve static files, such as html files, css, images, you need to make them available for the public. In your existing setup, only myfile.html is available for the public. Since you use css and other files from your server, you need to make them available also. The best way to achieve is to create a public folder and let express to make all the files available in the public folder.
Add to node.js
app.use('/', express.static('public'));
and rename your myfile.html to index.html
and in your index.html file
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="myfile.css">
For example, your node.js should look like something
const express = require('express');
const app = express();
app.use('/', express.static('public'));
app.listen(3000, function () {
console.log('Example app listening on port 3000!');
});
For more info Serving static files in Express
Edit
Your folder structure should be. no need of bootstap folder
public //public folder
-index.html
-myfile.css
-css
-js
-fonts
-fishy.jpg
-pinky.jpg
Whenever I try loading my AngularJS webpage (on a node js + express server) through http://localhost:3000, Internet Explorer just tries to download it with a random name and no file extension, instead of showing the actual page.
I can't even check the console for errors, because the download attempt seems to start before even trying to load it as a webpage.
The website works perfectly on both Firefox and Chrome. I am using Internet Explorer 11, so it's not even an old version.
I tried running my index through the W3 Validator, and the only errors it points out in the DOM are the Angular directives and tags (which are not really errors).
I tried changing the DOCTYPE from just a simple <!DOCTYPE html> to this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-loose.dtd">
And this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
... and this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
To no effect.
As suggested in other questions, I also tried serving my page as "text/plain" rather than "text/html" in my node server, but that didn't help either.
Here's the html for my index:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it">
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<!-- Angular Material CSS now available via Google CDN; version 1.0.7 used here -->
<link rel="stylesheet" href="./modules/angular-material/angular-material.min.css"/>
<link rel="stylesheet" href="./css/style.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
<link rel="icon" href="icons/favicon.ico" type="image/x-icon"/>
<base href="/"/>
<title>Area Clienti</title>
<script src="./modules/angular/angular.js" type="text/javascript"></script>
<script src="./modules/ngstorage/ngStorage.js" type="text/javascript"></script>
<script src="./modules/angular-aria/angular-aria.min.js" type="text/javascript"></script>
<script src="./modules/angular-animate/angular-animate.min.js" type="text/javascript"></script>
<script src="./modules/angular-material/angular-material.min.js" type="text/javascript"></script>
<script src="./modules/angular-ui-router/release/angular-ui-router.min.js" type="text/javascript"></script>
<script src="./modules/ui-router-extras/release/modular/ct-ui-router-extras.core.min.js" type="text/javascript"></script>
<script src="./modules/ui-router-extras/release/modular/ct-ui-router-extras.dsr.min.js" type="text/javascript"></script>
<script src="./modules/ui-router-extras/release/modular/ct-ui-router-extras.sticky.min.js" type="text/javascript"></script>
<script src="./modules/pdfmake/build/pdfmake.min.js" type="text/javascript"></script>
<script src="./modules/pdfmake/build/vfs_fonts.js" type="text/javascript"></script>
<script src="./modules/angular-messages/angular-messages.min.js" type="text/javascript"></script>
<script src="http://ngmaterial.assets.s3.amazonaws.com/svg-assets-cache.js" type="text/javascript"></script>
<script src="./js/client.js" type="text/javascript"></script>
</head>
<body ng-app="App" ng-controller="AppCtrl" ng-view ui-view ng-cloak layout="row">
</body>
</html>
The script tags were in the body before, I tried putting them in the head to see if that would have helped, but it didn't.
What might be the issue here? And why is it so painful to make stuff work on IE?
EDIT: here's the server code.
var express = require("express");
var fs = require('fs');
var xml2js = require("./node_modules/xml2js");
var auth = require("./authenticator.js");
var bodyParser = require('body-parser');
var app=express();
//app.use(express.static('pages'));
var server = app.listen(3000, function(){
var host = server.address().address;
var port = server.address().port;
});
var jsonParser = bodyParser.json(); // to support JSON-encoded bodies
var urlencodedParser = bodyParser.urlencoded({ // to support URL-encoded bodies
extended: true
});
app.get('/', function(req, res){
sendFile(res, './index.html', getHeader('text/plain'));
});
app.use('/font/', express.static('./font/'));
app.use('/modules/', express.static('./node_modules/'));
app.use('/css/', express.static('./css/'));
app.use('/views/', express.static('./views/'));
app.use('/img/', express.static('./img/'));
app.use('/js/', express.static('./js/'));
function sendFile(res, path, header){
fs.readFile(path, function(err, content){
if(err) {
console.log("\nErrore caricando " + path + " - err: " + err);
//pageNotFound(res, "error");
}
else sendToClient(content, res, 200, header);
});
}
function getHeader(type){
return {"Content-Type": type};
}
function sendToClient(data, res, code, type){
res.writeHead(code, getHeader(type));
(type === "text/html" || type === "text") ? res.end(data, "utf-8") : res.end(data);
}
Plus a bunch of other POST and GET services which I think are not relevant
UPDATE: I managed to get it to say something in the developer console. This is the error:
(translation: impossible to open http://localhost:3000/)
It still tries to download the page.
UPDATE 2:
I managed to find out what the issue was: for some reason, the Content-Type header content was being interpreted as an object rather than the string it actually was, so IE couldn't render the page.
It now renders the index, but Angular-UI-Router doesn't seem to work.
It appears as though ui-router can't load sub states (it can switch between normal states though, since I was able to log in and be transferred to my dashboard page, which is a different state)
(Everything is still working perfectly fine on Chrome and Firefox)
Could it be sending you a file because you're using .sendFile():
app.get('/', function(req, res){
sendFile(res, './index.html', getHeader('text/plain'));
});
instead of using .render() to render the page?
app.get('/', function (req, res) {
res.render('index.html');
})
Try using Express's use() to always send via sendFile() the index.html after any HTTP action using the * wildcard. Make sure this goes after any other API REST routes or similar. This helps ensure that the Angular app within index.html is not constantly reloaded by other pages being rendered. This way any other API routes send/receive the data you need and only if nothing else is matched, will the index.html be loaded. Below is a structure that worked for me for an Express + Angular 2 application.
File Structure:
api
foo
foo.js
bar
bar.js
public
fonts
css
img
index.html
server.js
Server JS:
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
// fonts, css, images are stored in respective folders within folder "public"
app.use(express.static(path.join(__dirname, 'public')));
// some RESTful endpoints
app.use('/api/foo', fooRoutes);
app.use('/api/bar', barRoutes);
app.use('*', (req, res) => res.sendFile(path.join(__dirname, 'public', 'index.html')));
// error handling middleware
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});