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
Related
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')));
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'm developing a MEAN app using bitnami through AWS but this is the first time I've done this. I can't figure out how to send the static files in the public folder such as css and js.
I feel like I've tried every combination of configuring the apache proxy and including or not including "public" in the path but I must be missing something fundamentally. I've looked at the other Q&A on this topic but I think what I tried below uses those methods. Don't know if it has something to do with the proxy since I'm forwarding http://public-ip/test3 to the node server.
The bitnami-apps-prefix.conf file:
ProxyPass /test3 http://127.0.0.1:3100/
ProxyPassReverse /test3 http://127.0.0.1:3100/
The nodejs app.js file - tried it with an withough public in various places
var express = require("express");
const path = require('path');
var app = express();
app.use(express.static(path.join(__dirname, '/public')));
app.get("/", function(req,res){
res.sendFile(__dirname+"/public/p4.1.html");
});
app.listen(3100,'localhost',function(){
console.log("server has started");
});
the p4.1.html file - I've tried it with and without public in the path.
<html><head>
<link rel="stylesheet" href="public/styles.css">
<script src="public/functions.js"></script>
</head>
The p4.1.html, styles.css, and functions.js are stored in the public folder. The public folder is at the same path as the app.js file.
The html page does display but I get 404 errors for the css and js: http://public-ip/public/functions.js net::ERR_ABORTED 404 (Not Found)
Is this something in my code or in the proxy perhaps? Any help is appreciated.
So the solution was to put test3 instead of public in the url in the html file.
<html><head>
<link rel="stylesheet" href="test3/styles.css">
<script src="test3/functions.js"></script>
</head>
I am trying to use Express for my Node.js server. I put my web page in /views/page.ejs as required. Yet, I have something like this in my code.
<script type="text/javascript" src="jsfile1.js"></script>
<script type="text/javascript" src="jsfile2.js"></script>
<script type="text/javascript" src="jsfile3.js"></script>
<script type="text/javascript" src="jsfile4.js"></script>
I also have a .css file to load.
My question is: how to load them ? I encounter 404 errors. My files are in the same directory as server.js (the Node.js app that I am running).
Thank you for your answers!
Noël.
You will need to include in your server.js, an express static route to the directory where you want to serve the files.
I have my static assets in /public, So the code that I use to include the static files located in /public is:
app.use(express.static(path.join(__dirname, 'public')));
With that static route in place, if you had a file /public/stylesheets/test.css, then you would reference the file like this in your .ejs:
<link rel="stylesheet" href="stylesheets/style.css">
Hope that helps!
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')));