paint-brush
How to Deploy Flutter Web Appby@alex.tkachuk
3,795 reads
3,795 reads

How to Deploy Flutter Web App

by Olex TkachukDecember 20th, 2022
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

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.
featured image - How to Deploy Flutter Web App
Olex Tkachuk HackerNoon profile picture

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: autohtml, 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 renderer
  • canvaskit - 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.