Deploying Flutter Web App on Live Server

So you have your very first Flutter web app developed, tested and everything works just like what your customer wanted. It's time to bring your newly-developed app to live. Here's how to do it.

Note: The following steps will be carried using Windows 11. Some of the steps may differ on older Windows/Linux/MacOS but ultimately it should work as well.

Here's the breakdown of the article:

1. Build Your App
2. Install Necessary Software
3. [Optional] Serve Your Web App using Express
4. Configure Firewall and Port Forwarding
5. [Optional] Configure Backend for CORS

Build Your App

First thing first, our app need to be built for production. Fire up your Terminal/PowerShell in your project directory, and enter the command:

PS flutter build web

Flutter will use dart2js compiler to compile your project into a web project. The compiled program will be inside your_project_directory/build/web/. This directory can be copied to your live server.

Install Necessary Software

A web server is needed to serve the web app. You can use whatever web server of your choice. However in this example, I will use Express to serve the web app. Based on their website:

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

To use Express, Node.js is needed. Download and install Node.js here.

After Node.js is installed, use npm to install Express. Open up new Terminal/PowerShell window and enter:

PS npm install express

[Optional] Serve Your Web App using Express

You can skip this step if you use your own web server of choice. If you followed my steps above, you can keep reading.

To serve the web app using Express, you need to write a script to tell Node.js which framework to use, where to host, and some network parameters. In your compiled web app directory, create a JavaScript file and write:

// Define the variables
const express = require('express');
const app = express();
const PORT = 60000;
const HOST = '0.0.0.0';

// Serve static files from the project directory
app.use(express.static('.'));

// Listen to the network
app.listen(PORT, HOST, () => {
    console.log(`Server running on port http://${HOST}:${PORT}`);
});

I will explain a bit on this file: in this case we use port 60000 for our web app, and host '0.0.0.0' means it allows all types of connections to access to this web server. The Express will use current directory to serve static files.

This is the minimal script that just enough to make it works. Save this file as 'server.js' then open up Terminal/PowerShell again in current directory and enter the command:

PS node .\server.js

Configure Firewall and Port Forwarding

We have one more step to bring the web app online, which requires us to configure firewall and port forwarding so the outside connection can access the app.

Open Up a Port

Open up your Windows Defender Firewall from Start, then go to Advanced Settings (Highlighted).

It should pop up a new window. In the left pane, select Inbound Rules, and then create a new rule (Highlighted).

Our rule type should be Port, then apply to TCP, then points to port 60000 (depends on your configuration for the web server).

In the next step, allow the connection, set up your rule name and save it.

Port Forwarding

Access to your router setting and create a port forwarding rule to point to your web server's port (same as your newly-created firewall rule). It should roughly looks something like this:

The Local IP should be your live server's local IP.

Voila! Your server that runs Flutter Web App is now live to the public!

[Optional] Configure Backend for CORS

It important to know that Flutter Web App requires to have CORS (Cross-Origin Resource Sharing) support, as modern web browsers are enforcing CORS as a part of modern web standards.

If your web app is not connecting with cloud services like Firebase but with your own API backend, you should make sure your backend has implemented CORS support, else it will not work (as web browser will refuse to establish connection with backend).

I will use FastAPI as example, it must have the following:

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware


# Create a FastAPI instance
app = FastAPI()


# CORS Origins
# Put your own URL/Dynamic DNS addresses
origins = [
    "http://127.0.0.1:60000",
    "http://mydyndns.ddns.net:60000",
    "https://mydyndns.ddns.net:60000",
]

# Configure CORS
app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

Restart FastAPI, and it will only accept any connection from the specified URL and port.

Thanks for Reading ;)

Hope this serves as a useful guideline for anyone who wanted to bring their first Flutter Web App online.