I am working with simple express node js But my css file does not link with ejs both are the same folder shown in below picture. and also app.use(express.static(__dirname + "/website")) is here
I have searched on google but the problem still there.
The following css folder should be in a public folder..
and in express your command should be:
app.use(express.static("public"));
and your link tag in html should be as follows:
<link rel="stylesheet" href="css/regPage.css">
Related
My folder structure is as the following:
public
css
html
main
pllanet.html
server
server.js
src
img
js
The public folder contains all HTML and CSS codes, and src folder contains img and js files. In server.js, I am using Express to indicated the static files directories as the following:
app.use(express.static(path.join(__dirname, "../public")));
app.use(express.static(path.join(__dirname, "../src")));
When I open pllanet.html, it doesn't seem like the app is picking up the second directory, since the images don't load.
In the pllanet.html file, I have the css route as the following:
<link rel="stylesheet" href="../../css/main/pllanet.css">
<link rel="stylesheet" href="../../css/main/home.css">
Could somebody help me, please? I am really stuck. Also, is it my folder structure a good practice?
Really appreciate your help guys.
You can implemet virtual path
To create a virtual path prefix (where the path does not actually exist in the file system) for files that are served by the express.static
app.use('/static', express.static('public'))
In your code, you could:
app.use('/public', express.static(path.join(__dirname, "../public")));
app.use('/resource', express.static(path.join(__dirname, "../src")));
// and link in html like
<link rel="stylesheet" href="/public/css/main/pllanet.css">
// img or js
<link rel="stylesheet" href="/resource/img/someimage.jpg">
I have set my static folder to public (in the root of my app folder) within the app.js.
But still the handlebars layout files when linking the css files, could not find the files within the public folder.
// app.js code:
// init app
var app = express();
// view engine
app.set('views',path.join(__dirname,'views'));
app.set('view engine','handlebars');
app.engine('handlebars',expressHandlebars({defaultLayout:'layout'}));
// middleware
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended:false}));
app.use(cookieParser());
// set static folder
app.set(express.static(path.join(__dirname,'public')));
handlebars layout file:
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
First of all you must use absolute path as mentioned by robertklep in comments.
Now the problem, you are using app.set thats the problem, you have to use .use method not .set.
Now about how you should structure your directory, I recommend assigning a directory path like '/public' for accessing public files. It can be done like this :
//app.use not .set
app.use('/public', express.static(path.join(__dirname,'public')));
//see the first argument in above line it assigns which directory path is used to access the public file through URL
After this is done you can access the files you need like this :
<link rel="stylesheet" type="text/css" href="/public/css/bootstrap.min.css"/>
i am trying by first express web app and I am using ejs template to render my web page and css to style my pages.
but server is unable to render css file from public folder. i put the static file path at express .js as follow
express = require('express'),
var app = express();
i tried to put static file path to express.js
// app.use(express.static('../public'));
app.use("/public",express.static(__dirname + '/public'));
// app.use(express.static('../../public')); //./
// app.use('/', express.static(__dirname + '/public'));
//app.use(express.static(__dirname + '../../public'));
and gave link to to my signup.ejs page
<link href="/public/mystyle.css" rel="stylesheet" type="text/css">
my directory structure as follow
app
|-view
|- signup.ejs
public
|-mystyle.css
express.js
When i started my server its give me 404 not found error. although my localhost is working good only problem is my web page is unable to get css file in webpage
Are you sure the port you have entered in the app.listen() is correct?
try
app.listen(port no., 'your localhost', function() {
console.log("... port %d in %s mode", app.address().port, app.settings.env);
});
Change the following two things:
Make link relative: app.use("/public",express.static(__dirname + './public'));
No need of navigating to /public again, since express.js already searches for static files in this folder: <link href="/mystyle.css" rel="stylesheet" type="text/css">
See: http://expressjs.com/en/starter/static-files.html
I guess the title might be confusing. I didn't know how to word it but say i have a directory as follows:
/
app.js
/static
/styles
main.css
/views
index.html
/files
1.html
2.html
If I serve 1.html and have in it, i have a css file as
<link rel="stylesheet" type="text/css" href="static/styles/main.css">
This does not load the css file. It works fine on the index page I'm assuming because it is directly inside the views folder. Because I'm trying to access something in the files folder, its not working. Could someone point me in the right direction?
Also note I have set
server.set('views', __dirname + '/views')
server.use('/static', express.static(__dirname + '/static'));
Try removing static from href attribute
<link rel="stylesheet" type="text/css" href="/styles/main.css">
And change the static files serving configuration to
server.use(express.static(path.join(__dirname, 'static')));
I am trying to wrap my html in a nodejs express app (latest version of express). I try using res.sendFile to send my "index.html" file. I am running into an issue where there are a lot of 404s when loading the page in a browser because it can't find any of my js or css files. My js files are in the bower_components directory, some are in "js" directory. My css files are in a "css" directory.
Path for one is:
/bower_components/jquery/dist/jquery.min.js
What is the best way to update in my server.js file and my index.html file so that it can find all the "css" and "js" files?
You can use the directive express.static
var server = express();
server.use(express.static(path.join(__dirname, 'static')));
It will look for a static folder to serve your static files. Just put your css and js files in this folder and reference them in the <head> part of your templates (index.html in your case)
If you have this two line of code in your app.js file:
app.use(express.static(path.join(__dirname, 'public')));
app.set('views', path.join(__dirname, 'views'));
Then you need to put your HTML files in view folder.
I myself use ejs (templator) for render HTML files and more ,by adding this line of code to my app.js :
app.set('view engine', 'ejs');
Then by changing your extention of HTML fils to .ejs you can render them with this code :
res.render('file_name');
More info
For example if you have a css file in /public/css/style.css you have to link to it in your html with this address : ./css/style.css or something like this.