How to Build and Deploy Flutter Web App on Vercel?
Flutter is an open-source UI toolkit by Google that allows developers to build natively compiled applications for mobile, web, and desktop from a single codebase.
It's known for its fast development cycle, expressive UI, and the ability to create visually appealing applications with minimal effort.
Why Choose Vercel for Deployment?
Vercel is a popular platform for front-end developers, offering a seamless way to deploy and manage static websites and serverless functions. It’s optimized for Next.js but works well with other frameworks, including Flutter.
Deploying a Flutter web app to Vercel is ideal for prototyping because Vercel provides automatic CI/CD, easy integration with GitHub, and a global CDN that ensures fast load times for your app.
![](https://medevel.com/content/images/2024/07/pexels-lastly-699122--2-.jpg)
Step-by-Step Guide to Deploy a Flutter Web App on Vercel
Set Up Flutter Web Project
If you haven’t already set up Flutter for web development, follow these steps:
Install Flutter: Ensure Flutter is installed on your machine. You can download it from the official Flutter website.
Enable Web Support
flutter channel stable
flutter upgrade
flutter config --enable-web
Create a flutter web project
flutter create flutter_app_vercel
cd flutter_app_vercel
Run and test your newly created Flutter app on Google Chrome
flutter run -d chrome
This command will start the Flutter development server and open the app in your default browser.
Prepare the App for Deployment
Build your web app
flutter build web
This command compiles your Flutter app into a directory named build/web
, which contains all the necessary files for deployment.
Ensure Correct Routing: In the index.html
file located in the build/web
directory, ensure that you have the correct base href:
<base href="/">
![](https://medevel.com/content/images/2023/11/UI.jpg)
Deploy to Vercel
Install Vercel CLI:
If you haven’t installed the Vercel CLI yet, you can do so with the following command:
npm install -g vercel
vercel login
Navigate to the build/web
directory and deploy:
cd build/web
vercel deploy --prod
Vercel CLI app will guide you through a series of prompts. Choose the appropriate settings for your project, and within minutes, your Flutter web app will be live.
After the initial deployment, Vercel will automatically handle future deployments every time you push changes to your connected Git repository.
You can also manage your deployments via the Vercel dashboard, where you can see all your projects, logs, and settings.
![](https://medevel.com/content/images/2024/04/Screenshot-2024-04-08-at-09.59.12-1.png)
Final Note
Deploying a Flutter web app to Vercel is an excellent choice for prototyping. Vercel’s ease of use, global CDN, and automatic deployments make it ideal for quickly iterating and sharing your Flutter projects with others.