When I'm updating any files, I'm updating my .manifest files as well by updating its version & modified Date.
But, when I'm accessing webpage, I'm getting old contents from cache not new / updated. To get latest contents, I need to press ctrl+F5.
Once I press ctrl+F5, I'm getting updated version. But, I cannot tell the User to press ctrl+F5 to get latest contents. Please help.
CACHE MANIFEST
# version 6.3 Updated on 05Feb2016
CACHE:
../Pages/Home.html
../Scripts/Home.js
../Styles/Home.css
../Images/icon.png
../Images/header.png
NETWORK:
*
FALLBACK:
And in HTML I have written:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" manifest="../ManifestFiles/Home.manifest">
<head>
Related
I know that it is something to do with <base href="$FLUTTER_BASE_HREF"> and <base href="/">. But, even if I delete it, or put './' or anything I've tried, nothing has solved the blank page issue that I have right now.
I am hosting from the project's build/web directory using npx http-server. In this case, how should I fix my index.html file? I haven't changed anything. It is just from flutter create.
I am trying to deploy to IIS. Not in root but in a sub-folder.
This is working:
edit web/index.html, change <base href="/"> to <base href="/ChangeTag/">
run flutter build web command
the build/web/index.html is ok, with the new changes.
Perfect!
BUT, when I try to debug using localhost: web pages does not found - error 404
What I want is to deploy (automatically), inside a sub-folder of wwwroot and execute local test too, without modifying index.html a lot of times
Is it possible to do something like in Angular, use proxies, use different build configs, etc?
Thanks
I've got a similar problem after upgrading flutter and dart to current version (beta channel), I mean it was good on debugging mode and It did not working on build release.
What I did? I just commented this <base href="/"> line at index.html file (located inside the <your_app_folder_name>/web folder) and both (debugging and release builds) went back to working like charm.
I did comment by changing the line
<base href="/">
to
<!-- <base href="/"> -->
Do the change and: try to run a flutter build web command, copy the generated web folder located at <your_app_folder_name>/build/ path to any subfolder (such as <your_websrv_root>/webtestfolder) of the your webserver, and it will work at the address http://webtestfolder of your browser.
Stop manually updating base-href
Instead of using
flutter build web
Try
flutter build web --base-href /sub_folder_name/
This will change the base URL of your build/web/index.html
Bounus
Or if you are using github actions to deploy on github-pages.
This will create a subfolder name, same as your repository name (username.github.io/{repo-name})
- run: flutter build web --base-href /${{ github.event.repository.name }}/
Here is full workflow example: flutter_github_pages_deploy.yaml
Note
Just make sure that your web/index.html contains
<base href="$FLUTTER_BASE_HREF">
The answer is in the index.html file on the web folder (not /build/web)
<!DOCTYPE html>
<html>
<head>
<!--
If you are serving your web app in a path other than the root, change the
href value below to reflect the base path you are serving from.
The path provided below has to start and end with a slash "/" in order for
it to work correctly.
For more details:
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
-->
<base href="/sub-folder/">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
So I'm working with flutter web + cloud firestore
To get cloud firestore working I have to modify my index.html. The problem is every time I run
flutter build web
It overwrites my index.html and I have to manually re-add all the necessary code snippets to get it working again.
Is a way I can run flutter build web without it overwriting index.html?
Another related issue is that when I deploy the site to firebase, it works fine, but when I run this site locally for testing using
flutter run -d chrome
when it runs on chrome the site is again using a brand new index.html without the necessary code so it doesn't work. I have no opportunity to edit the index.html to apply the necessary code since it builds and runs immediately.
Is there a fix for this?
You should modify index.html file in the <project>/web folder, but not in the <project>/build/web folder. This file will be copied to <project>/build/web folder during build process.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flutter web</title>
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
<script defer src="main.dart.js" type="application/javascript"></script>
<script src="https://www.gstatic.com/firebasejs/6.6.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.6.0/firebase-auth.js"></script>
</head>
<body>
<h1>This text will be copied to the target HTML, but covered by flutter web app</h1>
</body>
</html>
I am trying to run this code in my Eclipse JSP dynamic web page. But on running it in the Tomcat Server Version 9.0, I am getting an error 404 message. Error Message-The origin server did not find a current representation for the target resource or is not willing to disclose that one exists. I was trying to include a header page in my other jsp page in this code.
So far I have tried switching the location of the server via server properties. I have also checked the Use Tomcat installation checkbox in Server Locations. Still, I am getting this error.
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
</head>
<body>
<jsp:forward page="http://localhost:8080/HelloJSP/HeaderPage.jsp" />
</body>
</html>
If the page is under WEB-INF folder, an 404 error message might appear. I had the similar problem.
I put the pages under the WebContent folder instead. In Eclipse, the location of files may look confusing. Sometimes right click the file and look at their properties for paths. Just like below :
As you can see, even though pages look like they are under WEB-INF, they are under WebContent. Then, you won't see 404. And you can put the url to see your page in your browser.
If this doesn't help, then check your Web Project Settings.
Right-click your project, go to Properties, and find Web Project Settings.
Can you see my Context root "/" ? If I want to run my jquery.html page, I just type
localhost:8080/jquery.html
If you change your context root to "test", then you type :
localhost:8080/test/jquery.html
Don't forget to clean your Tomcat after changing your context root. Otherwise, it won't apply changes.
Thank You for your help :)
Actually, this problem was solved once I removed all the server from eclipse and switched it off. Then I readded the sever once again and it started working. Still not able to find the reason this error was caused but it was fixed by using the above method.
How to include Ionic 4's CSS and JS in a static website without using CDN url’s?
When we tried to download the JS file to local and refer it as <script type='text/javascript' src="ionic.js"></script> , the page loads “Empty” with an error in Chrome dev console. The same works if we refer it from CDN.
Downloaded the js file from https://unpkg.com/#ionic/core#4.0.0/dist/ionic.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- <script src="https://unpkg.com/#ionic/core#4.0.0/dist/ionic.js"></script> -->
<script type='text/javascript' src="ionic.js"></script>
<link rel="stylesheet" href="https://unpkg.com/#ionic/core#4.0.0/css/ionic.bundle.css">
</head>
<body>
<ion-title>Sample Title</ion-title>
</body>
</html>
Thanks ghybs
ionic.js depends on about another 135 js files under #ionic/core/dist/ionc. After including the entire #ionic/core folder in my static website project folder, the pages with ion components loaded properly.
Here's the solution to build static websites using Ionic Framework:
Folder structure should be:
projectFolder
|_core
| |_css
| | |_ionic.bundle.css
| |_dist
| |_ionic (contains all dependent js files)
| |_ionic.js
|_index.html
How to get ionic core?
Run the below command.
$ npm install #ionic/core
This will generate node_modules folder. Copy the folder from node_modules/#ionic/core to your project.
index.html
<html lang="en">
<head>
<script type='text/javascript' src="core/dist/ionic.js"></script>
<link rel="stylesheet" href="core/css/ionic.bundle.css">
</head>
<body>
<ion-title>Sample</ion-title>
</body>
GitHub repo of the above example
Maybe you could try deploying the App with or without Cordoba as Webapp? That result should ne a static website in your dist folder.
https://forum.ionicframework.com/t/how-to-deploy-for-all-three-platforms-ios-android-and-web-too/100493/2
What is different between ionic 4 and common JS libraries is that ionic 4 uses lazy loading so that your user does not load components that are not used in your app.
As a consequence, ionic 4 is split in many different JS files. While it is true you only need to reference a single entry file in your HTML, ionic 4 expects the rest of the files to be available alongside this entry file. That is why you see in your dev console an extra network request to an ionic JS asset with hash file name.
You can browse https://unpkg.com/#ionic/core#4.0.0/dist/ionic/ to get an idea of what that means (although ionic will probably load only the chunks, not the individual components).
Then the entry file will automatically try loading these extra chunks whenever it sees ionic custom web elements on the page.
Therefore what you miss is simply to make available all these extra JS files at the same location as your entry file.
As to retrieve them, you can get a zip of released assets on the GitHub release page, from jsdelivr, or from npm.