I have a node js project and added a template for the admin are. on my local server it show everything is ok but when i push it to my web server on vultr it does not load the admin page and show several errors in the console. these errors are not shown in the dev systems web browser console.
The errors are:
Refused to apply style from 'http://www.skillbuild.pro/admin/assets/node_modules/morrisjs/morris.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
it also shows several js files are not fount (404 error) whereas these files exist in the relevant folder.
Following is my head section:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1"> {{!--
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> --}}
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon icon -->
<link rel="icon" type="image/png" sizes="16x16" href="../assets/images/favicon.png">
<title>Elite Admin Template - The Ultimate Multipurpose admin template</title>
<!-- This page CSS -->
<!-- chartist CSS -->
<link href="/admin/assets/node_modules/morrisjs/morris.css" rel="stylesheet" type="text/css">
<!--Toaster Popup message CSS -->
<link href="/admin/assets/node_modules/toast-master/css/jquery.toast.css" rel="stylesheet" type="text/css">
<!-- Morris CSS -->
<link href="/admin/assets/node_modules/morrisjs/morris.css" rel="stylesheet" type="text/css">
<!-- Custom CSS -->
<link href="/admin/dist/css/style.min.css" rel="stylesheet" type="text/css">
<!-- Dashboard 1 Page CSS -->
<link href="/admin/dist/css/pages/dashboard1.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
and these are my footer section where the js files are called:
<!-- All Jquery -->
<!-- ============================================================== -->
<script src="/admin/assets/node_modules/jquery/jquery-3.2.1.min.js" type="application/javascript"></script>
<!-- Bootstrap popper Core JavaScript -->
<script src="/admin/assets/node_modules/popper/popper.min.js" type="application/javascript"></script>
<script src="/admin/assets/node_modules/bootstrap/dist/js/bootstrap.min.js" type="application/javascript"></script>
<!-- slimscrollbar scrollbar JavaScript -->
<script src="/admin/dist/js/perfect-scrollbar.jquery.min.js" type="application/javascript"></script>
<!--Wave Effects -->
<script src="/admin/dist/js/waves.js" type="application/javascript"></script>
<!--Menu sidebar -->
<script src="/admin/dist/js/sidebarmenu.js" type="application/javascript"></script>
<!--Custom JavaScript -->
<script src="/admin/dist/js/custom.min.js" type="application/javascript"></script>
<!-- ============================================================== -->
<!-- This page plugins -->
<!-- ============================================================== -->
<!--morris JavaScript -->
<script src="/admin/assets/node_modules/raphael/raphael-min.js" type="application/javascript"></script>
<script src="/admin/assets/node_modules/morrisjs/morris.min.js" type="application/javascript"></script>
<script src="/admin/assets/node_modules/jquery-sparkline/jquery.sparkline.min.js" type="application/javascript"></script>
<!-- Popup message jquery -->
<script src="/admin/assets/node_modules/toast-master/js/jquery.toast.js" type="application/javascript"></script>
<!-- Chart JS -->
<script src="/admin/dist/js/dashboard1.js" type="application/javascript"></script>
in my server.js file I have defined the path:
// Use path
app.use(express.static(path.join(__dirname, 'public')));
for some reason on the local server it shows everything and there are no errors, but when I push it to my web server which is a vps and I am using pm2 for node process manager, it shows the errors in the browser and does not load the admin page.
Please help, this is driving me crazy!!!
Related
I want to use Bootstrap Tags Input in my ReactJS application. I downloaded that component and linked the CSS file and the JS file of the component to index.html file of my react application. Below is the code for the same:
<!-- Bootstrap Tags Input Script -->
<link rel="stylesheet" type="text/css" href="../src/Assets/bootstrap-tagsinput-latest/src/bootstrap-tagsinput.css"></link>
<script type="text/javascript" src="../src/Assets/bootstrap-tagsinput-latest/src/bootstrap-tagsinput.js"></script>
<!-- Bootstrap Tags Input Script -->
Then I simply added data-role="tagsinput"to my input element, below is the code for the same:
<input
class="form-control"
aria-label="Large"
aria-describedby="inputGroup-sizing-sm"
placeholder="Search"
data-role="tagsinput"
id={style["search-bar-field"]}
/>
After doing the above-mentioned steps, I'm still not able to get the bootstrap tags input working. I'm getting the following results (i.e. the input is not being converted to a tag when I click enter):
Not sure whether it's important or not, but the head element of my index.html file looks like this (I have link and script tags of Bootstrap Library and Font Awesome Library in the head element of my index.html file of my ReactJS application):
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!-- Bootstrap Tags Input Script -->
<link rel="stylesheet" type="text/css" href="../src/Assets/bootstrap-tagsinput-latest/src/bootstrap-tagsinput.css"></link>
<script type="text/javascript" src="../src/Assets/bootstrap-tagsinput-latest/src/bootstrap-tagsinput.js"></script>
<!-- Bootstrap Tags Input Script -->
<!-- Font Awesome Script -->
<script src="https://kit.fontawesome.com/e5ef6344ab.js" crossorigin="anonymous"></script>
<!-- Font Awesome Script -->
<!-- Bootstrap Script -->
<link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design#4.1.1/dist/css/bootstrap-material-design.min.css" integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://unpkg.com/popper.js#1.12.6/dist/umd/popper.js" integrity="sha384-fA23ZRQ3G/J53mElWqVJEGJzU0sTs+SvzG8fXVWP+kJQ1lwFAOkcUOysnlKJC33U" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-material-design#4.1.1/dist/js/bootstrap-material-design.js" integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
$('body').bootstrapMaterialDesign();
});
</script>
<!-- Bootstrap Script -->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
NOTE: I have also installed bootstrap-tagsinput in my react app from npm but the tags input functionality is still not working.
It would be really great if someone could help me with this or guide me as to where I'm going wrong. Thanks!
I'm currently working on my own website. So i coded some HTML with a style.css . Testing it offline - everything works as expected but when I upload it to my webhoster and get a preview of my website, there is only the raw html visible without anything from the style.css
I already checked the path and overwrote it with the for me correct path (from the root of the webserver) - it changed a little bit but still is far away from the right appearance.
The head of my index.html (The only page I have)
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title> test </title>
<link rel="icon" href="img/fav.png" type="image/x-icon">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="ionicons/css/ionicons.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<!-- main css -->
<link href="httpdocs/css/style.css" rel="stylesheet">
<!-- modernizr -->
<script src="js/modernizr.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
as well as my path:
https://i.imgur.com/0YNkUrJ.png
The result is a described aboth only some html text but not how it would looks like with style.css
You should use relative paths from the httpdocs.
So change httpdocs/css/style.css to ./css/style.css.
I have my website which consists of two pages, plus my own style.css that works perfectly on my local. But when I FTP it onto the server of my hosting service, the index.html is unable to read from my style.css. I've checked the path. I've checked the order of declaration. I've maintained the same file structure and the same order of CSS declaration (global to local)on my local, and its working fine. Does anyone have suggestions?
Here is how the head section looks:
I had to declare a CSS style for a script I'm using in the document. Since it won't read my style.css I did an internal declaration.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--Google Font: Source Code Pro-->
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Fancybox CSS -->
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.min.css">
<!-- My CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Fancybox jQuery -->
<script src="fancybox/jquery.fancybox.min.js"></script>
<style type="text/css">
.menuActive {
background-color: #ffffff;
}
</style>
</head>
A relevant portion of my file structure on the server is as follows (tried including a screenshot but apparently I can't do that on Stackoverflow just yet):
Folders & files:
css
fancybox
files
img
wp_admin
wp-content
wp-includes
.ftpquota
.htaccess
default.htm
index.html
The img folder is on the same level as the css folder and the images are loading properly.
It's probally because on your server you are using https://
change your style links to something like <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> and remove http part
I have uploaded a page to a webserver. When I go there with IE and switch browser mode to IE 8 or IE 7 to see if html5shiv and respond.js are downloaded I see that they are not. Anybody knows why ? I use bootstrap's recommended template with a bit added code in a . Here is the code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<section>
<h2>how are you doing ?</h2>
</section>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
and my uploaded page is there http://toto3000.byethost24.com/bootstrap/basic%20ii.html
Correct your first link by adding prefix (http://).
FROM: //maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css
TO : http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css
Your browser is trying to use a file protocole (file://)
It works. I was switching "browser mode" in IE rather than "document mode" that's why I couldn't see these files. My bad.
I am new to Bootstrap and ran into a strange problem. I am trying to include a cool hover effect for a facebook png image.
Everything works fine when I put the CSS in the as an internal style rule. It won't work when I put it in an external style sheet.
All the paths are working because I have been successfully overriding the default bootstrap CSS rules.
With an external style sheet the image link is there but the image does not display. Kind of hard to explain. Not sure what to do?
http://jsbin.com/UFoRIYex/394/edit?html,css
Here is a link to the website where I got the html/css from. http://bradsknutson.com/blog/css3-ro...l-media-icons/
Like I said. Everything works internally. Just not externally....
Try the bootstrap cdn (code copied direct from Bootstrap).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Problem solved. I changed the path to ../img/facebook-hover.png and it worked.Thanks!