I have a folder structure like below
assets
bootstrap
css
style.css
js
jquery.min.js
views
partials
head.ejs
header.ejs
scripts.ejs
home.ejs
user_registration.ejs
In my app.js file I have set this assets folder like:
var app = express();
app.use('/static', express.static('assets'));
var routes = require('./routes/routes');
In my routes.js file
exports.userLogin = function(req, res){
var userLogin = req.params.userId;
var users = memberData.users;
res.render('user_registration', {
title : 'Welcome',
users : users
});
};
In my head.ejs file
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="static/bootstrap/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="static/css/style.css" type="text/css">
Now inside in user_registration file, I have following code
<!DOCTYPE html>
<html lang="en">
<head>
<% include partials/head.ejs %>
</head>
<body>
<% include partials/scripts.ejs %>
</body>
</html>
By using this my jQuery, bootstrap files that are inside assets folder are not being loaded. But the home.ejs page is working normally.
When I check at the console, the home.ejs page is taking those files in following format
http://localhost:3000/static/bootstrap/css/bootstrap.min.css
whereas user_registration page is taking following format
http://localhost:3000/user_registration/static/bootstrap/css/bootstrap.min.css
I am very new in express.js framework, so I could not figure out how to solve this problem. Can anybody please help me. Thank you.
Problem is here app.use('/static', express.static('assets')); in your code line.
Replace it with
app.use(express.static(path.join(__dirname, 'assets')));
And in your head.ejs file replace bootstrap css calling line
href="static/bootstrap/css/bootstrap.min.css" to href="/bootstrap/css/bootstrap.min.css"
Hop you understand.
The problem is: the href link to static resource should be absolute, not relative. Specifically, in head.ejs it should be:
href="/static/bootstrap/css/bootstrap.min.css"
...
href="/static/css/style.css"
NOT:
href="static/bootstrap/css/bootstrap.min.css"
...
href="static/css/style.css"
As app.use('/static', express.static('assets')); stated, the static assets are hosted under /static namespace (absolute URL starting with /static), it doesn't make any sense to use relative URL any more.
Related
I want to use middleware func to serve static file,but the problem is that my css file is not linking with html file using node and express
error is:
Refused to apply style from 'http://localhost:4000/static/css/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
app.js:
const express=require('express');
const path=require('path');
const app=express();
app.use('/public',express.static(path.join(__dirname,'static')));
app.get('/',(req,res)=>{
res.sendFile(path.join(__dirname,'static','index.html'));
});
app.listen(3000);
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="/static/css/style.css">
</head>
<body>
<div class="asd">
Hi xyz here..
</div>
<script src="/static/js/script.js"></script>
</body>
</html>
folder structure is:
static
css
main.css
js
script.js
index.html
app.js
I tried a lot , but i am not able to find the error,
please help!!
Thanks!!
We will have to do something like that:
app.js
const express=require('express');
const path=require('path');
const app=express();
app.use('/public', express.static(path.join(__dirname,'./static')));
app.get('/',(req,res)=>{
res.sendFile(path.join(__dirname,'static','index.html'));
});
app.listen(3000, () => {
console.log("Starting at", 3000);
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="/public/js/main.js"></script>
<link rel="stylesheet" href="/public/css/style.css">
</head>
<body>
<div class="asd">
Hi xyz here..
</div>
<script src="/public/js/script.js"></script>
</body>
</html>
Here is the screenshot:
A basic thumbs rule we can think of:
app.use('<something_here>', express.static(path.join(__dirname,'./static')));
<link rel="stylesheet" href="<something_here>/css/style.css">
<link rel="stylesheet" href="<something_here>/css/style.css">
You don't need to add '/' in the path:
<link rel="stylesheet" type="text/css" href="css/style.css">
Also, you should make a change in your app file:
app.use(express.static(__dirname + '/static'));
This way express knows from where it has to serve the static files.
You are serving the static folder at /public endpoint. So you should change the link to
<link rel="stylesheet" type="text/css" href="/public/css/style.css">
and
<script src="/public/js/script.js"></script>
Also check the name of the css file.
Alright guys, I've been following the fcc node js tutorial for beginners. I have trouble getting the use() function from the express framework to work. I followed all the steps (I've copied exactly what he's doing), but when I open the Chrome/Firefox debug console my I can see my folders are not swapped for the alias I've set (is 'static' instead of 'public'). For anyone wondering, I'm stuck on this part -> https://youtu.be/-FV-moMWRSA?t=230.
my code:
const path = require('path');
const express = require('express');
const app = express(); //this function returns an object with many functions
app.use('/public', express.static(path.join(__dirname, 'static')));
app.get('/',
(req, res) => {
res.sendFile(path.join(__dirname, 'static', 'index.html'));
});
app.listen(3000);
my html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="/static/css/main.css">
<script src="/static/js/main.js"></script>
</head>
<body>
<p>Test paragraph</p>
</body>
</html>
anyone know what's going on?
You have wrong paths in your html. Since you're using /public in your middleware, only requests with /public will be looked in the static folder to see if a filewith the requested name exists or not.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="/public/css/main.css">
<script src="/public/js/main.js"></script>
</head>
<body>
<p>Test paragraph</p>
</body>
</html>
Hope this helps !
I am trying to add css file dynamically in ejs tempelate.
I know how to include ejs file but not getting how to add css file dynamically.
Code :-
Index.js
router.get('/', function(req, res, next) {
res.render('template', { title: 'abc',page:'index',cssa:'home'});
});
template.ejs
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="/stylesheets/style.css">
<!-- Here I want to add home.css file -->
</head>
<body>
<!-- including my ejs file -->
<%- include(page) %>
</body>
</html>
I tried :
<link rel="stylesheet" type="text/css" href="/stylesheets/\<%= cssa %>\" >
<% include %><%= cssa %><% .css %>
Goal:
to pass the server side received variable(cssa) in stylesheet source.
Don't need to concat the css path and variable, you can also do it as follows:
<link rel='stylesheet' href='/stylesheets/<%= yourVariableName %>.css' />
Method to include :
<% var css_link = '/stylesheets/' + cssa + '.css'; %>
<link rel="stylesheet" type="text/css" href="<%= css_link %>" >
Credit goes to #SpiRT
Alternatively :
<link rel="stylesheet" type="text/css" href="/stylesheets/<%=cssa%>.css">
I've found it most convenient to inject custom css scripts through an array which can then be processed in the ejs template.
This method would allow you to render any amount of CSS files that are additionally required (example, you have a site that uses 1 standard css across all pages but have 1 or 2 page specific ones which can then be included in the model passed through the ejs renderer to that specific page/route).
In the example it's a given that the css files are in the same folder, however that can be changed to each one's liking:
router side:
router.get( ... {
model = {};
model.Stylesheets = [];
model.Stylesheets.push("stylefile");
res.render("view",{model:model});
});
with the custom stylesheets being pushed though to the view, then the ejs files can be something like:
<%
var customStylesheets = "";
model.Stylesheets.forEach(function(style){
customStylesheets+='<link type="text/css" rel="stylesheet" href="css/'+style+'.css">';
})
%>
<!DOCTYPE html>
<html>
<head>
<title><%= model.title %></title>
<link type="text/css" rel="stylesheet" href="css/standard.css">
<%- customStylesheets %>
...
</head>
Hi I am studying node js, meanwhile I am facing this issue.
app.use(express.static("public"));
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
/*This route is working fine */
app.get("/:username", function (req, res) {
res.sendFile(__dirname + "/public/ui/" + "user.html");
});
/*This route is not working */
app.get("/:username/:id", function (req, res) {
res.sendFile(__dirname + "/public/ui/" + "user.html");
});
My folder Structure is
-server
-public
-ui
-ext (external files folder)
- images(all images folder)
-js (My js files folder)
-style (my css folder)
-user.html
-index.js
-user.js
When I am trying to load url http://localhost:8888/stranger/19, my page is loading but none of the files specified in user.html is not loading.
It seems like url of my css file is http://localhost:8888/stranger/ui/style/main.css instead of http://localhost:8888/ui/style/main.css.
This is happening for all files loading via ui. ("http://localhost:8888/stranger" this is coming instead of "http://localhost:8888"). How can I fix this issue
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="ui/ext/bootstrap-3.3.4/css/bootstrap.min.css" >
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="ui/style/main.css" >
<script src="ui/ext/jquery/jquery.min.js" ></script>
<script src="ui/ext/bootstrap-3.3.4/js/bootstrap.min.js" i></script>
<script src="ui/ext/moment.js" i></script>
<script src="ui/js/main.js" ></script>
<script src="ui/js/web.js" ></script>
<script src="ui/js/user_module.js" ></script>
<script src="ui/js/chat_module.js" ></script>
</head>
<body class="pz-main">
</body></html>
Add a route to static file to public directory
app.use(express.static('public'))
Here is the documentation on using the public folder
Then in your html take the path as,
<link rel="stylesheet" type="text/css" href="/ui/style/main.css">
Here are the working codes:
your app.js or server.js where the express is defined
var express = require('express');
var app = express();
app.use(express.static('public'))
app.get("/:username", function (req, res) {
res.sendFile(__dirname + "/public/ui/" + "user.html");
});
app.get("/:username/:id", function (req, res) {
res.sendFile(__dirname + "/public/ui/" + "user.html");
});
var server = app.listen(8081, function () {
var host = server.address().address
var port = server.address().port
})
Your user.html in public/ui direcrtory.
<html>
<head>
<link rel="stylesheet" type="text/css" href="/ui/style/main.css">
</head>
<body>
Page will be in green color due to css
</body>
</html>
Your css in public/ui/style directory.
body{
background: green;
}
Follow these steps and it will work.
The problem is with href attribute.
Your current href attribute in link tag is:
<link rel="stylesheet" href="ui/ext/bootstrap-3.3.4/css/bootstrap.min.css" >
Which means to use current url as base url. Change it to following:
<link rel="stylesheet" href="/ui/ext/bootstrap-3.3.4/css/bootstrap.min.css" >
Simply add / at the start and it should fix the problem.
I have attached my css file to my html file. And then i run and open page using express in node js. However, the css file does not open when i run the webserver through node js.
html(show.ejs)
<html>
<head>
<link rel="stylesheet" type="text/css" href="assets/css/style.css" media="screen" />
</head>
<body>
<h1> Value is <%= detail %></h1>
</body>
</html>
node js
//required npm
var express = require('express');//express 4.*
var path = require('path');
// define app
var app = express();
// set up template engine
app.set('view engine', 'ejs');
//static files
//app.use('/static', express.static('/public')); //not working
app.use('', express.static(path.join(__dirname, 'public'))); //not working
//app.use(express.static(__dirname + '/public')); //not working
//app.use('/public/assets', express.static('public/assets')); //not working
app.get('/show/:id', function (req, res) {
res.render('./panel/show', {
detail: req.params.id ,
});
//port
app.listen(3000);
my project folder
node_modules
views
panel
show.ejs
public
assets
css
style.css
app.js
package.json
By entering <link rel="stylesheet" type="text/css" href="assets/css/style.css" media="screen" /> You are trying to find the assets folder in your out of public directory.
So, when you / it will find public directory which is statically defined in express server.
<html>
<head>
<link type="text/css" href="/assets/css/styles.css" rel="stylesheet">
</head>
<body>
<h1> Value is <%= detail %></h1>
</body>
</html>