This is a small document
that will guide you
to deploying your Flutter app
into the web.
We are going to be deploying the app
to fly.io.
This guide will work upon the foundation
of the work done in
flutter-phoenix-channels-demo.
We will be using the finished Flutter app
from this repository
and deploy it to fly.io.
- Deploying your Flutter app as a
PWA👩💻 - Pre-requisites 📝
- Creating the release bundle 🧱
- Deploying to
fly.io🎈 - Re-deploying after making changes ✍️
- And you're done! 🎉
This demo assumes you have the following requirements sorted:
- a fly.io account.
- the
flyctlcommand installed in your computer. - cloned the
flutter-phoenix-channels-demoproject.
If you haven't,
create an account in fly.io.
and click on the
Try It For Free.
You will be redirected to the
sign-up page.
Fill in your details
(or alternatively, login with Github -
which is much easier)
and follow the steps!
After following the steps,
you should have yourself a neat
fly.io account!
You will be redirected to the dashboard,
where you'll be able to manage your own applications.
In addition to having your own
fly.io account,
you also need to install the the command-line interface
flyctl
to make use of fly.toml files
and easily deploy both apps.
These files are deployment configuration files
that this command will use to deploy
the release bundle to your fly.io account.
To install flyctl, check the following link:
https://fly.io/docs/hands-on/install-flyctl/.
Lastly, clone the
flutter-phoenix-channels-demo
repo to any desired destination in your computer,
and navigate into the app folder.
This is where the Flutter app is located.
git clone https://github.com/dwyl/flutter-phoenix-channels-demo
cd appIf you want to run the app to check if it works, you can follow its guide in https://github.com/dwyl/flutter-phoenix-channels-demo/tree/main/app.
This app connects to a Phoenix server
running on localhost,
so you'll have to follow the instructions
that we've just linked,
if you want to run both Flutter and Phoenix locally.
However,
you don't need to run locally.
because we already have the Phoenix server already deployed
in https://flutter-phoenix-channels-backend.fly.dev/.
We are going to focus on deploying this application to the web,
so you'll get to see it working after it's deployed
without having to run a Phoenix server on your computer!
Now that we have all we need, it's time to create our bundle and deploy it.
Let's go! 🏃♂️
After you've cloned the repo,
navigated to the app folder,
where the Flutter app is located
and installed the dependencies,
let's create the release bundle.
The app uses
environment variables
to know which URL the Flutter app should connect to.
The app uses the
String.fromEnvironment()
function to fetch these variables.
Therefore,
we need to
specify the values of these environment variables when creating the release bundle.
We can do this when running the
flutter build command
to create our release bundle.
Run the following command.
flutter build web --dart-define=SERVER_URL=wss://flutter-phoenix-channels-backend.fly.dev/socket/websocket --dart-define=CHANNEL_NAME=room:lobby This will create the release bundle
with the SERVER_URL and CHANNEL_NAME
environment variables set to
"wss://flutter-phoenix-channels-backend.fly.dev/socket/websocket"
and "room:lobby" respectively.
We set these variables by defining them
in the --dart-define argument.
Note
These values are not arbitrary. We already have the
Phoenixserver deployed in the aforementioned URL.
Your terminal will give you feedback on the status of the process.
Running "flutter pub get" in app... 2,615ms
💪 Building with sound null safety 💪
Compiling lib/main.dart for the Web..This should take a few minutes.
After it's done,
the created bundle will be located
in build/web/.
We are now ready
to deploy our release bundle to fly.io!
We can easily deploy our Web Flutter application
to Fly.io
by following their guide.
https://fly.io/docs/languages-and-frameworks/static/
Assuming you have flyctl CLI installed,
you can now run the following command.
flyctl launchThe terminal should yield the following output.
An existing fly.toml file was found for app flutter-phoenix-channels-frontend
? Would you like to copy its configuration to the new app? (y/N) Note
The repo we downloaded already has the configuration. But if you are implementing your own
Flutterapp from scratch, you won't have one. So this step will be skipped, as no configuration file will be found in your case.Just proceed as normal. 🚶
Type Y and press Enter.
This will install all the dependencies
and prepare the application for deployment.
After a few moments,
flyctl will detect the application is a Dockerfile app
and will ask you to choose an app name.
Scanning source code
Detected a Dockerfile app
? Choose an app name (leave blank to generate one): This will be the name of the deployed application
on fly.io and will affect the URL in which it will be deployed.
For now, we are going to be
using flutter-phoenix-channels-frontend as the app name.
Type it into the terminal.
After this, it will ask you to select the organization the application will be deployed into.
? Select Organization: <select your org>After this, the terminal will ask you to choose a region for deployment. Choose the one closest to you for better latency results.
? Choose a region for deployment: <region to select>After selecting the region, you will be prompted the following question.
? Would you like to set up a Postgresql database now? (y/N) Type N, as we don't need a Postgresql database.
After this, the terminal will ask you if you want to setup a Redis database.
? Would you like to set up an Upstash Redis database now? (y/N) Similarly, type N, since we don't need it.
The terminal should yield the following output now.
Wrote config file fly.toml
? Would you like to deploy now? (y/N) If you wish to deploy the application now,
type y and press Enter.
This will build the image
and deploy the application to fly.io.
This might take some minutes, so hang on tight! 👍
After the process is complete, the terminal should state:
1 desired, 1 placed, 1 healthy, 0 unhealthy [health checks: 1 total, 1 passing]
--> v0 deployed successfullyThat means we've correctly deployed it! 🎉
If you want to check the deployed app,
visit fly.io,
log into your account
and search for it -
its name is flutter-phoenix-channels-frontend
we defined earlier.
Or alternatively, type fly open
and a browser window should open with the deployed app!
Everytime you make a change
and want to redeploy the application,
just run fly deploy.
Since we've already done the initial configuration needed,
fly deploy will just re-build the app
and deploy it to the app that's already deployed,
using the fly.toml configuration file you've just created.
Congratulations!
You now know how to deploy your Flutter
application to the web!
Give yourself a pat on the back! 👏