Simplest way to deploy a Flutter Web App

Flutter is a cross-platform framework which allows us to build and deploy apps for different platforms using a single codebase.

In this tutorial, you'll learn how to deploy your Flutter webapp using Railway.

Let's dive in!

Open your IDE terminal and run

flutter build web --web-renderer html

This will ensure that the webapp uses html rendering on all devices that it is accessed from.

Let the app build run:

Next

In the project folder look for build/web file directory

Right click on the web directory and open the file -> Use Finder(mac)/File Explorer(Windows).

The web directory carries our whole compiled Flutter web app.

Next step is to commit the files to github.

Open github and create a new repository with your desired name.

You can make the repository public/private depending on your requirements.

Click on upload existing files as seen above and then drag and drop the contents from our web directory to the github repository and wait for all files to be uploaded.

Once upload is done, commit changes and wait for the files to be proceed.

Your repository should now look like this 👇🏾

Let's set up railway

Next go to railway and follow below steps.

1. Click on start a new project
   

2. Choose deploy from github repo

1. Login and authorize railway with your github account

1. Choose repository to deploy, ours was 'myappname'

1. Select Deploy Now

1. Wait for build to finish

1. Select Add a Domain

1. Voila! You now have successfully deployed your Flutter Webapp, you can access it through the link provided.

Here's the example site

github webapp project

Connect with me on twitter 😊 if you have any questions.