As you know Flutter provides an outstanding possibility to have one single code base for all platforms, such as Android, iOS, Windows, Linux, Web, and more. Cross-platform frameworks are not new things, but Google engineers challenged themselves enough to follow the core of Flutter’s principle - compile Dart code into true native code for every supported platform. As you know for Web browsers the native code is JavaScript, HTML, and CSS. Thus, you are getting ready to deploy the Progressive Web Application.
At Codis we believe that Flutter has great potential, it is the main reason why we are building a way to automatically generate Flutter UI from Figma to empower Flutter even more.
There are very detailed official docs on how to deploy Flutter to Firebase Hosting, GitHub Pages, and Google Cloud Hosting here. In this article, I am going to show you how to quickly deploy Flutter Web App to Vercel or similar web hosting.
Before deploying, it would be good to have a way to update a new version in users’ Web Browsers after deploying. Currently, Flutter CLI doesn’t support hash naming or another way to name output bundles.
The solution is pretty simple - after enabling Web in Flutter project you should have a file web/index.html. By default it has the next line:
<script src="main.dart.js" type="application/javascript"></script>
Before releasing a new version just add/increase the suffix version of main.dart.js like that:
<script src="main.dart.js?v=1.0.1" type="application/javascript"></script>
So, coming back to Versel. First of all, you need to create a new project and connect a Git repository:
As Vercel doesn’t yet have a Flutter template we have to set up a few parameters in the Build and Output Settings section:
Build command: flutter/bin/flutter build web --release
Output Directory: build/web
Install Command:
if cd flutter; then git pull && cd .. ; else git clone https://github.com/flutter/flutter.git -b stable; fi && ls && flutter/bin/flutter doctor && flutter/bin/flutter clean && flutter/bin/flutter config --enable-web
There is one important option for flutter build command: --web-renderer.
The --web-renderer option can be: auto, html, or canvaskit.
auto(default) - automatically chooses which renderer to use. This option chooses the HTML renderer when the app is running in a mobile browser and the CanvasKit renderer when the app is running in a desktop browser.html- always use the HTML renderercanvaskit- always use the CanvasKit renderer
The auto option works well, but if you need to speed up the first load time, the html option helps you with it.
After all, the Web App is ready to be deployed!
Also published here.