This is the code in my _document.js:
import Document, { Head, Main, NextScript } from 'next/document';
<html lang="id">
<Head>
<meta charSet="utf-8" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="icon" type="image/x-icon" href="../static/favicon.ico" />
</Head>
<body className="custom_class">
<Main />
<NextScript />
</body>
</html>
I have confirmed that the favicon is in my static folder in my root directory:
I've tried putting the head in index.js, moving the favicon in the public folder, and using a different icon. In my other Next.js projects, favicons also don't load. I've tried in Firefox, Edge, and Chrome. What's going on here?
Next.js serves static files from the public folder (it can't be changed). Files inside it can be referenced by your code starting from the base URL (/).
In your case you'll need to rename your static folder to public and then reference the favicon from your _document as:
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
Related
I'm new to flutter web and I was working on a project that works fine on android
The problem is when I deploy to firebase hosting and click the google sign in button.
The pop up shows and I am able to sign in but when it pops out my app doesn't receive the FirebaseAuth.User Object and it stays null even when I evalute firebase.auth().currentUser expression in the console in browser
My index.html file:
<html>
<head>
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="A new Flutter project.">
<meta name="google-signin-client_id" content="<my client id>.apps.googleusercontent.com">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="ChurchData">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>
<title>App</title>
<link rel="manifest" href="manifest.json">
</head>
<body>
<script src="https://apis.google.com/js/platform.js"></script>
<script src="/__/firebase/7.24.0/firebase-app.js"></script>
<script src="/__/firebase/7.24.0/firebase-analytics.js"></script>
<script src="/__/firebase/7.24.0/firebase-auth.js"></script>
<script src="/__/firebase/7.24.0/firebase-firestore.js"></script>
<script src="/__/firebase/7.24.0/firebase-functions.js"></script>
<script src="/__/firebase/7.24.0/firebase-messaging.js"></script>
<script src="/__/firebase/7.24.0/firebase-storage.js"></script>
<script src="/__/firebase/7.24.0/firebase-database.js"></script>
<script src="/__/firebase/7.24.0/firebase-remote-config.js"></script>
<!-- Load the Firebase SDKs before loading this file -->
<script src="/__/firebase/init.js"></script>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
Screeenshot from Chrome
Screenshot from Firefox
I am using latest bits of Blazor WebAssembly Hosted Project.
I found a strange behaviour in that when i pass a non-exisitng route to api, the return status is 200 success becuase it return default html blazore page(index.html).
HttpResponseMessage response = await _Http.GetAsync($"api/Account/OTPVerification?userName={loggidInUser.Email}&OTP={_OTP}");
if (response.IsSuccessStatusCode)
{
}
The actual response returned is, which turns out to be(index.html) 200, success, whereas it is no where what i expect
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>BlazorWebAssembly</title>
<base href="/" />
<script src="https://kit.fontawesome.com/xxxxxxxxxxf.js" crossorigin="anonymous"></script>
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="manifest.json" rel="manifest" />
<link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
<link href="_content/Blazored.Modal/blazored-modal.css" rel="stylesheet" />
<link href="_content/Blazored.Toast/blazored-toast.min.css" rel="stylesheet" />
</head>
<body>
<app>Loading...</app>
<div id="blazor-error-ui">
An unhandled error has occurred.
Reload
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.webassembly.js"></script>
<script>navigator.serviceWorker.register('service-worker.js');</script>
</body>
</html>
In your Startup.cs you can try removing:
endpoints.MapFallbackToFile("index.html");
So in your ApiController, if it's not in the route, it will return a 404 instead of index.
I have an OpenUI5 app; my app have only one htlm page (index.html), some js file (for the logic-controller) and some xml file (for the view).
The app is a single-page application; this is my index.html start page:
<!DOCTYPE html>
<html manifest="app.appcache">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<!--<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />-->
<title>My App</title>
<!-- UI5 Bootstrap with OpenUI5 -->
<script id="sap-ui-bootstrap"
type="text/javascript"
src="resources/openui/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-libs="sap.m"
data-sap-ui-resourceroots='{
"ui5bp": "./",
"model": "./model"
}'
>
</script>
<!-- Custom Styles -->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script>
new sap.m.Shell("Shell", {
showLogout : false,
app : new sap.ui.core.ComponentContainer({
name : 'ui5bp'
}),
homeIcon : {
'phone' : "img/57_ogo.jpg",
'phone#2' : "img/114_logo.jpg",
'tablet' : "img/72__logo.jpg",
'tablet#2' : "img/144_logo.jpg",
'precomposed': false,
'favicon' : "img/favicon.ico"
}
}).placeAt('root');
</script>
</head>
<body class="sapUiBody" id="root">
</body>
</html>
and this is my manifest file app.appcache (I change it at each new version)
CACHE MANIFEST
#APP VERSION 1.0.4-rc4
#insert here files to cache
#insert here files to NOT cache
NETWORK:
*
OK! But now I copy the app on my server and BOOM! some page are reloaded but others do not... (for example I have a login XML-view where I show the release version which is updated and a XML for a setting dialog which is not updated)
Why I have this behavior? I would like that the browser reload each file at each reloading
P.S.
If I reload manaully the app by F5 the problem remains.
If I add on the index.html file these meta-tag the problems remains
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
The only mode to force the reloading of the whole app by the browser is cancel the cache manually:
If you can include Java Servlet Filter in your SPA, here is a working solution: CorrectBrowserCacheHandlerFilter.java
Basically, when your browser requests the static files, the server will redirect every requests to the same one but with a hash query parameter (?v=azErT for example) which depends on the content of the target static file.
Doing this, the browser will never cache the static files declared in your index.htmlfor example (because will always received a 302 Moved Temporarily), but will only cache the ones with the hash version (the server will answer 200 for them). So the browser cache will be used efficiently for those static files with hash version.
Disclaimer: I'm the author of CorrectBrowserCacheHandlerFilter.java.
I have an ASP.NET MVC application that uses the Metronic template from keenthemes.
When i use bundles in my layout for my css , it doesnt work well. Most of the icons do not appear
If i switch to direct links then everything is ok.
Javascript is ok.
Bundles config and layout use:
bundles.Add(new StyleBundle("~/bundles/metronic-app").Include(
"~/assets/global/plugins/font-awesome/css/font-awesome.min.css",
"~/assets/global/plugins/simple-line-icons/simple-line-icons.min.css",
"~/assets/global/plugins/uniform/css/uniform.default.css",
"~/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css",
"~/assets/global/css/components.css",
"~/assets/global/css/plugins.css",
"~/assets/admin/layout2/css/layout.css",
"~/assets/admin/layout2/css/themes/default.css",
"~/assets/admin/layout2/css/custom.css"));
#Styles.Render("~/bundles/metronic-app")
Direct links:
<link href="~/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="~/assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css">
<link href="~/assets/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css">
<link href="~/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN THEME STYLES -->
<link href="~/assets/global/css/components.css" rel="stylesheet" type="text/css" />
<link href="~/assets/global/css/plugins.css" rel="stylesheet" type="text/css" />
<link href="~/assets/admin/layout2/css/layout.css" rel="stylesheet" type="text/css" />
<link id="style_color" href="~/assets/admin/layout2/css/themes/default.css" rel="stylesheet" type="text/css" />
<link href="~/assets/admin/layout2/css/custom.css" rel="stylesheet" type="text/css" />
Here are the errors from chrome console:
I should have been using the CssrewriteUrlTransform class in my bundle configuration in order to make the asset's paths absolute.
What worked is this:
bundles.Add(new StyleBundle("~/bundles/metronic-app").Include(
"~/assets/global/plugins/uniform/css/uniform.default.css",
"~/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css",
"~/assets/global/css/components.css",
"~/assets/global/css/plugins.css",
"~/assets/admin/layout2/css/custom.css")
.Include("~/assets/admin/layout2/css/layout.css", new CssRewriteUrlTransform())
.Include("~/assets/admin/layout2/css/themes/default.css", new CssRewriteUrlTransform())
.Include("~/assets/global/plugins/font-awesome/css/font-awesome.min.css", new CssRewriteUrlTransform())
.Include("~/assets/global/plugins/simple-line-icons/simple-line-icons.min.css",new CssRewriteUrlTransform()));
Hint from this SO Question
I am almost done with my theme system for my codeigniter.
Come across a issue with style sheets have error 403 local host.
It was working on my other one but my new version will not pick up
Each theme has its on style sheet folder and java script. Most people say its wrong to do it that way but. This way is much more better for theme system.
theme/default
theme/default/stylesheets/stylesheet.css
theme/default/javascript/common.js
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="" />
<meta name="keywords" content="" />
<title><?php echo $this->config->item('title'); ?></title>
<base href="<?php echo base_url(); ?>">
<link rel="stylesheet" type="text/css" href="application/views/theme/default/stylesheets/stylesheet.css" media="screen">
</head>
theme/codeigniter
theme/codeigniter/stylesheets/stylesheet.css
theme/codeigniter/javascript/common.js
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="" />
<meta name="keywords" content="" />
<title><?php echo $this->config->item('title'); ?></title>
<base href="<?php echo base_url(); ?>" >
<link rel="stylesheet" type="text/css" href="application/views/theme/codeigniter/stylesheets/stylesheet.css" media="screen" >
</head>
I think direct access inside the applications folder will be revoked by the Code Ignitor. Hence, i put all put all images,CSS and JS in a folder named assets in the CI ROOT FOLDER, along with applications, system & user_guide.
Now, Make a file named utility_helper.php in ROOT_FOLDER/application/helper and add the following code
<?php
function asset_url(){
return base_url().'assets/';
}
?>
then add utility to application/config/autoload.php at line 67
$autoload['helper'] = array('utility');
Now when ever you want to access the asset folder, you can call it as
<link rel="stylesheet" type="text/css" href="<?php echo asset_url();?>stylesheets/stylesheet.css" />
<link rel="stylesheet" type="text/css" media="all" href=<?php echo
base_url()."application/views/theme/codeigniter/stylesheets/stylesheet.css"?> />