How to self host Flutterflow on Vercel
If you’re not happy with the load time of your FlutterFlow hosted web application, you’re not alone. We recently had a client who’s initial load time was 12.5 seconds - far too long when trying to make a good first impression and get people to signup.
For those that don’t know, FlutterFlow is a no-code builder that allows you to create applications using the flutter framework. Flutter is a cross platform framework, meaning you can use the same code as a native mobile app, web app, and even TV’s. While FlutterFlow provides the option to host a web version of your application, this feature is still early days and not as performant as some might like.
Luckily, the tool allowed you to export the code base. This meant you can run it locally, add your own code, or build and deploy the web application yourself. I decided to use Vercel due to their very generous free plan that included custom domains, super simple interface, and past experience using their platform. Another popular option here could’ve been firebase.
Getting setup
These are the steps to deploy your FlutterFlow project to Vercel.
Connect FlutterFlow to a new GitHub repository
The FlutterFlow documentation lays out the steps nice and clearly, so I’ll save writing it out twice and just send you to the link instead. You’ll need to create a new GitHub account if you haven’t already before starting this step.
Merge the flutterflow branch into the main branc
If you’re unfamiliar with GitHub, you can do this by clicking the “branches” button, then “New pull request” against the flutterflow branch. Click “Create pull request” and then “Merge pull request” on the next page.
Configure Vercel rewrites
Flutter isn’t a super popular framework that get’s deployed to Vercel every day, so they won’t have automatic configurations setup for this project (but don’t worry, it’s super simple to do). Because flutter is a single page application, every “page” you create only exists on the index page (think of this as the home page).
This means if you want to send users to youapp.com/signup they would be greeted with a 404 error, as the “signup” page technically doesn’t exist. And while you may setup routes in flutterflow to show “/signup” in the URL bar when users go to that page, they’re actually still on the index page “youapp.com”. Rewrites allows us to send all users to the index page, regardless of the page they land on this, while keeping the “/signup” in the URL bar. To enable this, we’ll add a new file to the main branch called vercel.json
It will contain the following content:
Once you’re done, simply scroll to the bottom of the page and commit the new fire to the main branch.
Import the Vercel project
If you haven’t already, head on over to https://vercel.com/signup and create a new account. I’d recommend signing up with your GitHub account, as it makes connecting the repository super simple.
Once you’re on the dashboard, click “Add new…” and the “Project”. On the next page, select “Continue with GitHub” and then “Import” next to the FlutterFlow project you just setup.
Configure the build settings
On the next page, expand the “Build and Output Settings” section. We’ll need to set these up as they are specific to the Flutter framework we’re using. I’ll try my best to explain what each of them mean, but pretty much this is what FlutterFlow is doing behind the scenes when you deploy to the web from inside their editor.
Build Command
This is the command the computer will run when it needs to convert all your code into a few master files. Everything get’s bundled up into one main piece of code, which is what’s sent to your users when they land on your app.
Output Directory
Once your app is built using the above command, the generated files are places in a particular location. As it’s different for every framework, we need to tell Vercel where to look for this code so it can get sent to your users.
Install Command
In order for Vercel to build your project and compile all the code as mentioned above, it needs to install the Flutter codebase itself. This is known as the Flutter SDK (software development kit). There are a few examples of this floating around on the internet, but I’ve found this combination of commands to work best with FlutterFlow specific projects.
Deploy your project
If all is done correctly, your setup should look like this:
Simply click the “Deploy” button, and watch Vercel do it’s magic. Within two or three minutes, your project should be live! Go back to the dashboard and click the visit button to see it in action.
The first few time your load the site, it may take a couple of seconds. But Vercel will quickly learn where your users are, and initial load times should drop to around the 1-2 second mark - a great improvement from the 12 seconds we experienced with the FlutterFlow hosting.
Setup a custom domain (optional)
Under Settings > Domains in Vercel, you have the option to add a custom domain to your project.
Making changes
Eventually you’ll want to make changes to your project in FlutterFlow, and have them update on your newly deployed Vercel project. The good news is it’s just a couple more clicks than the inbuilt web publishing option.
- In FlutterFlow, go to Settings > Integrations > GitHub > “Push to Repository”
- Once that’s done, go to GitHub > Branches > FlutterFlow > “New pull request”
- Create a pull request and merge it into the main branch
And that’s it 😎 Vercel will automatically trigger a new deployment using the same settings you configures during setup. You can monitor the status of the deployment inside the Vercel dashboard, but again it should be live within 2 to 3 minutes depending on how big your app is.
You may ask yourself “can’t I just setup automatic deployment against the flutterflow branch in Vercel?”. Technically yes, but FlutterFlow will overwrite any changes you make to the flutterflow branch, including the vercel.json file we setup for the rewrites. But… having that extra step comes with it’s advantages!
Previewing changes
As your changes get pushed to the flutterflow branch before being merged into the main branch, Vercel will generate “preview” deployments. These allow you to test your new changes in the real world, before making them live to all your users.
The Vercel bot will initiate a new preview deployment when you create the pull request, and post a link to the preview in the pull request comments.
And if somethings not quite right, you can go back to FlutterFlow, make a change, repeat step one, and Vercel will redeploy the preview with your changes. Once you’re happy with the outcome, simply merge the pull request and Vercel will remove the preview deployment for you.
What did we learn?
No-code platforms are great for reducing the barrier to entry for new product makers, but it’s still important to understand what’s going on behind the scenes. This knowledge can be incredibly helpful when you reach the limits of these tools. For example, if you were building a project in Flutter from the start, you were always going to need to host the web application somewhere. But a tool like FlutterFlow allowed us to reach that point much quicker and at a lower cost.
It’s also important to note that FlutterFlow just recently released their web hosting option, so no doubt it’ll improve and get faster over time. But this is still a good option if you ever want to leave the platform, or need to add custom code to your application before deploying (as FlutterFlow doesn’t let you push changes back into their platform).