We have used font awesome in our application. When the application is hosted onto IIS, we are unable to see proper font.
Otherwise running via Visual Studio gives proper fonts.
<link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/style-metro.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/style.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/style-responsive.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/themes/default.css" rel="stylesheet" type="text/css" id="style_color"/>
<link href="assets/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css"/>
This is the section from master page file.
Adding the following lines to Web.Configs system.WebServer tag worked.
<staticContent>
<mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
</staticContent>
You can do that or alternatively register the MIME TYPES in IIS. If you are an admin, you can register it at a server level and all sites will work. A reboot of the site or IIS is required. In that case, remove the explicit registration from your web.config file.
Related
I have a Tomcat 10 setup in a development environment with a custom 403 error page. My 403 error page look something like this.
<html>
<head>
<link rel="stylesheet" type="text/css" media="all"
title="Default" href="default/style-1.0.2.css" />
<link rel="alternate stylesheet" type="text/css" media="all" title="Paper White"
href="default/print-1.0.1.min.css" />
<title>403 Forbidden</title>
</head>
<body>
<h3>You do not have required permissions to view this page.</h3>
</body>
</html>
When I reproduce this, I am getting a 403 error while accessing external CSS files.
403 error screenshot
My theory is that as the tomcat recognizes this request as 403, it is not allowing the request to access the underlying CSS resources as well.
Is there a way to bypass this?
I have ubunto server working with nginx,
and after running npm run build in my react project, the build directory created with the path static/css/main.ca4e3296.chunk.css -> and that is the main css file of the project.
After ftp that build directory to the server, I checked this file and it transfered successfully, but on the production it's value is all the index.html content (I have no idea why).
I also copy paste all the static/css/main.ca4e3296.chunk.css file's content from the server to the browser and it's all the css worked again, which means the problem here is that file that it's value changes from the server to the browser.
Also, in the console, I get this message:
Resource interpreted as Stylesheet but transferred with MIME type text/html: "https://bucard.co.il/static/css/main.ca4e3296.chunk.css".
By the way, this is my index.html page if it's couses the issue:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Bucard | Digital Business Card</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="canonical" href="https://bucard.co.il/" />
<link rel="icon" id="favicon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Assistant:wght#300&display=swap" as="style"
onload="this.rel='stylesheet'" />
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" as="style"
onload="this.rel='stylesheet'" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<meta name="title" content="Bucard | Digital Business Card" />
<meta name="description"
content="Bucard - Digital Card Website" />
<!-- some analytics -->
<meta property="og:locale" content="he_IL" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Bucard | Digital Business Card" />
<meta property="og:image" content="https://bucard.co.il/favicon.ico" />
<meta property="og:description"
content="Bucard - Digital Card Website" />
<meta property="og:url" content="https://bucard.co.il/" />
<meta property="og:site_name" content="Bucard" />
</head>
<body>
<div id="root"></div>
</body>
</html>
Any help please ? Or maybe it's Nginx problem?
This problem causes only on production.
edit: Just saw that removing GENERATE_SOURCEMAP=false from .env file solved the problem, but the components are shown again. so that's temporary solution.
I just looked at the source code of your website, there's no CSS file named main.ca4e3296.chunk.css there.
It's probably the nginx routing settings that causes the redirect to your 404 page, which is fine.
You need to remember that with each new build the output files' names change, and the main index.html file is updated as well to link to the new files, so main.ca4e3296.chunk.css may have existed sometime in the past but not anymore. Currently, both 2.b42aba3b.chunk.css and main.a6f3b637.chunk.css are responding as expected.
If I were you I'd read more about your bundler (most likely Webpack)
I am currently working on a asp.net 4.6.1 project.
I have used bundler and minifier extension to minify and it works as desired to minify files. I wanted to minify all the js and css files and set the reference links according to the environment.
This is not possible in ASP.NET 4.6.1
My main aim is that normal files should load during debug mode and minified files during production mode.
Something of this type :
<environment names="Development">
<link rel="stylesheet" href="~/css/file1.css" />
<link rel="stylesheet" href="~/css/file2.css" />
<link rel="stylesheet" href="~/css/file3.css" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="~/css/bundle1.min.css" asp-append-version="true" />
<link rel="stylesheet" href="~/css/bundle2.min.css" asp-append-version="true" />
</environment>
how to use bootstrap files in Apache cordova apps?
Is there any setting to do
in visual studio 2015 css intellisense not working
how to use bootstrap files in Apache cordova apps?
Is there any setting to do
First, you need to download the bootstrap.css or bootstrap.min.css file. Then you can reference it in your index.html file:
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<!--reference bootstrap.min.css file here -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>BootStrapDemo</title>
</head>
<body>
<div class="app" style="">
<button class="btn btn-danger">BootStrap Button</button>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="scripts/platformOverrides.js"></script>
<script type="text/javascript" src="scripts/index.js"></script>
</body>
in visual studio 2015 css intellisense not working
I guess you didn't reference it correctly. If you referenced it correctly, you will get the intelligence like this:
I migrated a Rails 2.2.2 application to Rails 3.1.
In development mode: /var/www/project_dir# thin start --ssl
all the assets are found and served beautifully.
When I run in production mode: /var/www/project_dir# thin start --ssl -e production
all of the asset requests (JS,CSS and images) return a 404.
The paths in development and production mode are
identical.
I have come to the point where I have exhausted all of my debugging ideas and have no ideas why when in production mode, none of the assets can be found.
I did try migrating over to asset pipeline but that caused more problems that I don't think I can solve right now so I need to solve this with asset pipeline off.
Any and all ideas are welcome and THANKS!
Details
Web Server: Thin 1.5.0
Asset Pipleine: Off
Asset Directories:
/var/www/project_dir/public/images
/var/www/project_dir/public/javascripts
/var/www/project_dir/public/stylesheets
Generated Asset Paths (Development Mode)
<script src="/javascripts/jquery.js?1366806358" type="text/javascript"></script>
<script src="/javascripts/jquery-ui.js?1366806358" type="text/javascript"></script>
<script src="/javascripts/jquery.alerts.js?1366806358" type="text/javascript"></script>
<script src="/javascripts/application.js?1366806357" type="text/javascript"></script>
<link href="/stylesheets/jquery-ui.css?1361279500" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/jquery.alerts.css?1361279500" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/default.css?1361279499" media="screen" rel="stylesheet" type="text/css" />
Generated Asset Paths (Production Mode)
<script src="/javascripts/jquery.js?1366806358" type="text/javascript"></script>
<script src="/javascripts/jquery-ui.js?1366806358" type="text/javascript"></script>
<script src="/javascripts/jquery.alerts.js?1366806358" type="text/javascript"></script>
<script src="/javascripts/application.js?1366806357" type="text/javascript"></script>
<link href="/stylesheets/jquery-ui.css?1361279500" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/jquery.alerts.css?1361279500" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/default.css?1361279499" media="screen" rel="stylesheet" type="text/css" />
Apache would do this automagically for you but with Thin, you need to do the following:
In /config/environments/production.rb
Set this directive to true:
config.serve_static_assets = true
That will enable production mode to read assets from the /public folder