We Keep Coding

How can i connect downloaded js library(leaflet.js) on pages in my laravel project?

My problem is what i don't know how to connect js library leaflet.js( it downloaded and located in node_modules) on page with map in my laravel project. leaflet's site says that i should add
<link rel="stylesheet" href="/path/to/leaflet.css" />
<script src="/path/to/leaflet.js"></script>
and write path to library in these src's, but i don't know how to get it, i've tryed to do some operations with laravel mix but it didn't helped me(or i did something wrong, idk)

There are many ways to add the CSS and js file. In you downloaded a full zipped folder then out it to public folder with the name leaflet.Then Add the following code :
<link rel="stylesheet" href="{{ asset('leaflet/to/leaflet.css')}} " />
<script src="{{ asset('leaflet/to/leaflet.js') }} "></script>
Next, if you can be downloading through the following command:
npm install leaflet
Then add required within your resources/js/bootstrap.js file.
require("leaflet");

JS files not loading using Webpack, Laravel Mix in Laravel 8

I'm new to Laravel and I'm trying to compile and upload my resources using Laravel Mix.
mix.js('resources/js/app.js','public/js')
.js('resources/js/users.js','public/js')
.sass('resources/sass/app.scss', 'public/css')
.css('resources/css/myStyle.css','public/css/myStyle.css')
These resources compiled successfully; in my users.js file, I have a JS script function that alerts some text on button click. In my Blade layout, I'm importing files like the following.
<!-- Scripts -->
<script src="{{ mix('js/users.js') }}"></script>
<!-- <script src="{{mix('/js/NotResourced.js')}}"></script> -->
<script src="{{ mix('js/app.js') }}"></script>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="{{ asset('css/myStyle.css') }}" rel="stylesheet">
I understand that Mix compiles the resources and puts them in the public directory so the browser can read them. But when I inspect my loaded files in the browser, the users.js is not among them. I've changed the order in which the files are loaded, but it didn't work. What I noticed is that in my Blade layout, I'm placing them in an HTML head tag. So I changed the position of the script file to before the body close tag position. However, when I inspect my loaded files on the browsers, the app.js file has existed, but the HTML head tag and users.js are not there.
Am I doing anything wrong here? And please, what's the proper way to get this done?

I've found what solved my issue, and the answer as follow :
Use scripts() method to minify any number of JavaScript files on webpack.mix.js file
like this
mix.scripts([
'public/js/admin.js',
'public/js/dashboard.js'
], 'public/js/all.js');
this is a proper way to compile your JS asset .

404 error for bootstrap.min.css and bootstrap.min.js

I'm building a website and trying to use Bootstrap, however I'm unable to successfully call bootstrap.min.css and bootstrap.min.js.
I have Bootstrap unzipped in a new folder titled "Bootstrap" in my htdocs folder. In my Bootstrap folder I created a new folder to house my code for my website since this, in terms of organization, would be a lot easier. I also specified in my .html file to look for "bootstrap.min.css" and "bootstrap.min.js" in the following filepath in htdocs:
Folder Structure:
Bootsrtap folder with css, fonts, js, myWebsite subfolders, and test.html.
myWebsite folder with test.html
HTML (this is the test.html file in my "myWebsite" folder):
<!-- Bootstrap -->
<link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet">
and
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="Bootstrap/js/bootstrap.min.js"></script>
I tried running the example code off of Bootstrap's website and am getting a 404 Error for both of those files.
Since creating a new folder and then specifying the href wasn't working, I tried putting the sample code from Bootstrap's website directly into my "Bootstrap" folder and when I do this it works perfectly.
HTML (this is the test.html from the "Bootstrap" folder):
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
and
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
I think there is something with the filepath I specified but I've been unable to get it to work after working on it for the first half of the day. What I'd really to know is how do I correctly call the "bootstrap.min.css" and "bootstrap.min.js" files while still maintaining my current folder structure? Any help/advice will be greatly appreciated.
Thanks

The paths for files are relative to your html file. For your test.html located in the Bootstrap directory you can access them by pointing at css/bootstrap.min.js and js/bootstrap.min.js. For your test.html located in the Bootstrap/myWebsite directory you can access them by pointing at ../css/bootstrap.min.js and ../js/bootstrap.min.js. The "../" will traverse up one directory into the parent of the current directory.

