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>
Related
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">
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.
How do I make my own design in jekyll blog ? Currently I have the default minima theme I got by jekyll new my-blog and no idea of how to get started on designing my own posts, main etc layouts. For some reason I don't see the typical _layouts and _includes folders when I ran the jekyll new command
I don't see the typical _layouts and _includes folders when I ran the Jekyll new command
Then start by creating them. They are just folders. You can start a layout with this minimal structure in a file _layouts/main.html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
{{ content }}
</body>
</html>
With an "hello world" be like this:
---
layout: main
---
Hello World
Then extend the layout with whatever you want, like a normal web page: css, header, footer, ...
I'm debugging an offline application, and Chrome's Dev Tools Network tab doesn't seem to show any information at all about the cache manifest download. I see the download of the main page, followed by its various resources, but there's no network entry for the manifest identified on the html element — not initially, and not at the end when it re-downloads it to see if it changed.
Is there some magic option to makes Dev Tools show the manifest download as well?
For example, say we have index.html:
<!DOCTYPE html>
<html manifest="m.appcache">
<head>
<!-- ...usual head stuff... -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- ...some content... -->
<script src="script.js"></script>
</body>
</html>
And the manifest looks like:
CACHE MANIFEST
# v1
style.css
script.js
On the network tab, I'll see entries for index.html, style.css, and script.js, but none for m.appcache, even though I know the browser requests it (twice) when initially caching the page.
In chrome-dev-tools the place you can check everything is the application tab. Not sure, but there might also be your m.appcache file.
This is what my file structure looks like in Play:
- public
- bower_components
- images
- stylesheets
This is my <head>:
<head>
<title>#title</title>
<link rel="shortcut icon" href='#routes.Assets.at("images/favicon.png")'>
<link rel="stylesheet" media="screen" href='#routes.Assets.at("bower_components/bootstrap/dist/css/bootstrap.min.css")'>
<link rel="stylesheet" media="screen" href='#routes.Assets.at("stylesheets/main.css")'>
<script src='#routes.Assets.at("bower_components/jquery/dist/jquery.min.js")'></script>
<script src='#routes.Assets.at("bower_components/bootstrap/dist/js/bootstrap.min.js")'></script>
</head>
The routes:
GET / controllers.Application.index
GET /public controllers.Application.public
GET /assets/*file controllers.Assets.at(path="/public", file)
It works on development I am getting 200s. When I deploy to Heroku, I get 404s for all bower components except for the stylesheets and images directories.
I'm under the assumption that it may be because Play is not able to recognize the bower components directory. Does anyone know how to add a new directory for play to build from for the assets?
When using bower with play, be mindful that the assets that you will use are stored within the /dist folder. Now, you may not think this is a big deal, but if you check the default .gitignore file, you'll discover that on one single line it has these four characters:
dist
That is enough to ignore all dists within your application. Just delete the line, run git status, and you'll discover you'll have some new files to add to your repo.
Commit and push to Heroku. You should be good to go by now.