How to Deploy a Basic Flutter App to the Cloud

Recently, I published a blog called Creating Your Own Chat Room with React, Node, Socket.io and the Cloud which covered the steps of deploying a NodeJs and React application to IBM cloud. It was a lot of fun creating the two part blog and I have really appreciated the response from the Dev.to community.

One of the responses on my blog was a question on how to deploy a Flutter application to IBM Cloud. I personally have no development experience with Flutter but I figured it would be fun to figure out.😅

Well after figuring out the basics of Flutter and how to install Flutter, I was able to figure out the process and I figured I'd share it with you all.

And just to let you know..... It's SUPER SUPER Easy!

So let's get into the steps I took....

NOTE: I am going to step through the entire process of creating a basic flutter app and then deploying it.

If you are only interested in the process of deploying to the cloud, Click here to go to section: Deploying Flutter App to IBM Cloud

Install Flutter on your Local Machine

Since installation varies from system to system, I recommend following the steps on the Flutter Installation Page.

It didn't take much time to install on my Mac machine and the installation instructions on the page were pretty good. So you should be good to go.

Create a Basic Flutter Web App

So once again, it's super easy to setup a basic Flutter app using the Building a Web App Flutter Documentation Page but I will share with you the steps to save you some time.

First, make sure your Flutter environment is ready to go by ensuring you have the latest Flutter SDK:

flutter channel stable
flutter upgrade

Once you have run these commands and things are up-to-date, let's ensure we have a "device" to run our Flutter web application on. Flutter recommends having Chrome installed to test your application, so if you do not already have Chrome installed, go ahead and do that to make things a bit easier: Download Install Chrome

Once you have chrome installed, run this command to ensure you have a "testing device" to test your Flutter Web App:

flutter devices

If you have Chrome installed, you should see something like this:

Now that we have confirmed Flutter is good to go, let's create our Flutter App.

In the terminal, navigate to a location you would like to house your Flutter source code and run this command to create a new Flutter app, replacing "testapp" with your desired application name. NOTE: Application name should be all lowercase:

flutter create testapp

If it was successful, you should see something like this in your terminal:

Once you have successfully created your Flutter app, go ahead and navigate into the your applications directory. Here is the command I used with my application titled "testapp":

cd testapp

Now let's briefly ensure our app is working...

Run/Test Flutter Application Locally

Since we already navigated into our app directory, all we need to do is run this command if you have no other connected devices:

flutter run

If you happen to have other connected devices, run this command:

flutter run -d chrome

Once the command is complete you should see a simple page like this:

Now that our Flutter app is running successfully locally, let's deploy our app to the Cloud.

Deploying Flutter App to IBM Cloud

Build Flutter Application

Before we do anything, we need to build our Flutter application for deployment. While still in the application directory, let's run this command in our terminal:

flutter build web

This will package our flutter application in a directory within our application directory called build/web. This directory will hold all the necessary files that we will need to display and run our Flutter application on our IBM Cloud server.

Before we go any further, we need to make sure we are setup to deploy your application to IBM Cloud.

If you already have an IBM Cloud account and the IBM Cloud CLI on your machine, click here to skip the next two steps: Creating manifest.yml for Deployment Configuration

Sign-up for IBM Cloud

So in order for us to deploy our application into IBM Cloud, we will need to sign up for a free IBM Cloud Lite account. This account will allow you to deploy your application for 🔥free🔥 using IBM Cloud and let you try out different technologies on the cloud. Definitely a great way to get Cloud exposure.

Set up IBM Cloud CLI on Local Machine

Next thing we need to do is ensure that our local machine can communicate directly with our IBM Cloud account. We will need to download the IBM Cloud CLI. This will enable us to run commands that will allow us to interact and modify our IBM Cloud account from our local machines terminal as well as allow us deploy our application.

