54

I was learning Flutter web. Now I want to deploy this code in the real server. The flutter code here: in the lib folder

void main() => runApp(new MyApp());    
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter layout demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter layout demo'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

How can I deploy this code on the server ? I am new on the Flutter web.

Samet ÖZTOPRAK
  • 3,112
  • 3
  • 32
  • 33
John
  • 2,633
  • 4
  • 19
  • 34

6 Answers6

55

[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.

See https://docs.flutter.dev/deployment/web

[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 links: https://dart.dev/tools/webdev#build

Here's the running flutterweb app

Mahesh Jamdade
  • 17,235
  • 8
  • 110
  • 131
  • 2
    In my case only `index.html`, `main.dart.js` and `assets` are actually needed on the production server. The app works fine without the `packages` folder (perhaps because I'm not importing any external plugins?). Anyway, since the `packages` folder is 50 MB and contains 330 items, removing it dramatically speeded up my upload time. – Magnus Jun 21 '19 at 17:04
  • @MagnusW yes that works too,thanks for mentioning that :) – Mahesh Jamdade Mar 30 '20 at 07:37
  • is there any video tutorial? – chirag patel Jul 03 '20 at 07:07
  • You can find many resources online ,flutter.dev is the right place to go and I am sorry if this is not clear to you I wrote this long back and flutter web has evolved a lot over time, let me know if you have any issue deploying it should be straight forward ?I would be happy to help : ) – Mahesh Jamdade Jul 03 '20 at 07:17
  • 1
    @MaheshJamdade Can we use apache web server to host flutter web app, Do we need to add any additional components on server side, my flutter web app uses firebase API, what are the server configurations required to host flutter web app. – iosdev1111 Aug 27 '21 at 11:31
10

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.

Amr Abd-Alkrim
  • 354
  • 5
  • 12
  • Hi, I wonder if we use the node js using your code, and after we enter "node app.js" how can we open the app in the browser? Are we still need a port (domain.com:port)? – heathscliff Nov 17 '21 at 02:17
8

Here is the simple way to deploy your flutter web application on amazon web server.

Following is the simple process i follow.

  1. Build flutter web: flutter build web —release
  2. Create instance on aws ec2 server: mean allocate some memory for your website on server. Instance is the virtual server in aws cloud.
  3. Connect to your server(instance) with the help of putty :
  4. Install Vesta control panel on your server. (you can install other control panel too if you don't like vesta).
  5. Upload your content(website) on server.(With the help of FileZilla you can easily upload your website content on server)

Here is the simple video tutorial: https://youtu.be/htuHNO9JeRU

Abdullah Khan
  • 1,365
  • 15
  • 15
7

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.

FxRi4
  • 1,096
  • 10
  • 15
5

Nota Bene - Using flutter 2.0 as of today, I am seeing a bug where the images are not uploaded. Performance is also not the best as of today. Bookmark this and I will update with workarounds.

One solution for those who use VPS/Shared hosting of any kind:

  • Open the local build folder
  • Compress (zip) the web folder
  • Upload the web.zip file (ftp or file manager)
  • On your server (for example on cPanel choose Extract from the File Manager)
  • Rename the web folder to whatever you like
  • Note that if you are not using the website's root directory you must rename the folder in index.html from "/" to "/web/" (to match the name above, see eg.)
  • If you are using the website root folder make sure you move all the files from inside of /web into your / website's root folder (not your server)

eg.

<base href="/"> to  <base href="/web/">

Update for missing images issue

tldr; Two issues - In pubspec.yaml I forgot to uncomment the assets folder and when built for web, the images were placed one folder below the assets folder. Editing the pubspec.yaml and moving the images folder up one level (after building for the web) solved the issue.

My flutter project folder has an assets/images folder in the project root. After not seeing the image online (it was visible during debugging), I found that running flutter build web --release caused my assets folder to be recreated within build/web/assets/assets/images. My code correctly referenced assets/images/file.png. I just moved the images folder up one level when deploying to the web. So my web server root now has assets/images/name.png and the image is showing fine.

Solution - The fix for this was to use the proper structure for assets which is to create top level folders for (images and google_fonts) in the flutter project root. Then the compiler builds the web project correctly. My code references image assets as images/name.png. Pubspec.yaml should reference the assets: as - images/ and - google_fonts/

Tommie C.
  • 12,895
  • 5
  • 82
  • 100
  • Hint for tag just saved me couple of hours struggling. thanks a lot! Now I can Flutter Web Run directly from .net WebApp as one of its Pages and do not use StaticFiles location! – Fellow7000 Dec 17 '22 at 17:11
3

If it's a Firebase project you can use Firebase Hosting.

It will ask you to install Firebase Tools on your system and you will have to initialize it on the root folder of your project.

Then you just have to:

flutter build web
firebase deploy

and refresh browser (maybe with ctrl + F5 or ctrl + shift + r)