How to deploy flutter web app ?

If you are a flutter developer then you have came to a point that you have wanted to deploy your flutter apps to the web but you didn’t have much info about how to do it. So this blog post is for you

I will assume you already have your app build and ready for deployment.

If not then the first step you need is to build your app for the web using the command “flutter build web” if you don’t know how we will cover it in another blog post soon

You have 2 hosting to deploy your app through:

  1. VPS Hosting (Dedicated Virtual Private Server)
  2. Shared Hosting (Which means you and other people in the same server)

The VPS is more like your laptop or computer which you control through ssh if its Linux server or desktop remote if its windows server. As much as the VPS is more cool and handy but its expensive and hard for some people but its easy to deploy flutter apps with. Here is how you can do it:

  • You can server your flutter web app through python with this command

nohup python -m SimpleHTTPServer 8000 &

Just make sure you are in your web app folder when your run the command. “nohub” will let the command running even if you closed the ssh session on Linux .

  • Or you can server your app through Dart webdev tools

Now lets continue with what we are here for which is the Shared Hosting

files and folders structure
  • Prepare your nodejs app as a simple server for your flutter web app here is sample code

app.js

package.json

  • Create a folder and name it (“public-flutter”) and then put your flutter web app in the folder you have just created so nodejs can serve it through the server
  • Now archive the whole nodejs app folder using ZIP and upload it to your shared hosting through File Manager in the CPanel and extract it to your destination folder (ex. home/<your_username>/flutterwebapp)

And then proceed with your Nodejs app setup on your shared hosting

Go to Software Section

Once you are inside the control panel

  • Search for “Setup Node.js App” and select it.

You will see all your web apps here
  • Click on “Create Application”

Create application page
  • “Application Root” should be your Repository Path from the previous step
  • “Application URL” should already hold your domain name do just choose what route do you want your web app to run on.
  • “Application startup file” must basically point to the js file which creates the server. If you have server creation in app.js, just enter app.js and If you created your node server using the Express framework, then it should “./bin/www”.
  • Click on “Create”. This will start the node app and should reload the page, with a “Detected configuration file” section. This should detect your package.json (packaje.json should be in the root folder of your app)
  • Click on “Run NPM install”. This is basically installing all your npm packages listed in your package.json
  • Click on “Restart” and Hurry!! your flutter web app should be up and running in the url you entered in “Application URL”.

Requirements:
Updated and Latest Browsers like (Chrome or Firefox)

PS:
The web app will load after (30s — 60s). it depends on your internet speed and if your browser is not supported try to update it.

Known Problems:

CROS is a pain for flutter developers when they want there app to make http calls through XMLHttpRequest .. so make sure to enable CROS in your server side which has your database.

All the source code of this blog post is on github

https://github.com/3mrdev/flutter_web.git

Thanks for reading i hope i have helped you a bit.

Amr Abd-Alkrim
Software Engineer
Flutter Developer

@3mrdev

My Personal Website

FireBits Software Soultions

en_USEnglish
arArabic en_USEnglish