How to deploy flutter web on server?

You can deploy your flutter web app in a shared hosting with Nodejs or in VPS server with Python Follow this Medium Blog Post

enter image description here

After you build your flutter web app with "flutter build web" and you want to host it in a shared hosting plan prepare your nodejs app as a simple server for your flutter web app here is sample code

app.js

var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var app = express();

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public-flutter')));


module.exports = app;

package.json

{
  "name": "flutter-web-app",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "express": "~4.16.1",
    "morgan": "~1.9.1"
  }
}

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 his server if you are in a shared hosting just continue with the Blog Post here

and if you are in a VPS server then run this command if you want to server the nodejs app

node app.js

or if you don't want nodejs just use python in your flutter web app to serve it as a simple http server with this command

nohup python -m SimpleHTTPServer 8000 &

Just make sure you are in your web app folder when you run the command. “nohub” will let the command keep running even if you closed the SSH session on Linux . Or you can server your app through Dart pub/webdev tools by using the dhttpd package.


[UPDATE]

To create a production build for web, you can now directly run flutter build web command similar to other platforms (android and ios) and you will see build/web folder generated with the assets folder and you can simply deploy it on your server.

[OLD ANSWER STEP 1 & 2 No longer required ]

you need to do a production build by using a webdev tool, To install webdev you need a pub tool.

  1. so go to the location where you have dart SDK installed and inside the bin folder you should have a pub batch file. You need to provide the bin folder's path to the environment variable in order to use pub from cmd.

  2. open cmd/terminal run the below command to install webdev

    pub global activate webdev

  3. now go to the root folder of your project and do a build in release mode

    flutter build web

  4. you should see a build folder (/build/web) in the root directory, just copy that folder and host it on a web server.

I used the same way to deploy it to GitHub pages here's how in detail guide.

Some useful link: https://dart.dev/tools/webdev#build

Here's the running flutterweb app


if you want to use your own server over web e.q your virtual private host or other host over net :

go to the root folder of your project and do a build in release mode flutter build web,then

upload (/build/web)directory to your server , you can follow this link and configure IIS on windows server.