I'm working on a Flutter web app and would like to add some web-specific PWA resources such as icons, manifest file, service worker,...
I've tried to put these files in the /web folder but they're not copied into build/web/ when performing a release build with flutter build web.
What is the right approach to deploy these resources?
This seems to be fixed in the latest versions of Flutter (1.20.0). Previously I had setup a script that did this copy manually, but it's not required anylonger.
Related
I created a flutter web application,
and I finished building it with the command ..
flutter build web --release ,
and then transferred it to a local server ,
The site does not work unless it is connected to the Internet ,
I want the site to work without an internet connection ,
As I work in an organization and some users do not have internet permissions .
Please, I want a solution to this problem .
Thanks
The problem is, that flutter has some dependencies, that can not be resolved when you, as the client, are offline. Mostly consisting of canvaskit and certain google fonts.
There are multiple solutions for that. The easiest being to use the html web-renderer:
flutter build web --release --web-renderer html
this should work for most applications, however it has lower performance than canvaskit, especially with high widget density.
Therefore you can also use canvaskit locally as it is automatically built when you build your release. But you have to set it as base url, by adding the following lines in your index.html:
<script>
window.flutterConfiguration = {
canvasKitBaseUrl: "/canvaskit/"
};
</script>
This makes sure your flutter application uses the local source for canvaskit. However, another problem could be the usage of google fonts, e.g. Roboto, as those often need to be downloaded as well. But you can just add those to the pubspec.yaml explicitly to account for that, like explained here.
Some sources for more informations:
flutter web-renderers
The same issue but on github
Making Flutter offline capable
Download and set locally from asset policy for your web application
Add link to local Canvaskit as bellow :
flutter build web --web-renderer=canvaskit
--dart-define=FLUTTER_WEB_CANVASKIT_URL=/canvaskit/
To make it work for a dev build, I incorporated Spanching's answer above in the following steps.
Run: flutter clean to clean up all build cache (this is important to have canvas kit re-downloaded in step 4 below).
Run: flutter pub get to download packages per pubspec.yaml
If you're using build runner: dart run build_runner build --delete-conflicting-outputs
At this stage you should have a clean /build folder (I also have an ios sub-folder as I'm also developing for iOS)
Run: flutter build web
At this stage you should have a clean /build/web added with a canvaskit folder underneath it. Full path: /build/web/canvaskit/
Then:
Open index.html under /web (note - do not open the one under /build/web)
Add the script mentioned in the answer above to the body of the html file. I just added it above the existing script that's already there.
Run your project in deubg mode (with Wifi turned off).
I make flutter web app and test in debug mode. That is working. Later, Run flutter build web --release this command and then copy files from build/web to the web folder and host on github pages. All is work.
later, I fix some functions and do that above steps again, but nothing changes in github pages. Always show old web, functions. But there is changes in web debug mode. I build with flutter 2.0. How to fix that problem or how should I do?
Do flutter clean. Build for web again and upload the latest build files. Probably your ide created a build from cache
I can solve now...
1.
Clean the build file or type the command flutter clean
2.
Build web release with flutter build web --web-renderer canvaskit --release
3.
Copy all of files and folder inside from web folder inside build folder build/web , to the repo and push again.
I am currently building an application using Ionic + Angular, with Capacitor for iOS & Android applications.
As mentioned in the doc, I ran the following command to generate android and iOS platforms to the app:
npx cap add android
and
npx cap add ios
I have observed the project structure of Ionic + Capacitor applications in Github and other resources and they all have this structure:
But the app I have has something else instead.
This does not look like a good practice. Moreover, if I wanted some resources like "Splash Screen" in my application, it will require a resources directory. Is there a way to manage this, so I have all iOS & android related files within the resources directory without breaking the existing application?
Every project have two android as well as IOS folders, one in the root directory which contains the platform data and one in the resources directory which contains the resources for the respective platform. The android and ios folders in the resources folder will be auto generated once you run the generate resources command. The folders you moving manually are the platform folders not the resources folders and they should be kept in the root directory of the project.
Follow the steps to generate resources
I've just created a flutter web application and now I am ready to deploy it. Looking at the docs it looks like I need to use Firebase Hosting? But I want to host the app on my own server. I tried copying the web directory from Build but when I go to the path I get a blank screen on web. How do I deploy it correctly? Or is it just simply not possible without Firebase?
First you need to compile the application.
In a terminal, command prompt or Powershell, go to the root directory of your project.
From there run a build:
flutter build web
This will create a new directory inside your project.
c:\your-project-folder\build\web
Copy everything that is in the web folder to wherever you want to publish / host your application.
Your application is bundled up into a main.dart.js file.
An index.html is also in that directory. You should be able to run your Flutter web app by visiting that index.html.
All the instructions for building a Flutter application for web platform is here.
(I did a presentation last night and had this question asked. Couldn't find it on SO so I thought I'd ask and answer it myself to help others out).
When running my flutter project, it is demanding an emulator be available but I want it to run in a browser. I noticed that there's an android folder and an ios folder but no web folder. How do I get it to run on the web?
You were on the wrong channel when you created the project. Flutter has multiple channels. To fix it, you'll go to the 'master' channel and add the web components.
Run these commands in your project folder:
$ flutter channel master
$ flutter config --enable-web
$ flutter create .
Don't worry; it doesn't clobber or remove anything when you flutter create .. It just adds the web capability. Now when you run, it'll recognize a browser as a valid environment.