Develop Reference

net::ERR_ABORTED 404 (Not Found) Laravel 8 HELPPPP

I'm calling the files as follows
<link href="{{asset('assets/css/themes/layout/header/base/light.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/css/themes/layout/header/menu/light.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/css/themes/layout/header/menu/light.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/css/themes/layout/brand/dark.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/css/themes/layout/aside/dark.css')}}" rel="stylesheet" type="text/css" />
and
<script src="{{asset('assets/custom/js/bootstrap-datepicker.min.js')}}"></script>
<script src="{{asset('assets/custom/js/bootstrap-timepicker.min.js')}}"></script>
the app.blade.php file is on the way: resources\views\Backend\layout
I've already used the commands below that solved some files in the folder auth
composer require laravel/ui --dev
php artisan ui bootstrap
php artisan ui bootstrap --auth
npm install
npm run dev
but it doesn't work to tidy up the files on the other pages, such as views, which is where I'm having problems.
does anyone here have the solution???? help me please.

Move your assets folder into your public folder.

Laravel 7.6.2 app.js error app.js:3449 Uncaught TypeError: Cannot convert object to primitive value

I using Laravel 7.6.2 as mentioned, and I keep getting the error in browser console as shown in picture below when I click on my navbar toggle button.
Here is the css and script files used:
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<!-- <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet"> -->
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght#0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap.min.css')}}">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="{{ asset('css/jomkurus.css') }}" rel="stylesheet">
<!-- Plugins -->
<script src="{{asset('fontawesome/js/all.js')}}"></script>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
Thank you for your advice in advance.

I have found the root cause of this issue, seem like it is because of the jQuery 3.5.0 version issue. At this moment, the solution is downgrade jQuery to 3.4.1 version. The discussion can be found here. github.com/twbs/bootstrap/issues/30553 I have tried it and it works!

jQuery released 3.5.1, that fixed this bug (jQuery blog).
You can update this module in your project:
npm install jquery#3.5.1
npm run dev

main.css file not loading

Introduction
I have two domains, http://mauricevandorst.com/ and http://tacticalmotion.nl/.
What do I want
I want the website https://mauricevandorst.com/personal-page/index.html to be the same website as http://tacticalmotion.nl/personal-page/index.html. The files and paths are exactly the same, so it should work but unfortunately it does not..
The issue
On my domain, mauricevandorst, the .css files load perfectly.
On my other domain, tacticalmotion, the .css files do not load at all.
To load the .css files in my Index.html I use the following code:
<!-- Custom Theme CSS -->
<link href="css/main.css" rel="stylesheet">
The CSS files I use can be found here:
main.css - bootstrap.css - bootstrap.min.css
Extra information
I have found out that when loading http://www.mauricevandorst.com/personal-page/index.html (http instead of https) gives the mistake too. Could it possibly be an SSL certificate that misses?

The thing is, since your website is in HTTPS you can't load HTTP content.
MDN Link
The best shot you've got is simply to use https CDN especially for bootstrap
Juste have a shot with thoose url.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

yeoman webapp: Minified JS for multiple HTML pages

I'm playing around with the yeoman webapp generator and want to have multiple minified JavaScript files for my individual subpages for my page. However, the webapp concats all JavaScript files to one "big" main.js which does not match my setup.
In my setup, main.js is supposed to be some kind of common JavaScript file for all pages but each page should have an additional JavaScript file with stuff that only relates to this page. E.g.
index.html -> uses main.js
subpage1.html -> uses main.js and subpage1.js
subpage2.html -> uses main.js and subpage2.js
The result from gulp build is a big main.js that contains the main.js, subpage1.js and the subpage2.js which leads to errors: if I open subpage1.html, subpage2.js (the one that is included in the big main.js) might try to access HTML nodes that only exist on subpage2.html but not on subpage1.html.
E.g.:
subpage1.html includes the big main.js with subpage2.js
<script src="scripts/main.js"></script>
which contains subpage1.js AND subpage2.js, however if I do the following in subpage2.js
$('#IdThatOnlyExistsOnSubPage2').someMethod(...)
this fails of course.
How do I have to adjust the Gulpfile to solve this problem?

JS and CSS builds are generating with uglify (formerly known as usemin) you could find more advanced options and features from their documentation but I think you should separate build block by your needs.
If you have a common JS file for every page, you have to put them together for each pages and create new block for page specific files.
Here is example.
<!-- build:js scripts/main.js -->
<script src="config.js"></script>
<script src="app.js"></script>
<!-- endbuild -->
<!-- build:js scripts/page-dashboard.js -->
<script src="dashboard-charts.js"></script>
<script src="dashboard-widgets.js"></script>
<script src="dashboard-main.js"></script>
<!-- endbuild -->
Also you could do same thing for CSS file builds.
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="app.css">
<!-- endbuild -->
<!-- build:css style/page-dashboard.css -->
<link rel="stylesheet" href="dashboard-charts.css">
<link rel="stylesheet" href="dashboard-widgets.css">
<link rel="stylesheet" href="dashboard-main.css">
<!-- endbuild -->

Error in linking to Css and js file in index.html

I want to link my css file in my index.html file. The structure of my project is:
MyWeb
Views
-> index.html
css
-> style.css
js
->jQuery.js
I tried the following relative href links but nothing worked.
<link href="../css/style.css" rel="stylesheet">
<link href="./css/style.css" rel="stylesheet">
<script src="../js/jQuery.js"></script>
Here is the link to the website hosted locally: http://127.0.0.1:5000/

Try <link href="/css/style.css" rel="stylesheet">
its relative to the root

Remove ../ in href
<link rel="stylesheet" href="css/style.css" type="text/css" />

The html files are dynamic if you are using Flask Framework. Try something like:
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
Found here: Flask framework intro

assuming your folder structure is as follows
your app
templates
static
style.css
app.py
or you can also do it like this
<link rel="stylesheet" href="/static/style.css" type="text/css" />