See Including css files. I slightly edited the code of the public/index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required Meta -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Title For This Document -->
<title> Karte - Multipurpose E-Commerce Html Template</title>
<!--<base href="/">-->
<!-- Favicon For This Document -->
<link rel="shortcut icon" href="../src/assets/images/logo/favicon-32x32.png" type="image/x-icon">
<!-- Bootstrap 5 Css -->
<link href="../src/assets/css/bootstrap.5.1.1.min.css">
<!-- Google fonts -->
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<!-- FlatIcon Css -->
<link href="../src/assets/fonts/flaticon.css">
<!-- Slick Slider Css -->
<link href="../src/assets/css/plugin/slick.css">
<!-- Ui Tabs Css -->
<link href="../src/assets/css/plugin/jquery-ui.min.css">
<!-- Magnific-popup Css -->
<link href="../src/assets/css/plugin/magnific-popup.css">
<!-- Nice Select Css -->
<link href="../src/assets/css/plugin/nice-select.v1.0.css">
<!-- Animate Css -->
<link href="../src/assets/css/plugin/animate.css">
<!-- Style Css -->
<link href="../src/assets/css/style.css">
</head>
<body class="shoe">
<!-- ==========Preloader========== -->
<div class="loader"><span>Karte...</span></div>
<!-- ==========Preloader========== -->
<!--===scroll bottom to top===-->
<a href="#0" class="scrollToTop"><i class="flaticon-up-arrow"></i></a>
<!--===scroll bottom to top===-->
<div id="app"></div>
<!--==== Js Scripts Start ====-->
<!-- Jquery v3.6.0 Js -->
<script src="assets/js/jqurey.v3.6.0.min.js"></script> <!-- Popper v2.9.3 Js -->
<script src="assets/js/popper.v2.9.3.min.js"></script> <!-- Bootstrap v5.1.1 js -->
<script src="assets/js/bootstrap.v5.1.1.min.js"></script> <!-- jquery ui js -->
<script src="assets/js/plugin/jquery-ui.min.js"></script> <!-- Parallax js -->
<script src="assets/js/plugin/jarallax.min.js"></script> <!-- Isotope js -->
<script src="assets/js/plugin/isotope.js"></script> <!-- Slick Slider Js -->
<script src="assets/js/plugin/slick.min.js"></script> <!-- magnific-popup v2.3.4 Js -->
<script src="assets/js/plugin/jquery.magnific-popup.min.js"></script> <!-- Tweenmax v2.3.4 Js -->
<script src="assets/js/plugin/tweenMax.min.js"></script> <!-- Nice Select Js -->
<script src="assets/js/plugin/nice-select.v1.0.min.js"></script> <!-- Wow js -->
<script src="assets/js/plugin/wow.v1.3.0.min.js"></script> <!-- Wow js -->
<script src="assets/js/plugin/jquery.countdown.min.js"></script> <!-- Main js -->
<script src="assets/js/main.js"></script>
<!--==== Js Scripts End ====-->
<script src="../src/main.js"></script>
</body>
</html>
Folder structure
This results in a page with the following errors
Tell me how to fix the errors (how to correctly set the path to the main.js file, including). The main.js file is located in the src folder
When the public/index.html code was as follows
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required Meta -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Title For This Document -->
<title> Karte - Multipurpose E-Commerce Html Template</title>
<!--<base href="/">-->
<!-- Favicon For This Document -->
<link rel="shortcut icon" href="../src/assets/images/logo/favicon-32x32.png" type="image/x-icon">
<!-- Bootstrap 5 Css -->
<link href="../src/assets/css/bootstrap.5.1.1.min.css">
<!-- Google fonts -->
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<!-- FlatIcon Css -->
<link href="../src/assets/fonts/flaticon.css">
<!-- Slick Slider Css -->
<link href="../src/assets/css/plugin/slick.css">
<!-- Ui Tabs Css -->
<link href="../src/assets/css/plugin/jquery-ui.min.css">
<!-- Magnific-popup Css -->
<link href="../src/assets/css/plugin/magnific-popup.css">
<!-- Nice Select Css -->
<link href="../src/assets/css/plugin/nice-select.v1.0.css">
<!-- Animate Css -->
<link href="../src/assets/css/plugin/animate.css">
<!-- Style Css -->
<link href="../src/assets/css/style.css">
</head>
<body class="shoe">
<!-- ==========Preloader========== -->
<div class="loader"><span>Karte...</span></div>
<!-- ==========Preloader========== -->
<!--===scroll bottom to top===-->
<a href="#0" class="scrollToTop"><i class="flaticon-up-arrow"></i></a>
<!--===scroll bottom to top===-->
<div id="app"></div>
<!--==== Js Scripts Start ====-->
<!-- Jquery v3.6.0 Js -->
<script src="../src/assets/js/jqurey.v3.6.0.min.js"></script> <!-- Popper v2.9.3 Js -->
<script src="../src/assets/js/popper.v2.9.3.min.js"></script> <!-- Bootstrap v5.1.1 js -->
<script src="../src/assets/js/bootstrap.v5.1.1.min.js"></script> <!-- jquery ui js -->
<script src="../src/assets/js/plugin/jquery-ui.min.js"></script> <!-- Parallax js -->
<script src="../src/assets/js/plugin/jarallax.min.js"></script> <!-- Isotope js -->
<script src="../src/assets/js/plugin/isotope.js"></script> <!-- Slick Slider Js -->
<script src="../src/assets/js/plugin/slick.min.js"></script> <!-- magnific-popup v2.3.4 Js -->
<script src="../src/assets/js/plugin/jquery.magnific-popup.min.js"></script> <!-- Tweenmax v2.3.4 Js -->
<script src="../src/assets/js/plugin/tweenMax.min.js"></script> <!-- Nice Select Js -->
<script src="../src/assets/js/plugin/nice-select.v1.0.min.js"></script> <!-- Wow js -->
<script src="../src/assets/js/plugin/wow.v1.3.0.min.js"></script> <!-- Wow js -->
<script src="../src/assets/js/plugin/jquery.countdown.min.js"></script> <!-- Main js -->
<script src="../src/assets/js/main.js"></script>
<!--==== Js Scripts End ====-->
<!--<script src="/main.js"></script>-->
</body>
</html>
gave the following errors
