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">
Related
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">
This is the server side of my react app, and I'm seriously gobsmacked because I think I've done everything right... I've looked at a lot of posts here and also the express docs themselves, and still I'm getting a 404 when trying to get a single css file from my public folder:
My directory structure:
/server
app.js
/views
main.js
/public
/css
styles.css
The generated html from main.js which is sent with
response.set("Content-Type", "text/html").send(htmlDoc);
<link rel="stylesheet" type="text/css" href="/css/styles.css" />
In app.js
app.use(router);
app.use(express.static(path.join(__dirname, 'public')));
This always results in:
"GET /css/styles.css HTTP/1.1" 404
What else can I check?
<link rel="stylesheet" type="text/css" href="styles.css" />
since you already set "public" folder as publicly available via
app.use(express.static(path.join(__dirname, 'public')));
any time express needs to send a file, it will look into "public" folder. in your case it will look for styles.css file inside public folder
Please help me to fix the path to load the external CSS files. I have tried many times, but it does not work out. Here is my category structure:
in the header.ejs, I include the path:
<link rel="stylesheet" type="text/css" href="/style.css" />
I have tried many times, but it does not work
// app.use(express.static(path.join(__dirname + '../../src/web/public/')));
// app.use('*/css',express.static('public/'));
// app.use("/static", express.static(path.resolve(__dirname + "/public/css")));
I keep getting this error:
Refused to apply style from 'localhost:3000/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Assuming the express.static is called within your app.js file (residing in the dist folder) and the public folder is included in the dist folder the following should work:
in your app.ts:
app.use(express.static('public'))
in your html/ejs:
<link rel="stylesheet" type="text/css" href="css/style.css" />
If you intend to keep the public-folder in the src-dir and not include it in your dist-package, you need to adjust the path in your app.ts file:
app.use(express.static(path.join(__dirname, '../../src/web/public')));
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 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')));