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.
Related
I did these steps:
Step 1: I wrote on terminal flutter build web --web-renderer canvaskit--release
Step 2: compress the files in a zip file and uploaded on public.html inside my file manager from my cPanel:
In the past, I updated the DNS and wait 3 days to see my website running, but unfortunately I can't see it:
What I am doing wrong, and finally, how can I solve this problem?
Thank you in advance
You are missing flutter.js file. Please check ./your-app/build/web folder for the missing file(s), or try to run flutter clean and then flutter build web again.
you need to update your index.html
Change
<base href="/"> to <base href="./">
I have recently upload a flutter website inside of a folder in my server.
But it's not working well. I have notice that main.dart.js needs to have the folder name in the url. But It is not working well... What more things I have to change for running the website without more problems?
Try adding the base path to you're index.html.
Example:
<base href="/FolderName/">
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 can I change the Favicon of a Stencil PWA ?
I've changed the favicon.ico file inside src/assets/icon and done npm run build
Inside www/assets/icon all the files, also favicon.ico has change correctly, but when I check my pwa with npm start, the favicon it's the older one.
I don't get how to change it. Can someone help? Thank you.
How to build browser version using Ionic 4. When I tried to build using ionic cordova build browser --prod and uploaded platforms/browser/www files on server and tried to run in browser it’s not showing anything(webpage is blank) and getting below error in devtools.
Can anyone please help me on the same?
Hi I also had this problem with my vuejs apps and it also happened with the new ionic 4 production build.
It looks like these system assume that you are going to drop the "dist" or "www" files in the home directory of your web server like in my case I was using xampp server. But we usally put these files in a sub directory like htdocs/app2.
So for this to work you need to change the <base href="/" /> in ionic 4 to <base href="/app2/" /> or what ever your app is. In vue js it's almost the same thing. but you can manually add "/app2" to the index.html file's scripts.
That worked for me; you can try it.
If you are trying to deploy the app in the server in a custom folder then you need to change the <base href="/" /> to <base href="/custom_folder_name/" /> in the index.html file in your project.
Try this change in index.html base.
Before: href="/" />
After: <base href="./"
it changed in the last version. This works for me:
ionic build --prod --public-url=/app/
I had the same problem, my solution was to upgrade xampp version to latest.
Try ionic build --prod.. The www folder has everything you need for a website.