const express = require('express');
const path = require('path');
const app = express();
// Use static folder middleware
app.use(express.static(path.join(__dirname , "public")));
// Get
app.get("/" , (req , res)=>{
res.sendFile(`${__dirname}/index.html`);
});
// Listen
app.listen(3000 , ()=>{
console.log('server running on port 3000');
});
Folder structure
Root
-index.html
-app.js
public
-css
-index.css
-images
-image.png
In the index.html page The index.css file and the image.png are linked.
However, Those two are not being server as static files in app.js. But I have included the middle for serving static folders.
can some one explain what is the issue
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap
contributors">
<meta name="generator" content="Hugo 0.82.0">
<title>Sign up</title>
<link rel="canonical"
href="https://getbootstrap.com/docs/5.0/examples/sign-in/">
<!-- Bootstrap core CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-
beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-
eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
crossorigin="anonymous">
<!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-
touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-32x32.png"
sizes="32x32" type="image/png">
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-16x16.png"
sizes="16x16" type="image/png">
<link rel="manifest" href="/docs/5.0/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="/docs/5.0/assets/img/favicons/safari-pinned-
tab.svg" color="#7952b3">
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
#media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
<link href="./public/css/index.css" rel="stylesheet">
</head>
<body class="text-center">
<main class="form-signin">
<form action="/" , method="POST">
<img class="mb-4" src="./public/images/image.png" alt="" width="72"
height="57">
<h1 class="h3 mb-3 fw-normal">Sign Up</h1>
<div class="form-floating">
<input type="text" name="fname" class="form-control top"
id="firstName" placeholder="first name">
<label for="firstName">First Name</label>
</div>
<div class="form-floating">
<input type="text" name="lname" class="form-control middle" id="lastName" placeholder="last name">
<label for="firstName">Last name</label>
</div>
<div class="form-floating">
<input type="email" name="email" class="form-control bottom" id="email" placeholder="inkey#email.com">
<label for="email">Email ID</label>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
<p class="mt-5 mb-3 text-muted">© 2020–2021</p>
</form>
</main>
</body>
</html>
This is the html page taken from bootstrap
The css file under the comment custom styles for this template
and the png is below the form tag.
The files are added correct as when the html page is seen in the browser independently then the image and css is showing up
However when it is served using node and express the image and css arent showing up
OK, So I am answering my own question here.
After refering to #jdmayfield 's answer and searching about MIME type errors I reached link to this link.
I realised that when you set the pubic folder as static in node, Then that public folder should not be added in the path to css or images in html
Meaning that
In the folder structure given above if we want to link css in html the code we use is
<link href="./public/css/index.css" rel="stylesheet">
And this gave me a MIME type error.
So I changed the above code to
<link href="css/index.css" rel="stylesheet">
This worked.
However if You independently open the HTML file by going live in vscode, the css and images wont load. But when served with node they will be served.
UPDATED POST:
In light of the recent comment by #Nav giving the error regarding mime-type, here is a snippet I found at Express: Setting content-type based on path/file?
"The Express documentation shows that it can do this if you pass in the
file name."
var filePath = 'path/to/image.png';
res.contentType(path.basename(filePath));
// Content-Type is now "image/png"
Try this example first. If that does not work, reload and check Dev console for different errors. It is possible there is more than one cause of your issue.
ORIGINAL POST:
Based on the code you have submitted, I think your problem is the default CORS policy. You need to incorporate a method of allowing Cross-Origin Resource Sharing between the domains, ports, and protocols you are using. I found a good document detailing CORS explicitly, but succinctly, with a solution that appears specifically suited to your needs. You might open the Dev console in your browser and look for similar error messages as outlined in the document to confirm.
Here's the link:
https://flaviocopes.com/express-cors/
Related
used HBS as Template engine in my express app. This issue come when trying to display the title in dynamic page (details page).
My Controllers
exports.getProduct = (req, res, next) => {
var prodId = req.params.productId;
Product.findById(prodId)
.then(([product]) => {
res.render('shop/product-detail', {
product: product[0],
title: product.title
});
})
.catch(err => console.log(err));
};
My Layout
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>{{{ title }}}</title>
</head>
My View
<div class="container">
<div class="card-deck">
<div class="card">
<img src="{{product.imageUrl}}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">{{product.title}}</h5>
<p class="card-text">{{product.description}}</p>
<p class="card-text"><small class="text-muted">Rp {{product.price}}</small></p>
<form action="/add-to-cart" method="POST">
<button type="submit" class="btn btn-outline-primary btn-block">Add to Cart</button>
<input type="hidden" name="productId" value="{{product.id}}">
</form>
</div>
</div>
</div>
</div>
In view the product title is working fine. But in the master template (layout) is not showing up.
server side : title: product[0].title
frontend side replace <title>{{{ title }}}</title> with
<title>{{ title }}</title>
enter image description here this is my edit_admin code
Only in this page my html css is not getting load gretting an 404
error
i've tried alot but i can't get what's the actual reason behind this
kind of error
Refused to apply style from '' because its MIME type
('text/html') is not a supported stylesheet MIME type,andstrict MIME
checking is enabled in nodejs
Refused to apply style from 'http://localhost:5000/admin/css/bootstrap3.3.7.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Admin</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="../css/bootstrap3.3.7.min.css">
<link rel="stylesheet" type="text/css" href="../fonts/font-awesome-4.7.0/css/font-
awesome.min.css">
<link rel="stylesheet" type="text/css" href="../css/dashboard.css">
</head>
<body>
<!-- SIDE BAR START -->
<%- include('../partials/admin_sidebar.ejs'); %>
<!-- SIDE BAR END -->
<section id="contents">
<nav class="navbar navbar-default">
<!-- NAV BAR START -->
<%- include('../partials/admin_navbar.ejs'); %>
<!-- NAV BAR END -->
</nav>
<div class="container-fluid">
<div class="row" style="background-color: white;">
<div class="col-md-8">
<form action="/admin/edit_admin/<%- admin.id %>" method="post">
<div class="form-group">
<label for="email">Email address</label>
<input type="email" value="<%- admin.email %>" name="email" class="form-control" id="email" placeholder="name#example.com">
</div>
<!-- <div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div> -->
<div class="form-group">
<label for="password">Password</label>
<input type="password" value="<%- admin.password %>" name="password" class="form-control" id="password" placeholder="password">
</div>
<div class="form-group">
<input type="submit" class="btn btn-success" name="submit">
</div>
</form>
</div>
</div>
</div>
</section>
<script src='http://code.jquery.com/jquery-latest.js' type="text/javascript"></script>
<script src='../js/main.js' type="text/javascript"></script>
<script src='../js/dashboard.js' type="text/javascript"></script>
I think you need to specify your assets folder in your nodejs app file.
app.use(“ASSETS_FOLDER”, express.static(“ASSETS_FOLDER”);
Your css file path for http://localhost:5000/admin/css/bootstrap3.3.7.min.css is incorrect.
Because it can not find the file on specified path, it goes to the 404 & returns html page of 404, which causes you to see this error
I would suggest to use absolute path for referring to your static css/js resource files as it might need to be accessed from various locations, relative path might not work if accessed from different places
To be sure that this is the error you have, just paste this url http://localhost:5000/admin/css/bootstrap3.3.7.min.css in your browser & see if you get css file there, if you see 404 page, the error is exactly what I explained above.
UPDATE > Ideal way giving reference to assets in ejs
You can pass base_url like this in your routes while rendering ejs
res.render('edit', {
base_url: "http://" + req.headers.host
})
And then specify link urls like this show it always catches the exact file no matter where you call it from
<link rel="stylesheet" type="text/css" href="<%= base_url%>/css/bootstrap3.3.7.min.css">
<link rel="stylesheet" type="text/css" href="<%= base_url%>/fonts/font-awesome-4.7.0/css/font-
awesome.min.css">
<link rel="stylesheet" type="text/css" href="<%= base_url%>/css/dashboard.css">
The issue is a validation messages appears and the textfield turns red when specific fields are clicked and blurred out. But when I click the submit button of the form without touching any of the input fields, no error messages are shown and none of the textfields turn red.
The correct way is, it has to show all the validation messages during the submission and all the textfields have to turn red.
The plunk for this is
http://plnkr.co/edit/fNUdp7Qdd0ysrd0eiPFT
<!DOCTYPE html>
<html>
<head>
<title>Angular-Formly</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
</head>
<!-- form declaration-->
<body ng-app="app" ng-controller="MainController as vm">
<div class="container col-md-4 col-md-offset-4">
<form novalidate name="vm.form" ng-submit="vm.formsubmit()" >
<formly-form model="vm.user" fields="vm.fields" form="vm.form" >
</formly-form>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<!-- Application Dependencies -->
<script src="//cdnjs.cloudflare.com/ajax/libs/api-check/7.2.4/api-check.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<script data-require="angular-messages#1.4.8" data-semver="1.4.8" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-formly/6.11.0/formly.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-formly-templates-bootstrap/4.3.1/angular-formly-templates-bootstrap.js"></script>
<!-- Application Scripts -->
<script src="app.js"></script>
<script src="MainController.js"></script>
<script type="text/ng-template" id="custom-messages.html">
<div class="my-messages" ng-messages="field.$error" ng-style="{color: 'red'}" ng-if="form.$submitted">
<div class="my-message" ng-message"required">required Message</div>
</div>
</script>
<script type="text/ng-template" id="formly-messages.html">
<formly-transclude></formly-transclude>
<div class="my-messages" ng-messages="form.$error" ng-style="{color: 'red'}" ng-if="fc.$touched">
<div ng-repeat="(name, message) in ::options.validation.messages" ng-message="{{::name}}">{{message(fc.$viewValue, fc.$modelValue, this)}}
</div>
</div>
</script>
</body>
</html>
Can anyone kindly give me the solution for this? Thanks in advance
It seems the form won't allow you to submit it, because you've got required fields in there.
Therefore the form.$submitted value will never be true in your option setting formlyConfigProvider.extras.errorExistsAndShouldBeVisibleExpression.
Hello i have something very simple:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="{{adminUrl}}/assets/css/bootstrap/bootstrap-responsive.min.css">
<link rel="stylesheet" href="{{adminUrl}}/assets/css/bootstrap/bootstrap.min.css">
<script type="text/javascript" src="{{adminUrl}}/assets/js/vendors/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="{{adminUrl}}/assets/js/bootstrap/bootstrap.min.js"></script>
</head>
<body>
<div style="padding: 20px; background: #fafafa; border-bottom: solid 1px #eee">
users list/no paging
create new user
</div>
<h1>List data:</h1>
<ol>
{{#each data}}
<li>
<div><b>{{username}} - {{id}}</b></div>
{{email}}
<div> </div>
</li>
{{/each}}
</ol>
</body>
</html>
This is an expressjs view that uses handlebars. 'adminUrl' is in app.locals.
app.locals({
adminUrl: _config.rootUrl
});
In the css, js and a href links outside the {{#each works just fine, but in the {{#each... does not. How can i fix it to work?
try {{../adminUrl}} within your {{#each}} block as I believe handlebars will change the context to be the current member of data and thus you need .. to access the parent context.
I left on Friday with my application working in dev mode....I came in this morning and the Layout.Mobile.chtml was NOT being used.....THIS IS DEV MODE so I still starting the web server each time.... I read about a similar issue related to the cache....but I don't see how this could be related to my problem as once the web server shuts down the cache is cleared.
I am using Visual Studio 2012 as my development "web server".
Everything was running and I don't see where the problem is nor do I understand where to look next. Any suggestions of how to diagnosis this problem or where to look would be appreciated.
This is ONLY for the Layout.Mobile.cshtml....when I switch back to the Layout.cshtml it is being called fine....
In my global.asax.cs I have the following set to force firefox to display using the mobile layout:
//The following forces Firefox to use the Mobile View ONLY
DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("mobile")
{
ContextCondition = (context =>
context.Request.UserAgent.IndexOf("Mozilla", StringComparison.OrdinalIgnoreCase) >= 0)
});
My _ViewStart.cshtml file is:
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
My _Layout.Cshtml is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - Etracs</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/jquery-migrate-1.1.1.js"></script>
#RenderSection("scripts", required: false)
</head>
<body>
<header>
*#
</header>
<div id="body">
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
#Html.Partial("_ViewSwitcher")
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© #DateTime.Now.Year - Turning Basin Services</p>
</div>
</div>
</footer>
</body>
</html>
My _Layout.Mobile.cshtml is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
#* #Styles.Render("~/Content/Mobile/css") *#
#* #Styles.Render("~/Content/jquerymobile/css") *#
<link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile-1.2.0.css" />
<link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile.theme-1.2.0.css" />
#* #Scripts.Render("~/bundles/jquery") *#
#* #Scripts.Render("~/bundles/jquerymobile") *#
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/jquery-migrate-1.1.1.js"></script>
<script src="~/Scripts/jquery.mobile-1.2.0.js"></script>
<script>
$(document).ready(function () {
$.mobile.ajaxEnabled = false;
});
</script>
#RenderSection("scripts", required: false)
</head>
<body>
<div data-role="page" data-theme="c">
<div data-role="header">
#RenderSection("backbtn", false)
<h1>#ViewBag.Title</h1>
#RenderSection("Home", false)
</div>
<div data-role="content">
#* #RenderSection("featured", false) *#
#RenderBody()
</div>
<div data-role="footer">
<h4> #Html.Partial("_ViewSwitcher") © #DateTime.Now.Year - Turning Basin Services</h4>
</div>
</div>
</body>
</html>
In my views I am usually setting up the view to impliclity map to the Layout using viewstart.... however, my .Login.Mobile.cshtml hardwires the assocaiation to the mobile layout as follows:
#model TBS.Etracs.Web.Main.Models.LoginModel
#{
ViewBag.Title = "Log in";
Layout = "~/Views/Shared/_Layout.Mobile.cshtml";
}
#Html.ValidationSummary(true)
<section id="loginForm">
#* #using (Html.BeginForm(new { ReturnUrl = ViewBag.ReturnUrl })) { *#
#using (Html.BeginForm ("Login")) {
#Html.AntiForgeryToken()
<div data-role="content">
<div data-role="fieldcontain">
<label for="UserName">UserName:</label>
#Html.TextBoxFor(m => m.UserName)
#Html.ValidationMessageFor(m => m.UserName)
</div>
<div data-role="fieldcontain">
<label for="Password">Password</label>
#Html.PasswordFor(m => m.Password)
#Html.ValidationMessageFor(m => m.Password)
</div>
<div data-role="fieldcontain">
<label for="ProgramMode">ProgramMode</label>
<select name="ProgramMode" id="ProgramMode">
<option value="VW">VW</option>
<option value="Porsche">Porsche</option>
<option value="Bentley">Bentley</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="ConnectionMode">ConnectionMode</label>
<select name="ConnectionMode" id="ConnectionMode">
<option value="Production">Production</option>
<option value="Test">Test</option>
</select>
</div>
<input type="submit" value="Log in" />
</div>
}
</section>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
I see you acknowledged you didn't believe this was related to the cache - but I'm adding this here since it's critical to be aware of when using mobile views.
The caching bug is explained here
Dave Ward:
Something everyone should be aware of when using MVC 4's mobile view
support is that there's a bug in the RTM version that results in the
wrong view being rendered for mobile devices after the view falls out
of the resolution cache the first time. The tricky part is that you
won't notice this in debug mode or until 15 minutes of inactivity in
release mode, so it's incredibly easy to let the buggy behavior slip
into production. There's an easy fix on NuGet, which Rick Anderson
covers here:
http://blogs.msdn.com/b/rickandy/archive/2012/09/17/asp-net-mvc-4-mobile-caching-bug-fixed.aspx
See also comments in this post
http://www.hanselman.com/blog/MakingASwitchableDesktopAndMobileSiteWithASPNETMVC4AndJQueryMobile.aspx
If you have a custom view engine (like i do) you can just change the base class after installing the nuget package:
public class SiteIdentityViewEngine : Microsoft.Web.Mvc.FixedRazorViewEngine, IVirtualPathFactory
Using Glimpse I found that that the _layout.mobile.cshtml was still being called and included....the problem was that it was not working....which relates to a problem I had earlier.....
In my _Layout.Mobile.chtml I went back to the following code and my layout is now working
<link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile-1.2.0.css" />
<link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile.theme-1.2.0.css" />
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/jquery-migrate-1.1.1.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
I used this to replace the following lines in my _layout.Mobile.cshtml
<link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile-1.2.0.css" />
<link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile.theme-1.2.0.css" />
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/jquery-migrate-1.1.1.js"></script>
<script src="~/Scripts/jquery.mobile-1.2.0.js"></script>
The big question that I am VERY confused about is what happened .... this prevous worked for several days and then quit working..... Input would be appreciated.