Simplest way to deploy a Flutter Web App
Tags: webdev, flutter, railway, deploy
Published: 2023-06-12 12:57:50

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](https://railway.app?referralCode=Szi12H).

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/74jrtfpfqw16tsluoc7w.png)

**Next**
 
In the project folder look for build/web file directory


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5mh30br4iu2hsmm9j7yg.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/93009s92svl33cqr6nal.png)

The web directory carries our whole compiled Flutter web app.

Next step is to commit the files to github.

Open [github](https://github.com) and create a new repository with your desired name.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5dlwftgwcpwrzhot7jyg.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bvc4fdpr041pwc8ypksp.png)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cdf1lqbqtdl44ok3c2d0.png)

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.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5dnzywfkhijja6kwbvma.png)

Your repository should now look like this 👇🏾

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4zvwcehdxuakhbno638y.png)

**Let's set up railway**

Next go to [railway](https://railway.app?referralCode=Szi12H) and follow below steps.

1. Click on start a new project
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/phq3xgo6zfokhsliaf5l.png)


2. Choose deploy from github repo

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ugy92d0ageb9et2y8gdf.png)

3. Login and authorize railway with your github account

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tgz8fvxtddoialf73qfu.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/unbwdt45ptucxhdvs56y.png)

5. Select Deploy Now

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dvuyp51m2vdhucwzj08u.png)

6. Wait for build to finish

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ogconxta81jwc5i4422u.png)

7. Select Add a Domain

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fbqcwc2xoipal9yq24sn.png)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yjs0z4q1vtyxxz5l9z0u.png)

Here's the [example site](https://myappname-production.up.railway.app/#/)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ipqjbanz4okp29ugcjqk.png)

[github webapp project](https://github.com/godopetza/myappname)

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