In this example, we are going to show you how to host/deploy Flutter Web App in the VPS server. You will learn to build static files to host on a server, deploy it and map domain names. See the steps below.
Read this also: How to Deploy Flutter Web App on cPanel Shared Hosting
Step 1. Build Flutter Web App
In the terminal hit the command below to generate static files to deploy on VPS server.
flutter build web
It will generate static files to host at your_project/build/web/ , files may look like below:
Step 2: Edit index.html and Remove <base> Tag:
Open index.html with your code editors like VSCode or Notepad and remove the code line.
Remove this line or remove "/" from href attribute.
Step 3: Buy VPS/Dedicated Server
You can buy VPS/Dedicated server from the hosting providers below.
- Contabo VPS/Dedicated Server (I guess cheapest VPS in the world)
- Bluehost VPS Server
- Hostgator VPS Server
Step 4: Deploy Generated Flutter Web Static Files
Now is the time to deploy the generated flutter web static files. For this, you simply need to upload the files to the public root folder of any website. When you buy VPS server, you may get root login credentials. You can install aaPanel on your server by SSH access. In this example, we are going to use aaPanel. Alternatively, you can install cPanel, Plesk, or any other hosting management system.
Login to aaPanel and create a website at "Websites" tab with your domain name.
Here, we have created a website with the domain name flutter-web-vps-example.fluttercampus.com, you can check this URL (Wait on slow loading), we have already hosted a basic Flutter web example.
Now open the path and upload all your generated static files from /build/web/ folder.
Now, check your domain name on the browser. It will start showing your Flutter Web app from the VPS server with Domain name URL.
In this way, you can host Flutter Web Build files on a VPS server.