Have difficulties linking my css files when using EJS.
Already looked into other answer but can't figure it out
This is the code I used reference for my css file.
EJS
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="index.css">
<title></title>
</head>
<body>
<header>
<% include header %>
</header>
</body>
</html>
The css file is in the same directory as the ejs files, the views directory. Can this cause any problems? The header is just another ejs file with some static html.
server:
const express = require("express");
const path = require('path');
const app = express();
app.set("views", path.resolve(__dirname, "views"));
app.set("view engine", "ejs");
app.use(express.static(__dirname + 'public'));
app.get('/', (req, res) => {
res.render("index");
})
app.listen(3000);
I Eventually want to move my css files in another folder but I was really wondering why this doens't work. Since the files are in the same folder I expected the relative path <link rel="stylesheet" href="index.css"> to work.
You specified that the static files (css, images, etc) are on the folder "public" :
app.use(express.static(__dirname + 'public'));
Read : http://expressjs.com/en/starter/static-files.html
Just move your css on this folder ;)
edit :
You can specify multiple static folder :
app.use("/public1", express.static(__dirname + "/public1"));
app.use("/public2", express.static(__dirname + "/public2"));
But you can add folders in your static folder :
/public1/css
/public1/lib
and use it like that in your ejs file :
<link rel="stylesheet" href="/public1/css/index.css">
The reason it doesn't work is simply because the folder containing your .ejs files is not actually being served. When rendering a view, express will locate your .ejs file locally on the server and read its contents, but it will not make it available over a HTTP connection.
You can verify this by trying to access the .ejs file directly via your browser.
Related
Website loads well css,js,imgs when I uploaded it to Github, but when I start it at local server it loads only html without css,js, and images.
Because it was not loading and I've read a bit in internet I decided to add "public" folder and pack everything inside. Also I added in server.js
app.use(express.static('public'));
Errors:
For CSS
Refused to apply style from 'http://localhost:3000/styles.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
For imgs
Failed to load resource: the server responded with a status of 404 (Not Found)
JS functions doesn't work as well.
var express = require("express");
var app = express();
app.use(express.static('public'));
app.get("/", function(req,res){
res.sendFile(__dirname + "/index.html");
});
app.listen(3000, function(){
});
index.html
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<link rel="stylesheet" href="/styles.css">
<title>Workout Programmer</title>
<!-- <link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding:wght#700&display=swap" rel="stylesheet"> -->
</head>
I've tried to change path to ./ or ../ or without "/" or /public etc... nothing worked.
and at the bottom index.html
<script type="text/javascript" src="/app.js"></script>
img link:
<img src="/images/workoutman.png" alt="workoutman"
All files are stored in folder called "public" , and images are in public/images
OK so the I finally fixed the problem.
In file server.js I used
app.use(express.static(__dirname));
Other problem was styles.css actually wasn't in public folder as I thought. VisualStudio interface lost me a bit.
To find it out lead me this tip:
https://stackoverflow.com/a/60821720/14340165
I am having some trouble resolving dependencies on my express server.
Here is my project structure
Calculator
--dist
----app
-------calculator.js
-------server.js
--node_modules
--src
----app
--------calculator.js
--------server.js
----public
--------calculator.css
--------calculator.html
----.babelrc
----.gitignore
----package.json
Here is my server.js code
const express = require('express');
const app = express();
const path = require('path');
app.get('/', (req, res) => {
res.sendFile(path.resolve('./src/public/calculator.html'));
});
app.use(express.static(__dirname + '../../src/app/public'));
app.use(express.static(__dirname + './'));
app.listen(3000, () => {
console.log(__dirname);
console.log("Listening on port 3000");
});
The reason I have a dist folder and a src folder is because I am compiling my JS from ES6 from the src folder to ES5 within the app folder using Babel.
However, when I launch my node server, my html is not able to load the css file and JS file. I am using these paths to load each respectively from the calculator.html file
<link rel="stylesheet" type="text/css" href="./calculator.css">
<script type="text/javascript" src="./calculator.js"></script>
I am sure I am missing something about the way files are served on a localhost. Would appreciate the error being pointed out.
It looks like on line 9 in server.js:
app.use(express.static(__dirname + '../../src/app/public'));
you're going from the app folder up to src, up to the root, back down into src, back into app, and then trying to go down into public. However by your project structure diagram, public isn't inside app but rather beside it. You'd want something more like app.use(express.static(__dirname + '../public')); In addition, I'd recommend using the path module that's built into Node. It'll make sure you don't have mistakes in path creation.
EDIT: Sorry, that was incorrect. I didn't see that you were transpiling your server code as well. You'll want to use these lines, which should fix both:
app.use(express.static(__dirname + '../../src/public'));
app.use(express.static(__dirname));
This is assuming you run the server.js file present in dist/app and not the one in src/app.
Alright, this worked for me although I'm not a 100% sure why exactly.
I set my express static file delivery to the following
app.use(express.static(__dirname + '/../../src/public'));
app.use(express.static(__dirname));
My __dirname was shown to be Calculator/dist/app so changing the src attributes for the CSS and JS in the HTML file to this worked
<link rel="stylesheet" type="text/css" href="./calculator.css">
<script type="text/javascript" src="./calculator.js"></script>
I am assuming this works because I set my express static folder to look inside the /src/public folder and since my current directory was the /dist/app folder, I could serve the JS file directly from there?
Try one of these ...
app.use(express.static(__dirname + '/./src/app/public'));
app.use('/', express.static(__dirname} + '/./src/app/public')); // __dirname doesn't include the ending back slash, I think?
The first will always look in your static directory, and the second will look in your static directory for '/' and below. See https://expressjs.com/en/4x/api.html#app.use for more.
And then ...
Change your HTML so the src attributes will be '/calculator.css', etc
I have a problem from client side with my path for a image or css, my image and css are in the same folder with index.html but index don't see it.
My folder structure:
index.html
image.jpeg
main.css
server.js
In index.html I ask the path for image and css so:
<img src="/image.jpeg">
<link rel="stylesheet" type="text/css" href="/main.css">
In server.js I ask the path for index so:
var app = require('express')();
app.get('/',function(req,res){
res.sendFile(__dirname + '/index.html');
});
Read Express docs before use it: serving static files in Express
You problem is that you have no way of serving static files.
Include this:
app.use(express.static(__dirname + '/public'));
And use the directory 'public' to store your files.
There is a question posted here that is similar to yours and which may provide further clarification. Basic webserver with node.js and express for serving html file and assets
I am trying to work on a sample web application using HTML5 boostrap express js angular and jquery. I have been fighting with the source tags to the js and css files I am trying to include and just cannot get them to work unless I use one that is hosted online. If any one has some spare time here is what my header code looks like
index.html
<script type="text/javascript" src="/bower_components/jquery/dist/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="/bower_components/bootstrap/dist/css/bootstrap.css"/>
<script type="text/javascript" src="/bower_components/bootstrap/dist/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"/>
------------------------------------------------------------------------------------
app.js
var express = require('express');
var path = require('path');
var app = express();
//config
app.set('views', __dirname + '');
app.engine('html', require('ejs').renderFile);
//routes
app.get('/',function(req,res){
res.render('index.html')
});
//server
app.listen(1337,function(){
console.log('ready on port 1337');
})
This is a screenshot of of my file stucture
My server is running in the app.js located in the root folder. I have tried many variations of ../ and no slash and even the ~ to attempt to get this to operate. Thank you for your time in advance.
EDIT So while I have been messing around I realized if I open the index.html file without running it on my express server it works just fine. I have updated the code portion above to include my app.js.
SOLVED
A big thanks to suchit,dfsq,and Anubhav.
So since I was using express I needed to tell express how to properly path to my static src files "aka the js and css" inside of my app.js. So the answer I provide is only relevent if you are running your application on an express server. I will provide the code that was added to my app.js file and to my index.html file to come to a solution.
app.js
app.use(express.static(__dirname + '/bower_components'));
--------------------------------------------------
index.html
<script type="text/javascript" src="/bower_components/jquery/dist/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="/bootstrap/dist/css/bootstrap.css"/>
<script type="text/javascript" src="/bootstrap/dist/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"/>
Sincerely,
Fred K
Add app.use(express.static(__dirname + '/bower_components')); to app.js (it is a configuration) then link to the static files can be written as <script type="text/javascript" src="/bootstrap/dist/js/bootstrap.js"></script>
This assumes all your static files such as javascript and CSS files reside in your /bower_components folder.
The statement instructs the app to make /bower_components the root for all the static files.
app.js now looks like
var express = require('express');
var path = require('path');
var app = express();
//config
app.set('views', __dirname + '');
app.engine('html', require('ejs').renderFile);
app.use(express.static(__dirname + '/bower_components'));
//routes
app.get('/',function(req,res){
res.render('index.html')
});
//server
app.listen(1337,function(){
console.log('ready on port 1337');
})
I'm just starting out with Express and I'm trying to figure out why, when I run my app, the Bootstrap font isn't rendered (it's showing the text in simple Times New Roman). I'm pretty sure I'm using the correct paths because when I open my index.html in my browser the font is rendered correctly. I also tried this with a Bootstrap navbar, and Bootstrap doesn't appear to work correctly when I try to run it through Node, but it works, again, when I view the HTML file in my browser independently. Changing the path of the Bootstrap directory to "/public/bootstrap..." causes it to render incorrectly both ways. How do I fix this?
index.html:
<html>
<head>
<title>X</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="../public/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" media="screen">
</head>
<body>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<div class="container">
<h1>Under Construction</h1>
<p>This website is under construction. Come back soon!</p>
</div>
</body>
</html>
web.js (my main app file):
var express = require('express')
var app = express()
app.set('view engine', 'ejs')
app.engine('html', require('ejs').renderFile)
app.get('/', function(req, res) {
res.render('index.html')
})
var port = process.env.PORT || 5000;
app.listen(port, function() {
console.log("Listening on " + port);
})
1) bootstrap and express have nothing to do with each other. Bootstrap runs on the client side completely, and express is a server middleware lib over node.js
2) Why are you serving bootstrap yourself? better use a CDN :
http://www.bootstrapcdn.com
http://hostedbootstrap.com/
3) if you insist on serving it yourself add a static directory so that express can serve static files (adding a static will also serve you when you try and serve js / css for yoursite but still prefer to serve bootstrap from a CDN.
app.use(express.static(path.join(__dirname, 'public')));
then no need to use public, just use the root path right to your css:
bootstrap/css/bootstrap.min.css
i.e.
<link href="../public/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" media="screen"
You need an actual static middleware. Express itself doesn't do anything by default.
app.use(express.static(__dirname + "/public"));
Don't use "public" in the paths in your HTML. That's the directory where the static assets live, but from the browser's perspective that's the root. And don't use relative paths, either
.
<link href="/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" media="screen">