Step 1: Install OS for your VPS
You can choose any Linux OS for your VPS setup. In this tutorial, we will use Ubuntu 24.04 as an example.
Step 2: Access your SSH client
Access the "SSH Access" tab in the admin panel and select your preferred method for connecting to your SSH client. You can use the browser-based terminal (located in the top right corner) or the command ssh root@your_vps_ip in your Terminal or Putty for manual connection.
Step 3: Building Flutter Web on VPS
1. Install Google Chrome on your VPS
Google Chrome is essential for running and debugging Flutter web apps. Download the latest version of Google Chrome for Linux:
2. Install the downloaded Chrome package:
sudo apt install ./google-chrome-stable_current_amd64.deb
3. Set Chrome Environment Variable
After installing Chrome, set the CHROME_EXECUTABLE environment variable, so Flutter knows where Chrome is located. Add the following line to your .bashrc file to export the Chrome path:
echo 'export CHROME_EXECUTABLE=/usr/bin/google-chrome' >> ~/.bashrc
Apply the changes made in .bashrc to your current session:
source ~/.bashrc
4. Install Flutter via Snap
Flutter can be installed easily using the Snap package manager.
Update your package list:
sudo apt update
Install Snap if you don’t have it already:
sudo apt install snapd
Install Flutter via Snap with classic mode enabled:
sudo snap install flutter --classic
5. Enable Web Support in Flutter
Flutter needs to be configured to support web development, run the following command to enable web support in Flutter:
flutter config --enable-web
6. Create and Run a Flutter Web Project
Now that Flutter is installed and configured for the web, you can create and run your first web project:
flutter create my_web_app
Navigate into the project directory:
cd my_web_app
Run the app using the web server device (with a custom port and hostname):
flutter run -d web-server --web-port=8080 --web-hostname=0.0.0.0
Step 4: Configure Firewall to Allow Web Traffic
To access your Flutter web app from outside the VPS, ensure your firewall allows traffic on port 8080. Allow incoming TCP traffic on port 8080:
sudo ufw allow 8080/tcp
Reload the firewall to apply the changes:
sudo ufw reload
Step 5. Access Your Flutter Web App
Once the app is running, you can access it from any browser. Open your browser and navigate to the following URL, replacing your_ip address with your VPS IP address:
http://your_ip:8080
Your Flutter web app is now built and deployed to your VPS!
For further development, please check the official Flutter documentation 🚀