Seems crazy that this isn't as easy as it should be.
My file structure:
node_modules/
public/
-- css/
-- js/
-- index.html
In index.html, I try to load a file in a node_module, like so:
<script src="../node_modules/angular-ui-sortable/src/sortable.js"></script>
But, this doesn't work. My error:
SyntaxError: Unexpected Token '<'
I check the resources, and sortable.js is being loaded with the content of index.html. I've seen this issue when the designated javascript file can't be found.
Is this just some wonky issue with nodeJS? Is there some black magic needed to simply load a javascript file into html?
I suspect you're doing something like this:
var express = require('express');
var app = express();
app.use(express.static(__dirname + '/public');
Which would produce the kind of result your seeing. Suggested fix:
add
app.use(express.static(__dirname + '/node_modules');
and change the url to
<script src="/node_modules/angular-ui-sortable/src/sortable.js"></script>
I tried it out and this fix worked for me:
in you app.js in node add this:
app.use('/node_modules',express.static(path.join(__dirname , 'node_modules')));
and in your index.html add this:
<script src="node_modules/<packagename>/<filename>.js"></script>
If you worry about importing unwanted packages from node_models folders you could specify the routing to a specific folder of the desired package. Hope this helps.
Related
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)
Whenever I call my index.html that is served by my node.js server along with my styles, images and script files I get this net::ERR_ABORTED error for my javascript file included in the html.
This is my code in my html file to include my js file:
<script src="../jsfiles/getData.js"></script>
and I'm using this code on my server side to include them:
app.use(express.static(path.join(__dirname, 'pages')));
app.use(express.static(path.join(__dirname, 'styles')));
app.use(express.static(path.join(__dirname, 'images')));
app.use(express.static(path.join(__dirname, 'jsfiles')));
My project structure looks like this:
PongWebServer
-- pages
-- images
-- styles
-- jsfiles
I would appreciate any help, I'm stuck for over an hour now. Thanks in advance.
i don't know in which directory your index file is.
but what i can assume is that your directory may look like,
PongWebServer
-- pages
-- images
-- styles
-- jsfiles
-index.html
If something like this then you have to call your javascript file as
<script src="/jsfiles/getData.js"></script>
While you are using .. will go back to one path and will find for your jsfiles and that will not be thare.
I've just found this weird looking issue. I run my angular app from the local server and gave my index.html file links from directories one level above it and program was unable to find them. My relative path looked like this:
<script src="../scripts/angular.min.js"></script>
Also when I run my app not from a server, just like a regular HTML file paths were correct. Is this a angular rule that files from directories above cannot be linked to the app. Or just I did something wrong?
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 =)
I'm learning node.js using express and have come across a topic thats giving me some trouble. Basically, once the user requests a webpage and the backend sends them the HTML webpage, if I want to include a javascript file to make that HTML page interactive, how would I exactly do that?
My backend looks like this:
var app = require('express')();
var server = require('http').Server(app);
var express = require('express');
server.listen(8080);
app.use(express.static(__dirname + '/views'));
app.get('/', function(req, res){
res.render('index.html');
});
and the HTML it sends looks like this:
<html>
<head>
<meta charset="UTF-8">
<title>WebsiteMainPage</title>
</head>
<body>
<h1>index.html</h1>
</body>
</html>
Do I just add Jquery by linking up the source in the HTML to a public source like this?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
Or do I have to do something special? For that matter how would I add a general javascript file that I wrote, not a library such as Jquery.
Edit: My project structure looks like this:
Project
|
|_____ backend.js
|
|_____ views
| |
| |_______ index.html
|
|_____ static
|
|_______ libs
|
|________jquery-1.12.1.min
Using CDN servers will the best option so that browser will cache your library files. and that will help your clients to reduce their page loading time.
If you want to use your own copy downloaded from your server, create a directory structure for example "static/libs/" and copy the jquery library inside that directory then make it as a static directory by
app.use(express.static(__dirname + '/static'));
then you can refer the jquery from your html page by
<script src="/libs/jquery/1.12.0/jquery.min.js"></script>
You can also make the node_module directory as static then all the node_module will be available to public and you can able to refer the jquery file from client side.
in a comment I saw that you have mentioned about npm jquery.
When you do npm jquery, jquery will be installed as a node module and it will be available in node_module directory and using require('jquery') you can use jquery modules in the server side only. If you want to use the require('jquery') method in the client side you have to use requirejs or webpack etc .
Dear,
it's so simple just include the jquery file by using
<head><script src="/pathto/jquery.min.js"></script></head>
OR
add CDN in head tag of your index.html file
Create A folder named 'public' within root folder of your app.
Inside 'public' folder create 'js' name folder
Keep all js file within 'js folder'
Make changes in your app.js file like such
app.use(express.static(path.join(__dirname, 'public')));
Now just go to you index file and add CDN or your jquery file normally in HTML head tag.
Thanks & Cheers :)