I have a project which has been built using Node js, Express framework and Angular js. I have deployed the project on Bluemix. When I hit the URL in browser the static content(css, js) is not being loaded. Browser says 404 Not found.
Folder structure: Views-->index.ejs
!
!
Content--->style.css
Views and Content folders are at the same level.
I tried below paths.
<link href="Content/style.css" rel="stylesheet">
<link href="/Content/style.css" rel="stylesheet">
<link href="../Content/style.css" rel="stylesheet">
Thanks in advance
You need to make sure you set the public directory for your files to be accessed by express. This is an example:
app.use(express.static(__dirname + '/public'));
Then you need to reference your front-end files (css, img, etc.) in reference to this directory (so if you have a public/img folder, the reference url will be <img src="img/NAMEOFIMAGE.jpg">
Hope this helps. Comment below with any issues.
Thanks
Related
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')));
I have created a nodejs application using the express framework. I have used express.static to serve my static files.
app.use(express.static(path.join(__dirname, '..', 'public')));
There is a route that server the login.html.
// serve login page
app.get('/auth/login', loginPage);
and loginPage function
loginPage(req: any, res: any) {
res.sendFile(path.join(__dirname, '..', '..', 'public', 'login.html'));
}
Now if I directly hit http://localhost:8080/login.html login page gets served with all its css and js files, so static files are getting served.
but when I hit http://localhost:8080/auth/login only login.html is served and the other css/js files showing 404 status.
If I check the request on browser network window request is for http://localhost:8080/auth/css/bootstrap.min.css, this is appending auth prefix.
but when I change URL mapping to /auth from /auth/login then it works fine.
How can I solve this?
I was linking other js and CSS files without using / in href attribute. Like this
<link href="css/bootstrap.min.css" rel="stylesheet">
So I changed all the href by appending the /
<link href="/css/bootstrap.min.css" rel="stylesheet">
and now this is working. Thanks to #Patric
I 'm a beginner of Node.js development,
Now I try to use bootstrap framework in my first Express web app.
I use
npm install bootstrap
to download the files,and it seems that npm puts them in my node_modules folder.
My question is how can I refer to the bootstrap files in my views in express?
I know a typical way is copying the bootstrap file into the public folder. So my html files can find them. But I don't think this is a good idea.
Thank you.
You need to use in your server.js:
app.use(express.static(__dirname + '/node_modules/bootstrap/dist'));
to define a static resourse and then use:
<script language="javascript" src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
I found a similar question. In which the solution is explained better by #augusto-goncalves. His solution works for me. It is similar to the solution of #victor-behar but more elaborated and clears confusion.
You have to reference it in the <script> and <link> tags in the header or at the bottom of your main script.
If you're using express, you're probably using templating. To use it in your header part or in your main template (depending on how you've managed your views) like :
<script language="javascript" src="node_modules/bootstrap/.../bootstrap.min.js"></script>
and
<link rel="stylesheet" href="node_modules/bootstrap/.../bootstrap.min.css"/>
This works only if you didn't moved your files with a gulp or a grunt task
There's also a way to transpile scss in express using node sass middleware, for example https://github.com/sass/node-sass-middleware.
That way you can override bootstrap scss. You can do the same for JS with webpack: transpile client-side js and then include the bundle.js in your frontend.
I am trying to access a folder in my app that contains a few .js controller modules.
in the head of one of my .html files I have this script declared:
the problem is when the app is running, the application seems to know what the current path is, so the path to my script is not relative to the actual file system, it is relative to the current path of the app, which I might say is very strange.
So, the quick fix would be to easily specify the root of my application, since fancy_scripts is just one folder down from the root.
the following doesn't work, because of the problem I mentioned above
<head>
<script type="text/javascript" src="../fancy_scripts/userHomeController.js"></script>
</head>
but there has to be a way to specify the global root of the app with something like a double slash "//"
<head>
<script type="text/javascript" src="//fancy_scripts/userHomeController.js"></script>
</head>
(the above doesn't work either, // is the root in MS Windows (I think), but not an Express app) this is a straightforward problem, with I hope a straightforward solution. There might be a better way to do things however.
I have these 3 lines of code already:
app.use(express.static(path.join(__dirname, 'public')));
app.use(express.static(__dirname + '/fancy_scripts'));
app.use('/fancy_scripts', express.static(__dirname + '/fancy_scripts'));
When using express, the path will be routed through one of your declared handlers or via the static module if you've set that up. Normally Express is configured to use static and to map it to your applications public folder. When using the express-generator that folder is located at <approot>/public/. So in order to access something like this:
<head>
<script type="text/javascript" src="/fancy_scripts/userHomeController.js"></script>
</head>
You'll need to put userHomeController in <approot>/public/fancy_scripts/userHomeController.js
I am using express3 and when I'm trying to load my html/javascript/css files it loads the html without the css.
I'm using this code to load the files -
express.get('/', function (req, res) {
res.sendfile("index.html");
res.sendfile("style.css");
res.sendfile("script.js");
});
So what can I do?
First, link the css and javascript to the page via tags in the header of your HTML
<link rel='stylesheet' href='/path/to/style.css' />
<script src='/path/to/javascript.js'></script>
Be sure that you're using the static middleware in your app.use() section, this will tell Express where to find your static files.
app.use(express.static(__dirname + '/public'));
Now, your Express app should serve your static css and js files.
You link to css and javascript from the html page...
Try looking at the static files example app in the express github repo: https://github.com/visionmedia/express/tree/master/examples/static-files
Basically you make another http request for static files (.js, .css)