You only need to do this step once and you will always have the tools you need to access IBM cloud from your local machine terminal. Here is the link to the IBM Cloud installers. Select the appropriate installer and install the IBM Cloud CLI on your machine. The above link should bring you to a page that looks like this:

Note: Depending on when you are viewing this post, there may be a newer addition of the installer. So please only use the above image as reference.

Now that you have installed the CLI, let's do a quick check to ensure that IBM Cloud CLI is correctly installed on our machine. Type this command in your terminal:

ibmcloud

You should see some information populate your terminal window about IBM Cloud and its version and usage. If you do not see this information, please check that you installed the tools correctly.

Now that we have installed the CLI, we are almost ready to deploy our application to the cloud.

Creating manifest.yml for Deployment Configuration

Now that we have our application built and we are setup with IBM Cloud, we need to add a deployment configuration file to our application. While still in our application directory, let's create a new file called "manifest.yml". Let's run this command:

touch manifest.yml

This file will be used for setting up basic configurations on our remote IBM Cloud server that will be needed to run our Flutter application.

Open up our new manifest.yml file in our favorite text editor and enter this text:

applications:
  - name: Flutter Test App
memory: 64M
path: build/web/
buildpack: staticfile_buildpack 
routes:
  - route: flutter-test-app-<your-initials>.<server-closest-to-you>.cf.appdomain.cloud

Replace with your initials and with a the server closest to you. Because you may not know what are possible server names, here is a list. Choose a server that you believe may be closest to you. And if you want to view this list yourself you can enter the command listed below:

ibmcloud regions

//Output
Name       Display name   
au-syd     Sydney   
in-che     Chennai   
jp-osa     Osaka   
jp-tok     Tokyo   
kr-seo     Seoul   
eu-de      Frankfurt   
eu-gb      London   
ca-tor     Toronto   
us-south   Dallas   
us-east    Washington DC   
br-sao     Sao Paulo  

For example, this was my manifest.yml (NOTE: Please do not use the same route name as displayed below. This will likely cause an error saying route is already taken when you attempt to push to IBM Cloud):

applications:
  - name: Flutter Test App
memory: 64M
path: build/web/
buildpack: staticfile_buildpack 
routes:
  - route: flutter-test-app-bsh.us-south.cf.appdomain.cloud

Deploy Flutter App using IBM Cloud CLI

While still in our application in the directory, log into your IBM Cloud account using the IBM Cloud CLI using this command:

ibmcloud login

Enter you username and password and you should be presented with a screen like this:

Once you have logged into IBM Cloud, we need to set our IBM cloud target to Cloud Foundry as we will be using the Cloud Foundry framework to host our application. If you'd like to learn more about Cloud Foundry, check out this link: Cloud Foundry. Type this command to target Cloud Foundry:

ibmcloud target --cf

If it was successful, you should see something like this:

Now that you are logged in and targeting Cloud Foundry, enter this command:

ibmcloud cf push

This will initiate the process of deploying your Flutter application into the cloud. It in general takes a few minutes to deploy this code.

When the the application has been successfully deployed, you should see something like this in your terminal window:

Go to any browser and insert the route value you entered into the manifest.yml. In my case that would be:

flutter-test-app-bsh.us-south.cf.appdomain.cloud

You should now see your Flutter application running at the above url:

And just like that, you have a Flutter application up in the Cloud!!

For many of you who already have an IBM Cloud account and IBM Cloud CLI on your machine this process was sooo much faster. That's the nice thing about the process; Once you deploy one application, the next deployment is that much faster.

Hope that was helpful! 😁

---

LOOKING TO LEARN A THING? Check out some of my previous blogs and tutorials:

Dockers and Dad Jokes: How to Containerize a ReactJS Application

Deploying your first ReactJS application into the Cloud

Creating Your Own Chat Room with React, Node, and Socket.io in the Cloud Part 1 Part 2

==== FOLLOW ME ON SOCIAL MEDIA ====

Twitter: Bradston Dev
Dev.to: @bradstondev
Youtube: Bradston YT