Flutter was first announced at Google I/O in May 2017 with an alpha toolkit and in 2018 at Google I/O, it finally hit version 1.0 with a future new product, called HummingBird. We were all excited and could not wait for its release date and on May 7th 2019 at Google IO 2019, Google finally announced the availability of the Flutter for Web preview version.

Introduction

This article is the continuation of my first article on Flutter For Web: A Complete Guide to Create & Run a Web Application. In this article we will learn how to build and deploy flutter for web applications on Surge. Surge is a static web publishing tool for Front-End Developers. It is the best way for developers to publish static web applications into production.

To learn more about surge, follow the link to get started: Getting started with Surge

Build and Deploy

So without any further delay, let’s get started.

Open your project in terminal by changing the current directory to the one your project is located at and execute the following command.

$ webdev build

Note: if you have problems configuring webdev to run directly, try:

flutter packages pub global run webdev [command] .

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

After the command is executed, you will be able to see that in your project folder a new folder named build is created containing all the files necessary to deploy a web application.

Now, we are going to deploy this folder. There can be a lots of ways for deploying flutter web application, the method that I am going to use is Surge.

It comes as an npm package and helps to deploy static sites to a remote URL. It’s fast, easy and free. With Surge, you’ll easily have something online quickly.

First install the command line tool using npm and then run surge within any directory you wish to publish onto the web. All you need to get started is:

First, ensure you have a recent version of Node.js Then, install Surge using npm by running the following command:

$ npm i -g surge

This command will install surge globally on your system, and hence you can use it everywhere.

You may need to preface this command with sudo

Now, run surge from within the build directory, to publish that directory onto the web. To change your directory to the build directory, first execute the following command:

$ cd build

then run surge to publish the build directory:

$ surge

The surge command will now run. On your first time running this command you will be asked to create an account. Enter your email and choose a password. This is a one time requirement. Surge will display an auto generated sub-domain name. Move your cursor to the domain name and type any name that you want. Once that is done, press enter, surge will now 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 on 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://zubair-portfolio.surge.sh/#/

If you don’t want your project’s url to have the surge.sh part, you can buy a custom domain and configure your project to use it. To learn more about adding a custom domain, follow the link: https://surge.sh/help/adding-a-custom-domain

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

Useful resources

Thats it for this article, if you liked this article, don’t forget to clap your hands 👏 as many times as you can to show your support, leave your comments and share it with your friends.