I'm trying to serve static files from Node.js the only problem I'm having, is if I keep going into sub paths, like so:
localhost:3000/foo/bar/baz/quux
Then I have to step up the same amount of times, like this:
../../../../public/javascripts/whatever.js
As you can see that gets really annoying, is there a way to make Express v3 just know so that I can just do /public/javascripts/whatever.js instead of having to step up? Thanks in advance
This is my current static middleware for Express`
app.use("/public", express.static(__dirname + '/public'));
If you reference your static files from the root (i.e. src='/some/path/to/file.js'), the url should not matter.
Example Website using Static Routing
Directory Structure
/public
/css/style.css
/js/site.js
/vendor/thoughtbrain/js/awesome-town.js
/views/view.html
/app.js
view.html
<!DOCTYPE html>
<html>
<head>
<!-- These files are served statically from the '/public' directory... -->
<link href="/css/style.css" rel="stylesheet" >
<script src="/js/site.js"></script>
<!-- ... while this is "mounted" in virtual '/public' -->
<script src="/public/js/awesome-town.js"></script>
</head>
<body><p>Express</p></body>
</html>
app.js
var express = require('express'),
http = require('http'),
path = require('path'),
app = express();
// Remember: The order of the middleware matters!
// Everything in public will be accessible from '/'
app.use(express.static(path.join(__dirname, 'public')));
// Everything in 'vendor/thoughtbrain' will be "mounted" in '/public'
app.use('/public', express.static(path.join(__dirname, 'vendor/thoughtbrain')));
app.use(express.static(path.join(__dirname, 'views')));
app.all('*', function(req, res){
res.sendfile('views/view.html')
});
http.createServer(app).listen(3000);
With this application running,
http://localhost:3000
and
http://localhost:3000/foo/bar/baz/quux
both serve view.html and all referenced assets resolve.
Express Framework has a section on the use of static middleware here.
With that static() configuration, Express is already at least capable of finding /public/javascripts/whatever.js.
Though, it does depend on whether your public folder is in the same directory as your script (due to the use of __dirname when specifying the path).
If it is, the URL prefix /public should map to the file-system prefix of ./public (with . being __dirname) so that:
A URL of `/public/javascripts/whatever.js`
Maps to `./public/javascripts/whatever.js`
Related
Beginner here, please point me in the right direction! So, I used express static and can see all my static files correctly in "sources" and the CSS applies via localhost:5050. However, when I directly open my endpoint e.g. http://localhost:5500/users, I cannot see the files anymore and no more CSS is applied. I wrote requests for each specific endpoint too, of course. Does this have anything to do with the way I serve static files in my code? I can't for the life of me figure out why there are no errors in the console and network tab but the styles do not apply and the classes set in my script also do not show up via the elements page in the dev tools when I open any of my endpoints. What could be the problem if everything is working via index? Do I need to configure static files for each API endpoint somehow too?
note: I also console.logged the path and could see the path is correct - / also serves the static files correctly so I assume the issue lies somewhere else? I also tried app.use('/users',express.static(path.join(__dirname, '..', '..', 'public')));
and could then see all static files via that endpoint but the whole endpoint functionality I set later in the code broke & app.use(express.static(path.join(__dirname, '..', '..', 'public'))); should normally allow public folder access from all endpoints, right?
HTML tags:
<link rel="stylesheet" href="/css/style.css" type="text/css">
<script src="./js/bundle.js"></script>
--> also tried with js/bundle.js & other paths.
server.js:
import express from 'express';
import path from 'path';
import axios from 'axios';
const __dirname = path.dirname(new URL(import.meta.url).pathname);
const app = express();
const port = 5500;
// Serve static files from the public folder
app.use(express.static(path.join(__dirname, '..', '..', 'public')));
// Route for serving the index.html file
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, '..', '..', 'public', 'index.html'));
});
app.listen(port, () => {
console.log(`Server listening on port ${port}`);
});
This is my folder structure:
public/
index.html
css/
style.css
js/
bundle.js
src/
client/
script.js
server/
proxy.js
server.js
When you use code like this:
app.use(express.static(path.join(__dirname, '..', '..', 'public')));
Means that every request goes through express.static middleware.
Static middleware get path from the URL and tries to match a static file in public directory to this path. Let's consider several examples:
GET https://localhost:5500/foo/bar.html -> would be converted to /public/foo/bar.html
GET https://localhost:5500/ -> public/index.html
GET https://localhost:5500/users/ -> public/users/index.html
If you replace app.use(express.static(...)) on app.use('/users', express.static(...)) then express.static would be called only on /users/... requests:
GET https://localhost:5500/foo/bar.html -> not called
GET https://localhost:5500/users/ -> public/index.html. Note, /users prefix is removed when express.static convert URL's path to file path.
So this should explain:
I also tried app.use('/users',express.static(path.join(__dirname, '..', '..', 'public'))); and could then see all static files via that endpoint
Goes next:
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, '..', '..', 'public', 'index.html'));
});
applies only on / request, so if you make request on /users express returns 404. If you want fallback on index.html every request that didn't match any previous middleware you should use:
app.use((req, res) => {
res.sendFile(path.join(__dirname, '..', '..', 'public', 'index.html'));
});
And the last ./js/bundle.js:
<script src="./js/bundle.js"></script>
this is relative URL it means if you open page /users/index.html and render such HTML then browser will make request on /users/js/bundle.js. In you case I guess you want to make request always on /js/bundle.js so you should replace it on absolute path /js/bundle.js like you did for CSS
I am building a website and using an express.js server to capture information submitted through a form. Before setting up the server I already had the site built, using static js and css files. After connecting to the server, I was able to get the server to render the html and css stylesheet. But it won't show the vanilla js I had already coded. I only want to use the server for the form and have the vanilla javascript still render like before connecting to the server.
I have the files set up as:
root
index.html
app.js
public
css
styles.css
javascript
index.js
app.js
const express = require("express");
const https = require("https");
const path = require('path')
const app = express();
app.use(express.static(path.join(__dirname, '/public')));
app.use(express.urlencoded({ extended: false }));
app.use(express.json());
app.get("/", function (req, res) {
res.sendFile(__dirname + "/index.html");
});
index.html
<link rel="stylesheet" href="css/styles.css" />
<script src="javascript/index.js"></script>
What am I doing wrong here? Is there something I need to code in my index.js file to get it to connect to the server? Thanks in advance.
1. Add this middleware in the app.js
app.use(express.static(path.join(__dirname, "public")));
2. Folder Structure
|__public/
|__ css/
|__ css files...
|__ js/
|__ js files...
3. Import this way
Now you set the path to the public directory you have to give the path public folder when you import
<link rel="stylesheet" href="/css/main.css" />
<script src="/js/main.js" crossorigin="anonymous"> </script>
You should now be all set up to access CSS or JS files
My express app serves an HTML page from my disk upon the initial GET (i.e., if I hit "http://localhost:3000/" in the browser). Now I would like to access a JavaScript file which is in the same location in the disk as the HTML file. When I try to include it in 'index.html' by using
<script src="/myJavaScriptFile.js" type="text/javascript" ></script>
or
<script src="./myJavaScriptFile.js" type="text/javascript" ></script>
or
<script src="~/MyAbsolutePath/myJavaScriptFile.js" type="text/javascript"</script>
it doesn't work. The myJavaScriptFile.js file is never reached.
My express app looks like this:
var express = require('express')
var testMethod = require('./test')
var app = express()
app.use(bodyParser.urlencoded({ extended:false }));
var server = app.listen(3000, function () {
var host = server.address().address
var port = server.address().port
console.log('Example app listening at http://%s:%s', host, port)
})
app.get('/', function (req, res) {
console.log('In /');
res.sendFile(__dirname + '/index.html');
})
Express app is serving 'index.html' using the reference path '__dirname' + '/index.html' using res.sendFile function. (I am beginning to feel that this is a bad way of doing it. Please let me know if you think so too).
Also as we can see in the express app, an external JavaScript file called 'test' which is in the same location as 'index.html' and 'express.js' is being included without any issues. Could anyone please shed light on what's actually happening in the background? What exactly would be reference path for the JavaScript file that I can give in my 'index.html' if it is being served by express app? Thank you.
Serving files, such as images, CSS, JavaScript and other static files is accomplished with the help of a built-in middleware in Express - express.static.
Pass the name of the directory, which is to be marked as the location of static assets, to the express.static middleware to start serving the files directly. For example, if you keep your images, CSS, and JavaScript files in a directory named public, you can do this:
app.use(express.static('public'));
Now, you will be able to load the files under the public directory:
http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/app.js
http://localhost:3000/images/bg.png
http://localhost:3000/hello.html
More Detail Here
Happy Helping!
I have the following code:
var express = require('express');
var app = express();
var server = require('http').Server(app);
app.get('/', function(req,res){
res.sendfile(__dirname + '/index.html');
});
server.listen(3000);
However, only my index.html page displays, and I have a GET error for my other files. When I load index.html at localhost:3000, I have errors in the console with trying to find my main.js and app.css files. Even when I include my other files as a src in the html file, they are not able to load. I think this may be because I am only sending the single html file to the server. How can I handle this so that all of the relevant files are sent to the server?
Using
res.sendfile(__dirname + '/index.html');
in response to a get request won't serve up all your static files, only the individual index.html file — meaning your css and javascript files will not be found by your server (even when you link to them in your html).
You need to use the included express static middleware (the only included middleware in express v4).
If your static files are in the same directory as your server.js file then add
app.use(express.static('.'));
This serves up all of your local static files and makes them accessible on your server.
I wrote a blog post on this a while back:
https://medium.com/#willsentance/how-to-avoid-main-js-style-css-not-found-or-how-i-learned-to-love-serving-static-files-with-node-2121255da0fd
You haven't offered a route to the linked files.
Use the static middle-ware: http://expressjs.com/api.html#express.static
From the docs:
Following are some examples of using the express.static middleware in an Express app.
Serve static content for the app from the "public" directory in the application directory.
// GET /style.css etc
app.use(express.static(__dirname + '/public'));
Mount the middleware at "/static" to serve static content only when their request path is prefixed with "/static".
// GET /static/style.css etc.
app.use('/static', express.static(__dirname + '/public'));
Disable logging for static content requests by loading the logger middleware after the static middleware.
app.use(express.static(__dirname + '/public'));
app.use(logger());
Serve static files from multiple directories, but give precedence to "./public" over the others.
app.use(express.static(__dirname + '/public'));
app.use(express.static(__dirname + '/files'));
app.use(express.static(__dirname + '/uploads'));
I think this is probably just a misunderstanding of how to do this on my part but its bugging me and I haven't found anything to answer the problem.
I have a static site where my file structure is
--node_modules
--index.html
--server.js
--app.js
my server.js is simple its just
var express = require("express");
var cors = require("cors");
var app = express();
app.use(cors());
app.use(express.static(__dirname + '/'));
app.get('/question', function(req, res){
res.send(req.body);
});
// Start the server on port 3000
app.listen(process.env.PORT || 3000);
// Print out a nice message so you know that the server started
console.log('Server running on port 3000');
and my bootstrap and angular WORKS...your probably wondering what the problem is....
So I have a 2nd site and I building and thought I would organize my stuff a little better. My file structure is
--node_modules
--public
|---index.html
|---app.js
--server.js
The only difference in my server.js is
app.use(express.static(__dirname + '/public'));
my bootstrap and angular is referenced in index.html like
<script src="../node_modules/angular/angular.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
This DOESN'T work!...now I know I could just do it the first way or use a CND but I was wondering if anyone could educate me as to why and what I am doing wrong.
All help and education is greatly appreciated.
Angular and Bootstrap probably shouldn't be in node_modules unless you are using Browserify. Express won't serve any static files that aren't under the express.static root, so you can't use ../ relative paths if they go higher than public/.
That is, you need to move everything that you want to be public somewhere under public/ including index.html and the JavaScript libraries you will use.