How to Deploy a Basic Flutter App to the Cloud
Tags: beginners, flutter, cloud
Published: 2021-05-17 19:03:05

Recently, I published a blog called [Creating Your Own Chat Room with React, Node, Socket.io and the Cloud](https://dev.to/ibmdeveloper/creating-your-own-chat-room-with-react-node-and-socket-io-in-the-cloud-part-1-13dg) 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](#deploy-flutter-app)**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q3pwabyxv7p1h5mr1zae.png)

# Install Flutter on your Local Machine

Since installation varies from system to system, I recommend following the steps on the [Flutter Installation Page](https://flutter.dev/docs/get-started/install).

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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q3pwabyxv7p1h5mr1zae.png)

# 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](https://flutter.dev/docs/get-started/web) 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:

```bash
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](https://support.google.com/chrome/answer/95346)

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

```bash
flutter devices
```
 
If you have Chrome installed, you should see something like this:

![Flutter-Devices-Success](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/26d1ijczcsqnynfeb01o.png)

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:

```bash
flutter create testapp
```

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

![Flutter-Create-App-Success](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ds0sldzs15j751tese0.png)

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":

```bash
cd testapp
```

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q3pwabyxv7p1h5mr1zae.png)

# 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:

```bash
flutter run
```

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

```bash
flutter run -d chrome
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q3pwabyxv7p1h5mr1zae.png)

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

![FLutter-App-Run-Local](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ts6zq03mlq50q3emnw6x.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q3pwabyxv7p1h5mr1zae.png)

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

# Deploying Flutter App to IBM Cloud <a name="deploy-flutter-app"></a>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q3pwabyxv7p1h5mr1zae.png)

## 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:

```bash
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](#manifest-creation)**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q3pwabyxv7p1h5mr1zae.png)

## 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](https://cloud.ibm.com/registration). 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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q3pwabyxv7p1h5mr1zae.png)

## 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](https://www.ibm.com/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](https://github.com/IBM-Cloud/ibm-cloud-cli-release/releases/). 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:

![IBM-Cloud-CLI-Releases](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/utqn16xet2vtum6p46vt.png) 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q3pwabyxv7p1h5mr1zae.png)

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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q3pwabyxv7p1h5mr1zae.png)

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:

```bash
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.

![IBM-Cloud-CLI-Confirm](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xp31fdts5hy4hz3znobe.png) 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q3pwabyxv7p1h5mr1zae.png)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q3pwabyxv7p1h5mr1zae.png)

## Creating manifest.yml for Deployment Configuration <a name="manifest-creation"></a>

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:

```bash
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:

```bash
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 _<your-initials>_ with your initials and _<server-closest-to-you>_ 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:

```bash
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):

```bash
applications:
  - name: Flutter Test App
memory: 64M
path: build/web/
buildpack: staticfile_buildpack 
routes:
  - route: flutter-test-app-bsh.us-south.cf.appdomain.cloud
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q3pwabyxv7p1h5mr1zae.png)

## 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:

```bash
ibmcloud login
```

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

![CLI-IBM-Cloud-Login](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a0wieoic3xhh8dv4sphx.png) 

![CLI-Authenticated-Success](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nzhmrydq2em8u5aq3uan.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q3pwabyxv7p1h5mr1zae.png)

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](https://www.ibm.com/cloud/cloud-foundry). Type this command to target Cloud Foundry:

```bash
ibmcloud target --cf
```

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

![CLI-Target-CF](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d3izbju5g1z55wnr5hqv.png) 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q3pwabyxv7p1h5mr1zae.png)

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

```bash
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:

![CF-Flutter-App-Push-Success](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lbagavrpfjw5bvhg69i7.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q3pwabyxv7p1h5mr1zae.png)

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

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

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

![Flutter-App-Run-IBMCLoud](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mws8ri5rodml2pi77qo3.png)
 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q3pwabyxv7p1h5mr1zae.png)

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

For many of you who already have an [IBM Cloud account](https://cloud.ibm.com/registration) 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! 😁

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q3pwabyxv7p1h5mr1zae.png)

----

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

[Dockers and Dad Jokes: How to Containerize a ReactJS Application](https://dev.to/ibmdeveloper/dockers-and-dad-jokes-how-to-containerize-a-reactjs-application-5no)

[Deploying your first ReactJS application into the Cloud](https://dev.to/ibmdeveloper/deploying-your-first-reactjs-application-into-the-cloud-31je)

Creating Your Own Chat Room with React, Node, and Socket.io in the Cloud [Part 1](https://dev.to/ibmdeveloper/creating-your-own-chat-room-with-react-node-and-socket-io-in-the-cloud-part-1-13dg) [Part 2](https://dev.to/ibmdeveloper/creating-your-own-chat-room-with-react-node-socket-io-and-the-cloud-part-2-4l12)

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

Twitter: [Bradston Dev](https://twitter.com/BradstonDev)
Dev.to: @BradstonDev 
Youtube: [Bradston YT](https://www.youtube.com/channel/UC6Ky8s71RP65akLb_XV1_OA)