Build and test a simple flutter web app using webdev and live-server

MichaelHo — Sat, 15 Jun 2024 07:11:20 +0000

Intro

As a frontend web developer specializing in vue.js. This is my first try to build flutter web app .Let's begin!

first try

Step1: Create a flutter app

To start, create a new Flutter project by running the following command:

flutter create test_demo_app

Note: I have tried flutter create testDemoApp or flutter create test-demo-app Flutter CLI does not allow these naming conventions.Therefore I use snake case to start my project.

Now We can use following command to run and demonstrate my web app

flutter run -d web-server

As You can see it serve on http://localhost:50367.
open this URL in your preferred browser.

Now We build the App

flutter build web

This will generate build/web folder.

Testing the built App

To test if the build is successful, you can use live-server.First, install live-server globally.

npm install --global live-server

Then navigate to the build directory and start the server:

cd build/web
live-server .

Now You'll see the same result as when you ran flutter run -d web-server.

Note : you'll see index.html in build/web.Maybe you'll try live-server index.html.You may see an empty page.Ensure you run live-server from the build/web directory without specifying index.html.

What is alternative? Using similar package in Dart?

If you prefer using a package in Dart rather than live-server, you can try webdev

You can install it globally with the following command.

dart pub global activate webdev

Then in you project folder,run:

webdev serve

Troubleshooting `webdev`

If you encounter problems when trying webdev,It might be because the global installation is saved in the .pub-cache folder.You need to add the following path to your .zshrc or .bashrc:

export PATH="$PATH":"$HOME/.pub-cache/bin"

Still having problem ?

If your CLI tool indicates that you need a dependency on build_runner and build_web_compilers in pubspec.yaml

You can edit pubspec.yaml and retry this.
Here is an example of pubspec.yaml:

name: your_project_name
description: A new Flutter project

publish_to: 'none' # Remove this line if you want to publish to pub.dev

version: 1.0.0+1

environment:
  sdk: ">=2.12.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2

dev_dependencies:
  flutter_test:
    sdk: flutter

  build_runner: ^2.4.0 // add this to pubspec.yaml
  build_web_compilers: ^4.0.4 // and then add this to pubspec.yaml

Now try webdev serve again.

DEV Community: MichaelHo