Deploying Flutter Web App on Live Server
Published: 2024-02-08 01:48:31

---
title: Deploying Flutter Web App on Live Server
published: true
description: 
tags: 
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/88mw1oi5kjlyj965urzl.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2024-02-03 01:14 +0000
---

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:

```powershell
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](https://expressjs.com/): 

> 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](https://nodejs.org/en).

After Node.js is installed, use _npm_ to install Express. Open up __new Terminal/PowerShell window__ and enter:
```powershell
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:

```js
// 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:

```powershell
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).

![Windows Defender Firewall](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qauynnuhz2t1ilb9jxzh.png)

It should pop up a new window. In the left pane, select __Inbound Rules__, and then create a __new rule__ (Highlighted).

![New Inbound Rule](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dl9y8bsswkc5365x9vhr.png)

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

![Rule Type](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8txyfdy2zzwq0o7w20ss.png)

![Protocol and Ports](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hs6gbh0znhr3v3ie6uk1.png)

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:

![Port Forwarding](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2z3kbnnwu74ljds4buc7.png)

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:

```python
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.