How to Deploy Flutter Web App

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 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!