loading...
SoluteLabs

Flutter for Web: How to Deploy a Flutter Web App?

milindmevada profile image Milind Mevada Originally published at blog.solutelabs.com ・3 min read

With the stable release of Flutter 1.12, Flutter for web is now in the beta channel. But ahead of a beta release, the community has already started building for Flutter web.

While building web apps, deploying it is one of the most essential tasks - be it is for internal QA purposes, for staging, or production environments. Before releasing the Flutter web app, it is required to create a release bundle and a few of the best practices to release, which are explained here in detail.

From my experience of building and deploying apps, I'm going to discuss the Top 5 (IMO) Ways to Deploy Flutter Web Apps. They are:

  1. Firebase Hosting

  2. Github Pages

  3. Netlify

  4. Codemagic Static Pages

  5. AWS S3 (through codemagic)

#1: Firebase Hosting

Step 1: Create a project on Firebase console
Step 2: Download Firebase CLI
Step 3: Login via CLI, execute the command
firebase login

-----

Step 4: Choose "Hosting" when asked for a feature

----------

Step 5: Then, Select an existing Project

----------

Step 6: Choose build/web as a directory & configure as a single-page app

----------

If you see, File build/web/index.html already exists. Overwrite?
Then select **NO
. So it will not generate a default index.html file

Step 7: Deploy!

firebase deploy

----------

#2: Github Pages

Pre-requisites: Create a repo on Github.

Step 1: Use this pub

peanut | Dart Package

Execute the command

flutter pub global run peanut:peanut

Step 2: Flutter web-related files will be generated to the separate branch gh-pages (Don't forget to push the branch origin)

Step 3: Change the GitHub pages source branch.

Go to: Repository → Settings → Options → Github Pages → Source branch: select gh-pages

----------

Step 4: Web app will be deployed to

http(s)://<username>.github.io/<build>

#3: Netlify

Pre-requisites: Create an account on https://www.netlify.com/

Approach 1:

Step 1: Drag & Drop build/web folder to dashboard

----------

Step 2: The web app will be deployed and the domain will be given to you.
Step 3 (Optional): The web app can be connected with the custom domain/subdomain.

Approach 2:

Step 1: Use the same peanut pub

peanut | Dart Package

Step 2: Generate web-related files to the gh-pages branch
Step 3: Choose New site from git on the netlify dashboard.
Step 4: Choose the repository & select branch to deploy

----------

Step 4: Deploy Site.

#4: Codemagic Static Pages

Step 1: Connect repository to https://codemagic.io/
Step 2: Go to Settings - Publish - Codemagic static pages
Step 3: Choose your custom subdomain

----------

Step 4: Trigger a build, on the success, it will be deployed to:

https://sub-domain.codemagic.app/

#5: Deploy on AWS S3 (via Codemagic)

Step 1: Log in to your AWS Management Console.
Step 2: Click on your user name at the top right of the page.
Step 3: Click on the Security Credentials link from the drop-down menu.
Step 4: Find the Access Credentials section, and copy the latest Access Key ID.
Step 5: Click on the Show link in the same row, and copy the Secret Access Key.
Step 6: Choose repo on codemagic
Step 7: Go to Settings - Publish - AWS S3 Bucket

----------

Step 8: Fill the Access key ID, secret access Key, and Bucket name
Step 9: Trigger a build, on the success, it will be deployed to an S3 bucket

We have enough approaches to deploy/release a Flutter web app, that can be chosen for the QA environment as well as the production releases. Connecting it with CI/CD like Codemagic will reduce the repeating effort of manual deployments.

Posted on by:

milindmevada profile

Milind Mevada

@milindmevada

Mobile Software Engineer. Focused on Flutter and Native Android development.

SoluteLabs

SoluteLabs is a high-performance team of 25 focused on mobile and web design and development

Discussion

pic
Editor guide
 

You can deploy your flutter web app in a shared hosting with Nodejs or in VPS server with Python Follow this Medium Blog Post

medium.com/firebits/deploy-flutter...

 

Your links are pointing back to this article.