HTML include js files - javascript

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

Related

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)

Laravel files/folders not showing up in Public directory

I want to integrate TradingView's charting library in my Laravel project.
I have copied the charting_library folder to the Public folder of Laravel.
After that, I have referenced the charting_library.min.js file from Blade files in view and the other resources related to it.
<script type="text/javascript" src="{{ asset('tradingview/charting_library/charting_library.min.js') }}">
All js files loads successfully, but the problem is that this charting_library.min.js calls an HTML file from a subdirectory where it returns a 404 Not Found error.
http://localhost:8000/charting_library/static/fa-tv-chart.37***ee.html 404 (Not Found)
Here is the file/folder structure:
I have checked loaded resources from chrome's dev tools.
Laravel loads these referenced JS files, but it doesn't load any other files which these files have requested and just returns 404.
The charting_library folder exists in the directory, it's just something related to Laravel. I think it can't see the directory's contents.
I have tried to modify the .htaccess file but still no luck.
I even tried to mix charting_library.min.js via Webpack, changing autoload, but still, nothing happens.
I solved this issue by:
Moving the project to wamp's www folder.
Moving charting_library and datafeeds folder to the root of laravel's public. It seems
tradingview's widget constructor uses relative path's for building
whole chart. So when you place the charting_library inside a folder,
it doesn't resolve other assets. These folders should be exactly in
the root.

Jquery not working from local disk

Description
Jquery is not working from local disk -using a downloaded copy of any jquery version does not work ok.
it works ok from ref links over the internet.
per jquery documentation - it is suppose to work from local disk as well
(i.e script src = "local path"...).
my code works fine with reference external links to jquery lib (versions 2.2.4 , 3.2.1 ) no problem
whenever i try to fallback or just use the local downloaded file for the same version it fails!
the relevant code is
<script src async = './jquery-3.2.1.min.js'></script>
or just
<script src = './jquery-2.2.4.min.js'></script>
and i tried several other workarrounds including pasting the whole file into my html as script) none worked neither on chrome nor firefox windows 7-8 node-8.9.1
tried similar to the following as well:
<script>window.jQuery || document.write('<script src="jquery-2.2.4.min.js"><\/script>')</script>
error message is:
detailed error: ReferenceError: $ is not defined
detailed error: TypeError: pageExecute is undefined
one suggested solution is: use dev server.
what is dev server and why needed? means what? so i can not just use the local copy of jquery lib?
node.js does not serve ANY files by default (unlike some other web servers). So, if you want the jQuery file to be served by your own web server, then you need to create a route that serves that file or use something like express.static() that serves multiple files.
Since your web URL is http://localhost:6060/example1, you are loading the web page through your own web server. Therefore any script tag such as:
<script src="jquery-2.2.4.min.js"></script>
will be requested form your own web server as:
http://localhost:6060/jquery-2.2.4.min.js
If you don't have a route defined for that specific URL in your node.js server, then you will get an error. If you are using Express in your node.js server, then you either need something like:
app.use(express.static("/someDirPath"));
to create a middleware handler that will automatically look in /someDirPath for files that are requested. Or, you need to make specific routes for files you want to serve:
app.get("/jquery-2.2.4.min.js", function(req, res) {
res.sendFile("/somePath/jquery-2.2.4.min.js");
});
In my design projects, I make a URL distinction between static files and dynamic routes. I use /public at the beginning of the URL path for any public resource as this makes it simple to distinguish which request is for a static resource and which is for a dynamically served route. So, in my script file, I'd use:
<script src="/public/js/jquery-2.2.4.min.js"></script>
And, then on my server, I'd use:
// serve static resources from the public directory below our project
app.use(express.static("/public", path.join(__dirname, public)));
And, then I'd have a directory structure of public static files:
myAppDir
various server files
- public
- js
- css
- img
Issue with file path
If both js and html file in same folder then use:
<script type="text/javascript" src="jquery-2.2.4.min.js"></script>

ERROR:tornado.general:Could not open static file

I'm writing a tornado web app and have a file named "static" with files such as main.js, require.js, elasticsearch.js, and d3.v3.js. The last three are just source code for the javascript libraries.
In my index.html file I have the lines
<script>src={{ static_url("scripts/require.js") }}></script>
<script>require([{{ static_url("scripts/main.js") }}], function () {})</script>
Now when I run the app, I get two errors:
ERROR:tornado.general:Could not open static file '...'
for each of my two files that I'm reading in. Has anyone ever had a similar issue or have any insights as to why this is happening?
Are the js files directly in the static directory or in a scripts subdirectory? Assuming you did something like static_path="static" when creating the application, the files need to live in static/scripts/*.js to match the paths you use in your static_url call.

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.

Categories

Resources