Linking external script in VueJS webpack generated template - javascript

I have a VueJS webpack generated project in which I want to link the jQuery & Bootstrap libraries. I've downloaded the sources and want to link the JS & CSS into my HTML file like so:
<script src="/assets/js/jquery-3.2.1.min.js"></script>
The HTML file is in the same folder than the assets folder.
My problem is that the script doesn't load and I have this error:
"Failed to load resource: the server responded with a status of 404 (Not Found)"
None of the solutions I found for this problem leaves me satisfied, people use another file containing some sort of module declaration, but I think it's a bit overkill to have such files when it's only for linking a script file into an HTML file...

So the index.html is in the assets folder?
Won't it just be this then:

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.

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.

App can't find plugin file

I am trying to load insert this library into my ionic project: https://www.npmjs.com/package/ionic-native-transitions.
I ran the command to install the plugin:
ionic plugin add https://github.com/Telerik-Verified-Plugins/NativePageTransitions
I then inserted the dependency into my code, but it didn't work and reading this issue https://github.com/shprink/ionic-native-transitions/issues/29 I found out I needed to insert the script into my project so...
I have an index.html file located in:
frontend/www/index.html.
I have a js file I need located in:
frontend/node_modules/ionic-native-transitions/dist/ionic-native-transitions.js
I need to use this javascript file inside of my index.html file so I include it into my header:
<script src="../node_modules/ionic-native-transitions/dist/ionic-native-transitions.js"></script>
Inside of my IDE it says the path is valid and I can go to the declaration of this file inside of my IDE.
When I run the application, I get the following output in my console:
Failed to load resource: net::ERR_FILE_NOT_FOUND `file:///android_asset/node_modules/ionic-native-transitions/dist/ionic-native-transitions.js`
I am unsure why this is happening. How could I insert this script into my code then?
Turns out it is a problem with the plugin. I followed this tutorial now and I got it working: http://www.gajotres.net/handling-native-view-animations-with-ionic-framework/. There is no requirement to load any scripts.

Failed to load resource error when loading external scripts

I'm trying to load external scripts from a folder into my createnew.html file and I keep getting this error saying it cannot be found:
Failed to load resource: the server responded with a status of 404 (Not found)
I'm trying to load the scripts in the head of my code, like this:
<head>
<!--C3 CSS script-->
<link href="./scripts/c3.css" rel="stylesheet" type="text/css">
<!--C3 JS script-->
<script src="./scripts/c3.min.js"></script>
</head>
My files are arranged like this:
->public
->views
-createnew.html
->scripts
-c3.css
-c3.min.js
Please help me understand why this doesn't work.
As this question became more popular than expected, I decided to point other problem-havers in the right direction:
Let's say you have organized your files like this:
- server.js
-> MyWebsite(folder)
- index.html
-> js(folder)
- myscript.js
The paths you use are relative to the "working directory" you are in.
When not using a server, and only developing websites locally on your computer, this working directory will be the relative path from your index.html file to your scripts. In this case it would be ./js/mysript.js.
When using a server you need to tell it where this working directory is. In the case of Node.js you would do something like this app.use(express.static('./MyWebsite')) and your js files would be referenced by /js/myscript.js
Notice that when loading from a server you prefix with / instead of ./ since the / really is just a part of the URL to your file hosted by your server, while ./ is specific to the file system.
Change
"./scripts/c3.css"
to
"scripts/c3.css"
You can refer to this question about the relative path of files in HTML.
To refer to the current folder,
./ works only in non-strict doctype mode, while . works in both modes.
So you may try "scripts/c3.css" instead of "./scripts/c3.css"

ckeditor - site won't pick-up ckeditor.js

Trying to include CKEditor in my project but I keep getting a 404 (Not Found) error. The CKEditor I'm using is a freshly downloaded standard package version 4.4.2. Does anyone know why my site is not able to pick-up CKEditor? I'm not even trying to replace a textarea id with a CKEditor instance yet. I created a test directory with a test javascript file in the same position and those get picked-up fine. Is it because my project files are in php?
My directory listing looks like this:
-westpoint (root)
-ckeditor (contains all ckeditor files)
-ckeditor.js
-ck (test folder)
-ck.js (test js file)
Script elements in my head:
<script src="/ckeditor/ckeditor.js"></script>
<script src="/ck/ck.js"></script>
Error in console:
GET http://www.qds2013.ca/ckeditor/ckeditor.js 404 (Not Found)

Categories

Resources