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">
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 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/">
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 run NPM build on the PWA boilerplate I am using.
Folder structure on server is as follows:
my-project ->
static,
index.html,
service-worker
I have then hosted on server and the Manifest and assets are returning a 404.
The project is currently here.
https://evilernie44.github.io/my-project/
Any help is much appreciated.
Changing routes on the manifest and two different servers
I want to get a boiler-plate hosted as a starting point for my PWA
Your script tags point to the wrong path.
Take this tag for example:
<script type=text/javascript src=/static/js/app.98f21a65b373eaa50022.js></script>
The browser resolves it to https://evilernie44.github.io/static/js/app.98f21a65b373eaa50022.js, which does not exist.
The correct path should be ./static/js/app.98f21a65b373eaa50022.js. The extra dot instructs the browser to build the full url relative to the current path.
Alternatively, you can specify an absolute path, such as /my-project/static/js/app.98f21a65b373eaa50022.js which points to the correct location.
In conclusion, any of the following 2 script tags would work:
<script type=text/javascript src=./static/js/app.98f21a65b373eaa50022.js></script>
<script type=text/javascript src=/my-project/static/js/app.98f21a65b373eaa50022.js></script>
By default Vue CLI assumes you are running the application as root, so it will try to load the files from '/'.
When deploying to production, or in a subfolder, you need to set the publicPath in vue.config.js
https://cli.vuejs.org/config/#publicpath
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.