“Holy frijoles! That thing runs faster than me” - Speedy Gonzalez
How I Got Distracted
While compiling a list of helpful resources for Flutter devs, I stumbled upon Globe.dev. True to form, I decided to check out this shiny new toy while procrastinating.
Globe caught my attention. It was built by the same team behind FlutterFire, a set of Firebase tools for Flutter. It's one of my favourite CLI tools ever built.
FlutterFire once saved me at work. 4 hours deep into an incorrect config bug had me pulling my hair out, trying to fix it. If you plan to use Firebase, I can't recommend it enough. But enough about FlutterFire - let's talk about Globe.
What Exactly Is Globe.dev?
Globe is a serverless platform for deploying Dart apps, including Flutter web projects. It aims to make deployments quick and seamless. If you’re a web dev, think of Globe as a Netlify or Vercel equivalent, but for apps built with Dart.
My experience with Flutter Web
I've used Flutter a lot for mobile app development. I rarely get to use Flutter Web at work, besides an experimental WhatsApp UI clone I built three years ago. It was my way of learning to build responsive apps using Flutter's built-in responsive widgets and to see whether Flutter Web would suit our business needs. My lazy, super scientific way to test responsiveness was to build for Flutter Web. Then, I resized the window to test the app at different breakpoints.
Flutter Web had a bad reputation for slow loading and choppy scrolling. After testing a simple UI clone, I lost faith in it for web apps and went about my merry app-making ways.
It's fun to revisit those early experiences. I've come a long way since then, and so has Flutter.
A tad bit about performance
It might surprise you to learn that I am a human being. This class of mammals has its pros and cons. It includes being the least endangered animal on Earth, but we must pay taxes.
Another one of these features we come with is being able to identify when software is slow. In the Savannah, we scanned for threats in the long grass. Now, we use our senses to see that the new iPad Pro has a 120Hz adaptive frame rate. It draws smoother and is more responsive than ever.
We love performant things, and companies know this. They have teams that ensure you have the best User Experience (UX) possible. They find pain points and optimize for performance and latency.
What I'm trying to point out is that users like performance, and you should optimize for it.
Why I decided to use Globe
Globe claims to optimize their infrastructure for Flutter web apps. So, I decided to test this. From my sleuthing (reading the docs), it hashes your assets and applies filename fingerprinting. This improves cache performance and helps the CDN do its job better.
So I decided to resurrect my old project with a fresh coat of paint by using Globe as the deployment platform.
Here are the steps I followed to get a Flutter Web project running. I set up CI/CD and powerful previews, all while keeping your source control tidy.
Steps to deploying your flutter web app
1) Make a GitHub repository.
The first step is to make sure you have a repository on GitHub with the code you want to deploy. Here’s a short guide.
I will be using this starter repository.
2) Make an account on Globe.dev
Next, we login to Globe.dev using our GitHub credentials. You can do this with email, but I prefer GitHub since it's easier to manage our repositories and can add CI/CD easier down the line.
After logging in you should be taken to the dashboard.
3) Let's create a new project
Hit the Create Project button and you will be presented with this page.
Here you can pick how you want to deploy the project, either by importing from GitHub or using the CLI. I tried both methods, and they work well, but I prefer working from the command line so let's do that.
Navigate to your project directory and let's run these commands.
dart pub global activate globe_cli
This will globally activate the globe_cli package. You can then use it as a command-line tool from anywhere on your system.
- Note that this command can be run on any directory, I just picked the project directory since it will be easier to run the other commands one after the other.
Next, let's login to your globe account with this command.
globe login
You will get this message after
You will see a new browser tab open, close it after it displays success. If a new tab doesn't automatically open, click the link that is displayed in the command line.
If you aren't in your project directory now's the time to navigate to it and let's deploy your project.
globe deploy
You will be given a certain set of prompts and we will answer them line by line to get our project deployed.
When asked about the parent directory since we are already in it (./) we just press return.
You can then rename the app on Globe if you want.
Once linked, the deployment process will begin immediately. The deployment status gets queued, and then to the in-progress state, and then the app gets deployed.
4) Create a production deployment
We've made a preview deployment. It's useful for seeing our changes without affecting production.
We don't have to create another project for our previews, we can just use one deployment to handle all this. Just like having a dev branch and a main branch on GitHub. Super useful!
Since we have previewed our changes, let's make an active production deployment.
When you use the deploy command ‒ deployments act as preview versions. After deploying a preview, Globe gives each deployment a special URL. To make a production deployment ‒ add the --prod flag to the command.
globe deploy --prod
We have a stable production deployment. But, typing "globe deploy" after every push to our repo will get tedious. So let's add some CI/CD magic.
Extra Credit: Adding CI/CD
To take advantage of the CI/CD magic that comes with Globe, Navigate to your deployment on Globe -> Settings -> Git
Connect the repository to Globe. If the repo is not visible, click the link to configure the GitHub app, and add the app to the repository.
After connecting the repository, let's set the deployment branch. I usually use the main branch as a source of truth. I branch off to create features and fix bugs. We want our production deployment to be on the most stable branch.
Add your feature, I'm just going to import my old WhatsApp UI code. I'm going to make a different branch for importing the code, so we don't muddy the production deployment.
git checkout -b import-ui-code
I moved all my code to the lib folder, changed the imports and pushed it to the branch.
git add .
git commit -m "Your commit message"
git push
What's cool is every push, will be built as a preview. We can preview our changes before deploying them. This is very useful, as it prevents any nasty surprises.
This is what our preview looks like.
Now let's create and make a pull request to the main branch, so we can see our changes in production.
Now we can see our changes being built on the production deployment.
All things must pass
In conclusion, we've deployed a Flutter web app to the internet. It is now accessible from anywhere in the world. We've used Globe's powerful preview feature to get a glimpse of what our code looks like in production. We've leveraged the powerful in-built CI/CD using GitHub. I've also shown you an example of how to manage your branches to keep production clean. Leave a comment if you have any questions, and I'll try to answer them.
Here's our app in its full glory.
Top comments (0)