Can I Prevent Multiple Static directories in Express producing a 404? - javascript

I am attempting to serve files from 2 different folders, the purpose for this is that I would like have my admin and client folders completely separated.
I have the following code to initiate the folders, however as express looks for example.css, if it doesn't find it in the first /static directory, it sends a 404 error and then it does find it in the second directory.
app.use(express.static(__dirname + "/static"));
app.use(express.static(__dirname + "/alternate_static"));
Is there any way I can make it so express doesn't serve the 404 unless it can't find the file in any of the multiple folders or is this a potential issue i should post on the gitHub?
Edit: To try make myself clearer... If I have a directory as follows;
/static
/alternate_static/index.js
and I try load index.js, Express will first look in /static then it will log a 404 error because it cannot find the file, then it will search /alternate_static and it will find the file and proceed to serve the file. I am hoping to stop the first 404 from happening.
EDIT: Solved. it seems that it was some kind of cache issue with the favicon
Thanks

What you have will do exactly what you want.
The way Express' routing logic works is linear: it will simply check matching routes in the order in which they were use'd by your application =)

Related

Next js serve static js files not working

I have this folder structure for my next.js project
/public
|static
-hello.png
|sample
-test.js
|charting_libray
|bundle
-dist.js
|hello.png
In my local environment
http://localhost:3000/static/hello.webp
http://localhost:3000/hello.webp
http://localhost:3000/static/sample/test.js
All of these works. This means JS, Image anything can be served from nested folders or directly from the public folder.
But when I build the project using next build command and deployed it to the production.
mydomain.com/static/hello.webp
mydomain.com/hello.webp
mydomain.com/static/sample/test.js
I have noticed only the images files can be accessed and the JS file returns 404.
My real-world use case is, inside a component I pass the path to a library like this
libraryPath: "/static/charting_library/"
I can see a net::ERR_ABORTED 404 error in the prod env browser console. Somehow the library works even with this 404 error.
But I need to know the reason for this 404 error and need to fix in the code.
Any help!
Thanks in advance.

What aren't my paths working when I change the way I serve my index.html file?

I recently decided to update the way I serve my index.html file from
app.use('/', express.static(__dirname + '/..'));
to
app.get('/', function(req, res) {
res.sendFile(path.join(__dirname + '/../index.html'));
});
Both work fine as they both properly serve my index.html file. However when I switch to using app.get ...
I can no longer get my paths to work in my index.html file.
For example, I have a .svg file inside my index.html file that it serves as follows:
<img src="dist/images/svg/favicon.svg" width="128" height="128">
The request which now fails ( 404 error ) looks like this in the console:
http://localhost:3000/dist/images/svg/favicon.svg
I have tried adding in the root directory as follows:
<img src="ll-server/dist/images/svg/favicon.svg" width="128" height="128">
but this does not help - both give 404 errors.
Why is changing the way I serve my index.html file breaking my paths inside the index.html file?
How can I fix this?
Why is changing the way I serve my index.html file breaking my paths inside the index.html file?
use runs some code for every URL which starts with the specified path. That code (static) looks at the URL, finds a matching file on the specified path, and serves up that file.
get runs some for for a specific URL (at least in this case because you haven’t used * or a parameter) and that code serves up index.html and only index.html.
Your images have stopped working because you removed the code which serves up the the HTML AND the images with code which serves up ONLY the HTML.
How can I fix this?
Put the code back the way it was. The changes you made are not reasonable.
——-
Then fix your security issue.
The directory you are serving your static files from is the parent if the directory your JS module lives in. This means you have given your JS module (and probably all your JS modules) URLs on your webserver.
Don’t expose your server-side business logic.
Change your directory structure. A typical one is:
/ (containing the project)
/src/ (containing the JS)
/static/ (containing the static files)

HTML include js files

I realize this question has been asked many times, however I don't manage to make it working
I have an html file (main.html) that is including two js files (etherjs.js and web3-min.js). These files are in the same directory.
But when requesting the page through localhost node server, the files are not included in the page
What I am doing wrong?
Error of the console (it is saying error loading the eleent which source is:):
I think the problem is with your server.
If you use express:
To serve static files such as images, CSS files, and JavaScript files,
use the express.static built-in middleware function in Express.
Make a folder callled public in the root.
Set it in your server: app.use(express.static('public'));
Put in the files you need eg.: some.js.
Now you can call it with <script src="/some.js"></script>
More information

serving static content in code structure generated by yeoman for angular fullstack

I am following the code structure generated by yeoman for angular fullstack.
I want to include a script called core.js in file called app.html.
<script src="core.js"></script>
I do not see express.static anywhere in this for serving static files.
I tried using it but it did not help.
It can not locate it and gives 404.
How do I get around this ?
It had happened before as well but I could get around it by using express.static and serving files from location pointed by it.
It did not help this time though.
Update:
I have app.html in folder called Music. In same folder, I have a sub folder called js where I have placed my core.js file that is to be included in app.html. I tried to access it using absolute as well as relative path but did not help and still gives 404.
In angular, the scripts go in the relevant subfolder of /scripts. Either in /controllers, /services/, /directives, etc. You then reference them in your html as such:
<script src="scripts/controllers/core.js"></script>
As for express.static, express is a NodeJS wrapper for HTTP. So that will be the service you create that lives on some Node server remotely. express.static allows the Node server to deliver static content files from the file set at the remote server. It does not go in your angular application.

Setting up Yeoman-- multiple bower_components

First time setting up a Yeoman app. I think I understand how bower works... but my app seems to be having trouble finding jquery.js (and perhaps other libraries).
The console message is
Failed to load resource: the server responded with a status of 404 (Not Found) [localhost]/bower_components/jquery/dist/jquery.js
which seems pretty straightforward... it's not linking up properly (duh). I went back into the directory structure of my app, and it looks like there are two /bower_components/ folders.
One of the folders (the one outside of the /app/ directory) only has a jquery folder. The other one (inside the /app/ directory) has all of my libraries and goodies (coffee-script, jquery, ember, etc...).
First: Are there supposed to be two /bower_components/ folders (one for production and one for local perhaps)?
Second: How can I get my app to grab the js from the correct folder?
EDIT:
Please unmark as duplicate. I already saw that question. My .bowerrc file is pointing to the correct directory.
{
"directory": "app/bower_components"
}
You likely have a global .bowerrc. Check for one in ~/, which specifies:
{
"directory": "bower_components"
}
Get rid of that file and see if it helps!

Categories

Resources