Why my CSS format is not working in node? - node.js

I meet some problems with my node code. So the thing is I want to create a local server on port 3000. After I link my html code which is
app.get("/",(req,res,next)=> {
res.sendfile(path.join(__dirname+'/src'+'/index.html'));
})
my chrome browser showed that :
Refused to apply style from 'http://localhost:3000/app.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Plus, my CSS is not working. Here is the CSS tag in my HTML
<link href="./app.css" rel="stylesheet" type="text/css" />
Anyone knows how to fix it? Thank you so much! 😊

To serve static files such as images, CSS files, and JavaScript files, use the express.static built-in middleware function in Express
var express = require('express');
var app = express();
app.use(express.static('public'));
Read more about Serving static files in Express

Related

How to send static files (CSS, js) with nodejs express on AWS Bitnami server?

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>

express does not include assets

I'm trying to load assets to my EJS file using express and it does not work. I just get message
Cannot GET /assets/main.css
Even I made loader in my main app:
app.use(express.static(path.join(__dirname, './assets')));
and after printing the path I see that its correct and the files exsists. So after using
<link href="assets/main.css" rel="stylesheet"> I can't reach the file. Where the problem could be?
See Serving static files in Express.
Right now, your app.use(...) statement is saying: I want the directory ./assets to be served whenever I navigate to my app, in other words, when I open my browser to http://localhost, serve whatever is in the folder ./assets.
You are then trying to access the file main.css at http://localhost/assets/main.css. It isn't there, it's at http://localhost/main.css.
You have 2 options:
Change your <link> tag to point to where the asset actually is:
<link href="main.css" rel="stylesheet">
Change your app.use() to host the ./assets folder at a different endpoint:
app.use('/assets', express.static(path.join(__dirname, './assets')));

ExpressJS static file serve always serves the same file

I have a expressJs setup which looks like this:
// Imports...
const app: express.Application = express();
const port: number = 3001;
const listener = new StatementListenerAPI();
app.use('/listen', listener.getRouter());
app.use('/welcome', router);
if (fs.existsSync('./client')) {
// Running in prod environment with pre built client directory. Serve this.
app.use(express.static('./client'));
}
app.listen(port);
So I have some routers connected to the express app, and at the bottom I declare that the directory client should be served statically. This directory contains an index.html as well as lots of JS, CSS and PNG files. However, no matter which URL I try to access from the express server, it always shows the code of the index.html within the statically served directory. The references to the JS and CSS files used inside the index.html also just return the code of the index.html.
I am using ExpressJS 4.16.3
What am I doing wrong?
Edit: So technically it works if using __dirname + '/client' instead of ./client. What I am now getting is that, when making GET requests from e.g. Postman (therefore "hand-crafting" the HTTP requests), I am always getting the correct results. If I call the resources from within my web browser, it still always shows the website (resolves the index.html). However, now all resources like JS and CSS scripts are being resolved properly, so apperantly Chrome resolves those dependencies properly, I am just wondering why I am still getting the contents of index.html as result when requesting some of the assets or some of the express endpoints via Chrome. API calls via code are working fine, so its only why manual chrome requests show this weird behaviour, at this point I am only asking out of curiosity.
Answer to your original question:
The path supplied to express.static should be relative to the directory from where you launch your node process or an absolute path. To be safe construct an absolute path (ie from the current directory or file). For example:
app.use(express.static(__dirname + '/client'));
Regarding your followup question:
I assume this is because Chrome uses heavy caching and it thinks this folder should return the html file. You can try and reset all caches in Chrome, or just for the page.

Where should I put a custom javascript module so that it can be found by the browser

My project file structure is like the following:
config.js is a module that I want to share between the client and the server.
In the server side file app.js, I wrote var config = require('./config'); and the module can be correctly found and included. I also wrote app.use(express.static(path.resolve(__dirname, 'client'))); so that files in the folder client are served to the clients.
However, in the client side html file index.html, I wrote
<script src="/config/config.js"></script>
<script src="config.js"></script>
but both of them results in 404 Not found error. Where should I put config.js and how can I include it in the client side?
Explanation :
Your config.js is actually unreachable by your client. By doing
app.use(express.static(path.resolve(__dirname, 'client')));
you tell your app to look inside the client folder for requested url and to serve files matching url.
(E.g. accessing http://127.0.0.1/ref.html will result in your app looking for a file named ref.html within the client folder. If found, it will simply be sent back to. Otherwise, you will face a 404.)
Knowing this, we can conclude that
<script src="/config/config.js"></script>
won't find anything. It will look for a folder config in client but won't see it. Here comes the first 404.
On the same way,
<script src="config.js"></script>
will ask for a file named config.js inside your client folder. Another 404.
Resolution :
You could simply put it in the client folder and change your var config = require('./config'); to var config = require('./client/config');.
You would then be able to use <script src="/config.js"></script> in your html. (Notice the / I added to the path. That's because you want it to be found at the root of your website.)

viewing site on http://localhost instead of file://, using node.js

I am learning to use node.js.
The site looks fine when run from file:///C:/.../myfolder/index.html
I have my jquery and bootstrap files in the directories myfolder/css/ and myfolder/js.
but when I run node index.js and go to localhost:3000, these css and js files cannot be found.
This is what is in my index.html file:
<link href="/css/bootstrap.min.css" rel="stylesheet">
<script src="/js/bootstrap.min.js"></script>
<script src="/js/jquery.js"></script>
<script src="/socket.io/socket.io.js"></script>
Is there some folder in nodejs that I'm supposed to store these files? Or do I have to put some code in index.js that imports all the css and js files?
You can simply follow the quick start instructions for Express.js here:
https://www.npmjs.org/package/express
Then browse to http://localhost:3000 to test
You can use the Atom text editor or Brackets and place your files under the public folder and reference them.
http://atom.io
http://brackets.io
By default Express uses a template engine called Jade. You can look here to work with that:
http://jade-lang.com/
Using HTML in Express instead of Jade
Node.js + Express without using Jade
Good luck!
Your localhost begins in a specific directory on you machine. If you use Xampp, you must put all your server files in C:\xampp\htdocs\ in order to acces these via your localhost URL. Some other servers use a folder called 'www'.
Find your server root path en put your files there. Or create a symlink from your server root to your files.
Did you require the path module?
var path = require('path');
It's best to create a public directory to store your files in.
public/index.html
public/css/style.css
public/js/scripts.js
The reason that you couldn't get access to localhost:3000/folder/file is that localhost:port is just a virtual port. There is no such directory called localhost:3000/css/ or localhost:3000/js.
To fix this, you need to use express module to configure the root directory from which to serve static assets.
Basically, you need to add the following code:
var express=require('express');
var app=express();
var path=require('path');
app.use(express.static(path.join(__dirname,'public')));
and your static files directory will be currentWorkingDirectory/public/, which contains all of your assets.
In your code, to link any source file,
href='/fileName.extention'
Here is the documentation link express-static-files

Resources