In this article I explained how to deploy Flutter Web app on Live Server and local system. Actually it’s little bit complicate to make web version when compared to android, iOS application. That’s why most of the software developers are looking for the results in some other external websites and developers. Initial stage me also struggle to getting web version in live server. Behind the reason is facing lot of technical error like version error, gradle build and more.
But it’s very easy when we get the exact point & read official documentation. So once visit official doc for learn more things. Just follow my below steps to build Flutter web version on live server and local computer files via Google Chrome or any other browsers. If everything is fine on testing, then upload your web files on your particular server.
How Deploy Flutter Web App
- First Copy the any one of Browser Installation path and paste it on system environment variables. For example in below I shared my Google Chrome path. (C:Program FilesGoogleChromeApplicationchrome.exe)
- Then Open Command prompt and go to on your Flutter Project like my path (C:UsersJanani VetriAndroidStudioProjectscashback-app)
- After that type flutter channel beta
- Then type flutter upgrade
- Then type flutter config –enable-web
That’s it. Now test your web version on browser via following steps on your Android Studio IDE. For that open your Android Studio IDE and then click Flutter Device Selection (which is available on Flutter Left side top bar) & select any one of browser. Now your web version successfully executed on local server.
Also Read – Flutter Multi-Vendor App Source Code
Deploy Live Server
It’s time to deploy code on live server. Type following commands on command prompt
- flutter build web
- flutter build web –release
- cd build/web
- python -m http.server
And then go to on your Flutter project and open build/web. Just copy and upload the file on your live server, then it will be executed fine without any issues. If you are facing any issues, you can watch below videos for getting more clarification.