Flutter For Web: Create and Deploy a Website From Scratch

Photo by Zdeněk Macháček on Unsplash

The project, which was code named Hummingbird, has finally seen the light of the day, with Google announcing the first technical preview of Flutter for Web. This amazing implementation allows us to create Flutter apps, and compile it to a standards-web project, with just a few commands. In this article, we will go through the implementation of Flutter on the Web, from scratch.

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

flutter upgrade

Wait, for it to finish…Done. Great! Go ahead.

Add Dart SDK to Path

We need not install any Dart SDK separately, to be able to run flutter_web. All we have to do is add the existing Dart SDK, which ships with Flutter, to our path environment variable.

The path which we will need to add, is this:

<path to our flutter directory>/bin/cache/dart-sdk/bin

If you need help updating your PATH variable, then refer this for Ubuntu/Linux/macOS, and this for Windows.

With that out of our way, let’s get going with Flutter.

Create and Configure New Flutter Web Project

First of all, we will create a new Flutter project, let’s name it hummingbird, (how original! *winks*). We can create the project manually from the terminal, but an easier way would be to do it using our IDE, so that we don’t have to go through the Flutter Web setup, manually.

Open up VS Code, and press Ctrl+Shift+P, and start typing flutter, we see that in the list of available actions for Flutter, there is an option that says, Flutter: New Web Project.

Select that option and hit Enter. VS Code might prompt to install some required extensions, just agree and install to continue.

In the next screen, type in the name of the project, which for us is, hummingbird.

Once that is done, VS Code will automatically create a new Flutter Web Project for us. Then, from inside the hummingbird project folder, execute the following:

flutter packages pub global activate webdev
flutter packages upgrade

This ensures that the webdev which is needed to build Flutter for Web is globally installed, and the required dependencies are present. The output will be something like this:

The last thing to do here is to ensure that we are able to run the webdev command from our terminal. To do that, we need to add the following folder to our PATH.

<path to flutter directory>/.pub-cache/bin

Once we are done with all of this, congratulations! We are now ready to run Flutter for the Web.

Before we run, let’s check out the new project structure. We can see that there’s a new folder named web which contains two files index.html and main.dart.

The website that we are going to create with Flutter is what we call a SPA or a Single Page Application. So basically what’s happening is that all the Dart code which we write, is compiled into JavaScript, which when embedded inside the index.html file, manipulates the Document Object Model, to render our code on the screen (tried to put it in a simple way). We can also edit the head tag of the index.html file to provide meta tags, for SEO purposes. We will dive deeper into SEO for websites built using flutter, in future articles.

So, let’s just stop talking and start doing.

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

You should get an output like this, on the terminal:

Once you see that succeeded message, you can now take a deep breath, and open up your browser to see the Future of Cross-Platform development. Just navigate to localhost:8080, and the let the magic unfold before your eyes.

On a successful run, you will be able to see this screen:

Using the current method, we won’t be able to see the live changes on our website, so to ensure that we do. Go to your terminal, press Ctrl + C to cancel the current operation, and instead, run the following:

webdev serve --auto restart

Just refresh the browser tab which is running localhost:8080 once, and that’s it. Now all we have to do is make whatever changes we want, to our code inside the lib directory, just like we usually do with a Flutter app, and tada! We can see all changes live, in real-time, right inside our browser tab.

It is to be noted here that this is a stateless hot-reload.

Let’s make a few changes to our Flutter Website (happily glaring every time I write it *sighs*) before we go ahead and build it for release, and then deploy it.

Replace the contents of your lib/main.dart file with the following code:

And in your web/index.html file, make the following changes:

Remember to replace Ayush Shekhar with your name.

After all of this, we have a website which looks like this:

I am already in love. *sighs again*

Build for Release and Deploy

Let’s get this done fast.

Open the project in your terminal and execute.

webdev build

The expected output in the terminal, is something like this:

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

This is the folder, which we are now going to deploy.

There can be a lot of ways for deploying, the method that I am going to use is surge. It comes as a NPM package, and helps to deploy static sites to a remote URL, fast, easy and free. Find out more about it here.

First of all we need Node js installed, so if you don’t have it, get it from https://nodejs.org/en/

Let’s install surge. Open up a terminal and do:

npm i -g surge

This command will install surge globally on your system, and hence we can use it everywhere. Now, we will go back to our hummingbird project folder and execute the following:

cd build
surge

Surge will now ask you for your email and password, quickly key them in. Choose a new password, or enter the one for your existing account. Once that is done, surge will automatically upload and deploy the website, and map it to it’s CDN.

Congratulations! You have successfully created a website with Flutter and deployed it in the internet, for the world to see. You can browse your website by going to the remote URL provided by surge in the terminal output, in my case it’s this: http://clear-balance.surge.sh/#/

I can’t wait to see how this technology grows and flourishes over time.

You can reach out to me on Linkedin, see my projects on Github, or follow me on Twitter, to get regular updates and happenings from the world of Flutter, and mobile development. Thank you for reading.