Flutter Web : Create web app and host it with Firebase.

Flutter for Web is announced in Google I/O few months back as a technical preview. Here in the article let’s learn to create a new flutter web app and host the app to firebase with firebase hosting.

Before we start, let’s just upgrade flutter, so we have the latest version. Inside a terminal window, run:

flutter upgrade

Might take sometime relax, have a coffee. Wait for it to complete.. Done. Great!

Create new flutter web project:

Here i’m going to use VS Code as my IDE for editing and creating new flutter web app.

From menu View-> Command palette.. or Ctrl + shift +p

type Flutter Web from suggestion choose Flutter: New Web Project

Next enter your project name and press enter on prompt choose your project location and press enter.

Wait .. it will take some time to completeOnce done, Choose Debug -> start Debugging or Press F5

VS Code will prompt to Activate WebDev press Activate Webdev

VS Code will start compiling the project and serves the project from `web` on http://127.0.0.1

Or manually navigate to the created projects path in terminal and enter the following command.

flutter packages pub global activate webdev
flutter packages upgrade

Running the Flutter Project in Browser

Well, if you followed all the above mentioned steps properly, then this should be as simple as executing the following command from inside the flutter web project directory.

webdev serve
No alt text provided for this image

Once done Open http://127.0.0.1:8080/#/ in any browser. If everything is success it should open the following page.

No alt text provided for this image

Now everything is all set. Open the main.dart file under lib folder and start editing your project.

No alt text provided for this image

Now build the project , enter the following command in terminal

webdev build

After the command is executed, we can see that in our project folder a new folder named build is created.

Deploying to firebase Hosting:

Setup the firebase CLI by following this guide.

.. and continue with this once the setup is competed. Under the flutter project root execute the following command

firebase init

Choose Hosting: Configure and deploy Firebase Hosting sites by pressing space bar and press enter

No alt text provided for this image

Then choose your project from the list and press enter.

Once it asks for public directory enter build and press enter

No alt text provided for this image

When it asks for rewrite index.html give and hit enter

No alt text provided for this image

Once the initialization is completed , Enter the following command in terminal

firebase deploy

If everything went fine the terminal will give the following logs

No alt text provided for this image

The hosting url and project console path is logged press ctrl+ click to open the link. for eg : Hosting URL: https://xyz.firebaseapp.com

Hope this article helps you. Like and share 🙂

Thank you for reading.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s