All your 'src' locations need a leading slash to indicate that the path is relative from the root folder (and not the current directory).
So your bootstrap location is like this:
src="Bootstrap/js/bootstrap.min.js"
Without a leading / character, the browser will append the src location to the current href location. For example, if the requesting page was at:
http://example.com/mydir/test.html
Then the browser would look for the bootstrap url at:
http://example.com/mydir/Bootstrap/js/bootstrap.min.js <<< note mydir here!
In most cases, you want to reference files from the root directory so that they don't change when you navigate to a page in a different directory. Your src location would look like this:
src="/Bootstrap/js/bootstrap.min.js"
When you have a leading forward slash, the browser ignores the current directory and assumes that the url is referenced from the root folder of your website (ie http://example.com/).
This would give an effective url for the browser to look up as follows:
http://example.com/Bootstrap/js/bootstrap.min.js
Which would be the correct one.
In summary, simply add '/' to all your paths and they will then be referenced from the root of your website and remain consistent whatever page/directory you happen to be on.

<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

Just copy the original js and assets folder from the source code downloaded directory, and place them inside your directory where the index.html file resides. restart the webserver if necessary to reflect the changes. This worked for me :)

I had the same problem when using these lines
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
I have changed them to:
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
I got rid of that error now. I hope this is helping.

404 error while import js file from another folders in index.html in nodejs + Ionic app

I have error and am trying to solve it for hours.
My file structure:
-/node_modules
-/www
---bundle.js
---index.html
in index.html I have such code
<script src="node_modules/ng-cordova/dist/ng-cordova.min.js" type="text/javascript"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="bundle.js"></script>
Problem is bundle.js is included fine, but ng-cordova.min.js gives 404 error
Cannot GET /node_modules/ng-cordova/dist/ng-cordova.min.js
Edit: I also tried this without success
<script src="/node_modules/ng-cordova/dist/ng-cordova.min.js" type="text/javascript"></script>
<script src="../node_modules/ng-cordova/dist/ng-cordova.min.js" type="text/javascript"></script>
I don't use express or express.static.

Judging by your project structure I'm betting that it is powered by Express.js. I'm also betting that the www folder was set as a static folder in the express app like this:
app.use('/', express.static(path.join(__dirname, www)));
In which case your server will only serve files located in the www folder. You need to include any client dependencies in the www folder:
-/node_modules/
-/www/
--lib/
---ng-cordova/
--bundle.js
--index.html
And then load them like so:
<script src="lib/ng-cordova/dist/ng-cordova.min.js" type="text/javascript"></script>
UPDATE
Simply put node_modules inside the www folder, it should work fine.

The problem here is that you try to load your ng-cordova.min.js file from the index.html folder.
You should change:
<script src="node_modules/ng-cordova/dist/ng-cordova.min.js" type="text/javascript"></script>
For this:
<script src="../node_modules/ng-cordova/dist/ng-cordova.min.js" type="text/javascript"></script>

You are trying to load the file from the wrong directory.
You either have to use this path:
src="../node_modules/
or this:
src="/node_modules"
in case the above directory is your root directory.
What's also confusing is that the line you commented the error in is not the line the error actually comes from. Why are you trying to link to the file twice?
//Edit: As Romain was a minute faster than me he deserves the right answer reward I'd say :P Only if it actually solves your problem ofc :D

files not recognised BUT in same folder

I have three files in my templates folder wheree there is also my main.html file. However when I load the html file I get a 404 error for these 3 files. This is how I've included them in the head of the html:
<script type="text/javascript" src="date.js"></script>
<script type="text/javascript" src="daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="daterangepicker.css" />
They are all located in a templates folder in the same folder as my main.html.
Why aren't they being recognised?
Thanks

Your local paths are not resolving correctly. Without seeing your directory structure I can't say for sure exactly where things are going wrong -- I'm a little confused as to where main.html and base.html are residing.
If main.html is the file being loaded in the browser, your script sources should be based off that directory. If your template directory (we'll call it 'templates') is a child of the directory where main.html resides, you want:
<script type="text/javascript" src="templates/date.js"></script>
<script type="text/javascript" src="templates/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="templates/daterangepicker.css" />
Alternatively, you could just resolved your entire URL to the appropriate path:
<script type="text/javascript" src="http://www.myurl.com/templates/date.js"></script>