How to deploy Flutter Web App?

Heya,

Just came across this answer and decided to write some general guidelines for anyone who comes across this in the future despite the old question.

To deploy a Flutter web app to an existing droplet, please follow the outlined steps:

Step 1: Make sure you have built your Flutter web app using the flutter build web command.

Step 2: SCP or SFTP the build output, typically found in the build/web directory, to your droplet.

Step 3: Install a web server like NGINX or Apache if you haven’t done so on your droplet. Then, point it to the directory where you uploaded your build output.

Remember, you can easily manage your files with scp or sftp & install web servers (like NGINX or Apache) with apt on Ubuntu.

Please note: if you need to run your Flutter web app alongside another application, you should properly configure your web server to serve multiple applications.

You can find more detailed instructions on how to install and configure web servers such as NGINX or Apache, and SFTP related help on DigitalOcean’s documentation:

• How to install NGINX
• How to install Apache
• How to use SFTP

Hope that this helps!

Heya,

Here is another pint of view on how to do that, depending on what you already have configured on your system

Deploying a Flutter web app to an existing droplet involves the following steps. You would need to make sure that the server is capable of serving static files which is required by Flutter Web.

1. Build the Flutter Web App: First, ensure that you are on the Flutter’s stable channel and then upgrade it:

flutter channel stable 
flutter upgrade

Then, navigate to your project directory and build the Flutter web application:

cd your_project_directory 
flutter build web

The above command will generate a build directory in your project. Inside this directory, you’ll find another directory named web which contains all the static files needed to run your Flutter web app.

2. Prepare the Server: SSH into your droplet, install a web server like Nginx which can serve static files:

sudo apt update 
sudo apt install nginx

Now, create a directory under the /var/www/ directory where you’ll upload your Flutter web app’s static files:

sudo mkdir /var/www/your_project

3. Upload the Flutter Web App to the Server: From your local machine, you can use SCP (Secure Copy) or rsync to upload the web directory’s contents to the directory you’ve just created:

scp -r build/web/* your_server_username@your_server_ip:/var/www/your_project

Or with rsync:

rsync -avz -e "ssh" --progress build/web/ your_server_username@your_server_ip:/var/www/your_project/

Remember to replace your_server_username and your_server_ip with your droplet’s username and IP address.

4. Configure Nginx: Create a new Nginx configuration file:

sudo nano /etc/nginx/sites-available/your_project

And then add the following configuration. Replace your_domain and your_project with your domain name and project name:

server {
    listen 80;
    server_name your_domain;

    location / {
        alias /var/www/your_project/;
        try_files $uri $uri/ /index.html =404;
    }
}

Now, enable this Nginx configuration by creating a symbolic link to the sites-enabled directory:

sudo ln -s /etc/nginx/sites-available/your_project /etc/nginx/sites-enabled/

+And finally, restart Nginx for the changes to take effect:

sudo systemctl restart nginx
    ```
5.  **Update DNS Records**: Finally, you need to update your DNS records so that your domain name points to your droplet's IP address. You can usually do this from the control panel provided by your domain registrar.


And that's it. Your Flutter web app should now be deployed to your existing droplet and accessible via your domain name.