Migrate your Flutter App to Flutter Web š„³ [Updated š]
If youāre like me and wondering how you could make use of new flutterās web app capability to deploy your cool flutter application out there as a web app , youāre absolutely at the right place :) At Nuclei , we are stepping up and upgrading our fin-tech products by venturing into the web domain.
A note to the reader :
Earlier versions of flutter required importing a separate package flutter_web
to make it work for web which gave rise to many issues but now , on the newer versions , flutter web project is merged in the main flutter project and all the flutter magic you did to make your cool app now works with web with minimal changes. This article aims to help you migrate your flutter app to make it work on web too š and setting the port and hostname for your web app.
Letās start our venture š :
- First , we gotta make sure that we are either on the flutter `beta` channel or the
master
channel. - Lets open a terminal and switch to the
beta
channel :
flutter channel beta
flutter upgrade
- Then we enable the support for web by adding into flutterās configuration :
flutter config --enable-web
- To get a list of all the available config options , just enter
flutter config -h
command.
Testing time š¾ :
- If the web support was successful , you should see 2 devices listed when you run
flutter devices
one is theChrome
device and another isWeb Server
device.
flutter devices
2 connected device:
Chrome ā¢ chrome ā¢ web-javascript ā¢ Google Chrome 78.0.3904.108
Web Server ā¢ web-server ā¢ web-javascript ā¢ Flutter Tools
- You can run your app directly on chrome by selecting the chrome device in your IDE before you run the app or use the following command :
flutter run -d chrome
- If you want to run it from some external web browser client or something else , it makes sense to just run the web server in which case you would do :
flutter run -d web-server
Any Errors š ?
Well , if you get errors when building your app which complains that itās not a web app, you just need to run the flutter create
command on your project folder. Open the root of your project folder in a terminal and run :
flutter create .
[ There might also be a need to run it with the --org
option sometimes : flutter create . --org com.exampleapp
. Also make sure that your project folder name is made of only lower case letters and underscore]
Specify custom port and hostname :
Your app by default runs on localhost ( 127.0.0.1
) which means you canāt access it from any other device on your network. If also uses a random port every time you run your app which is not what you want most of the time.
So , letās fix this.
- Set the port using the
--web-port
option and set a globally accessible hostname (0.0.0.0
) using the--web-hostname
option like so when you run your app :
flutter run -d chrome --web-port 55555 --web-hostname 0.0.0.0
- Now you can access your web app by opening any web browser in any of your devices in your local network by entering the following address :
http://<your-ip-address>:55555http://192.168.0.100:55555
- If you are running the web app from your IDE (Android studio or VScode) , you can specify the port and hostname by specifying the
additional arguments
option on Android Studio like so inside theRun Configurations
- If you are using VSCode š , then you can set it in the
launch.json
options.
{
"name": "Flutter",
"request": "launch",
"type": "dart",
"args": ["--web-port", "55555" , "--web-hostname","0.0.0.0"]
}
Build and DEPLOY ! ! !
Now that you have converted your app into a web app , its time to build it and deploy it on free static web hosting services like netlify.com
or surge.sh
. To build your web app , run the following command in your project.
flutter build web
This will create the build/web
folder which you can deploy later.