Build 10x products in minutes by chatting with AI - beyond just a prototype.
Topics
How do you build and release a Flutter web app?
How do I deploy a Flutter web app on Firebase?
How do I deploy a Flutter web app on my own server?
How do I run Flutter web on a local server?
How do you deploy a Flutter web app on EC2?
How do I deploy a Flutter web app to a cPanel server?
As a passionate developer, I've always been fascinated by how technology constantly pushes boundaries. Recently, my interest in the Flutter SDK has grown exponentially due to its promising capabilities. Through this blog post, I aim to simplify the process of how to deploy a Flutter web app, specifically geared towards developers with an existing understanding of Flutter app development.
When I first encountered Flutter, developed by Google, I was instantly drawn by its ability to create natively compiled applications for mobile, web, and even desktop from a single codebase. This powerful capability offered by Flutter helps in taking application development to another level.
Flutter SDK, an open-source UI software development kit, was unveiled to the world by Google in 2015. Since its release, it has been fulfilling its aims to develop beautiful and highly efficient applications that feel natural across different platforms. Not to mention, its vast catalogue of widgets and tools makes the development process a delight!
Developing web applications using Flutter is a seamless experience. Flutter's web support provides a browser-based platform for deploying existing Flutter code written in Dart. It's especially appealing as it offers excellent performance and allows code reusability. Getting started with web development in Flutter is extremely straightforward.
Being a Flutter developer, it's significant to understand that the preparation phase is crucial before we take the final plunge to publish our app. This phase ensures that our app performs well when the user interacts with it.
When we're developing an app, mostly, we're occupied with writing and testing our code in a debug environment. But the debug version of the app isn't streamlined for optimal performance. So, switching to the release version will not only enhance your app's performance but also prepares it for deployment on a server or a host.
To pull this off, we use the Flutter build web command which helps create a release version of our Flutter app. For an added advantage, we can also select the type of renderer we wish to use with the --web-renderer option.
Here's an example:
1 flutter build web --web-renderer html 2
Once you run the command, the release build of your Flutter app is generated and all the necessary assets and files are located in the /build/web directory of your project.
Once your web app is ready for release, carrying out a test run is always a prudent choice. It helps verify the app is functioning as expected before you proceed with the actual deployment.
To begin testing, we need a web server (you could use SimpleHTTPServer in Python or dhttpd package). Running a web server will host your web application locally, allowing you to interact with it in an environment similar to a real user.
For instance, if you have Python installed on your system, here is how you can start a simple server:
1 python -m http.server 8000 2
This command starts a server on port 8000.
Next, you need to open your web browser and navigate to localhost on the port where your server is running. For the example we used, you need to go to localhost:8000. There, you'll find the released version of your app, ready to be interacted with.
Now, our app has been built and tested, it's ready for its next journey – Deployment!
The next phase of our journey is finding a good home for our app, which, in technical language, is known as deployment. Deployment can be defined as making our Flutter web app available to users by hosting it on a server.
Deployment refers to the process by which the application is made available to the end-users. It's akin to opening the doors for the users to come and explore your app. This is where we bring into play the concept of servers or hosts.
Firebase provides a great hosting platform for our web apps. It's tough to go wrong with its superb features, such as fast content delivery, easy-to-use functionality, and SSL protection on all Firebase Hosting sites.
To use Firebase hosting, you need to first install the Firebase CLI tools via npm:
1 npm install -g firebase-tools 2
Firebase offers a CLI that is extremely manageable and integrates well with Flutter. To engage Firebase with your Flutter app, use the Firebase init hosting command followed by a series of simple steps:
1 firebase init hosting 2
Once Firebase is set up and integrated with your app, the next step of the journey is to deploy the app using the Firebase deploy command. What's more convenient is that this command runs the flutter build web --release making your deployment process run smoothly:
1 firebase deploy 2
Firebase is definitely not the only home out there for our Flutter web app. Multiple other options, like GitHub Pages and Google Cloud Hosting, can also be considered while deploying your app.
Now that you're familiar with the deployment process, let's discuss another integral aspect of web app development - handling images. The probability of a web app without images is quite slim, so understanding how to handle them is important.
In Flutter, the standard way to display images is using the Image widget. It's crucial to note that due to the inherent design of web browsers, we often have some specific restrictions when handling images.
The Image widget in Flutter makes image management somewhere between easy and enjoyable.
You can load an image in your Flutter web app using the Image.network widget in just a few lines of code.
1 Image.network('https://flutter.dev/images/flutter-logo-sharing.png'), 2
This piece of code fetches the image hosted on the provided URL and displays it in your app.
Image handling is slightly different in web development due to the restrictions used by web browsers to run untrusted code while ensuring no harm comes to the host computer. These limitations, while necessary, can often limit what you can do with images compared to mobile or desktop platforms.
As a Flutter app developer, understanding the differences between various web renderers is essential. The choice of web renderer has a profound impact on the app's performance and the final user experience.
By default, Flutter uses the auto choice for web renderer. This versatile default option means that your app runs with the HTML renderer on mobile browsers and CanvasKit on desktop browsers. It essentially optimizes the use of renderers based on the platform.
The auto option for the web renderer is an intelligent setting that varies the renderer based on the platform. This is significant since different platforms may have different capabilities and demands.
For instance - while mobile browsers value a smaller download size, desktop browsers have the resources to leverage a larger, faster renderer written in WebAssembly (like CanvasKit). Therefore, adopting the auto choice for your web renderer can prove beneficial in providing an optimized experience to the end user.
Should the need to specify a particular renderer arise, it can be done using the --web-renderer option mentioned earlier in the post. The default, as we now know, is auto, but there are two more options: can canvaskit and HTML.
So, when you find that one renderer provides a superior user experience for your particular app, you are entirely free to specify that in your Flutter build command.
Minification is another essential aspect of deploying web applications. It plays a crucial role in optimizing your code for production use, thereby enhancing the app's performance.
In the simplest terms, minification is the process of removing all unnecessary characters in the source code without changing its functionality. These unnecessary or redundant characters usually include white spaces, line breaks, comments, and block delimiters, which are useful in development but unnecessary for execution.
In Flutter, the process of minification is processed automatically for you when you build a release version of your web app. Here's an interesting fact: Flutter performs minification differently for different types of builds—debug, profile, and release.
In a Debug build, neither code minification nor tree shaking is performed. In contrast, a Profile build performs tree shaking but not minification. However, a Release build performs both minification and tree shaking, thereby providing an optimized and performance-efficient version of your app.
So, our Flutter web app is now ready and minified for optimum performance. The next step is to make it accessible to users, which could be on a website in the form of an embedded app within an HTML page. There are two main ways to do this: using a host element or an iframe.
To allow our Flutter web app to understand where it needs to render within a larger HTML file, we use the hostElement parameter. The initializeEngine function within the Flutter engine takes this hostElement param to bind the app to a particular div in your HTML.
For instance, consider the following code:
1 <html> 2 <head> 3 <script src="flutter.js" defer></script> 4 </head> 5 <body> 6 <div id="flutter_host">Loading...</div> 7 <script> 8 window.addEventListener("load", function (ev) { 9 _flutter.loader.loadEntrypoint({ 10 onEntrypointLoaded: async function(engineInitializer) { 11 let appRunner = await engineInitializer.initializeEngine({ 12 hostElement: document.querySelector("#flutter_host") 13 }); 14 await appRunner.runApp(); 15 } 16 }); 17 }); 18 </script> 19 </body> 20 </html> 21
In the above code, the Flutter web app is set to render inside the div with the ID "flutter_host".
An alternate method to host a Flutter web app within an HTML page is by using an iframe. An iframe allows us to nest the Flutter app as if it's just another webpage.
Here's a skeleton of the code needed to incorporate an iframe into an HTML file:
1 <iframe src="URL_to_your_app"></iframe> 2
Replace "URL_to_your_app" with the actual URL where your Flutter web app is hosted.
Progressive Web Applications (PWA) are one of the most exciting technologies of recent times. They enable developers to build web apps that feel and behave like native mobile apps. The support for PWA in Flutter adds another feather to its cap.
Starting version 1.20, Flutter provides basic support for PWA right out of the box. So, when you create a new Flutter web app using flutter create, it equips your web directory with a default manifest.json file. This file contains necessary metadata about your app and signals your Flutter web app as a PWA that can be installed by users.
Creating a PWA using Flutter involves a few steps more than traditional web apps. However, the Flutter build web command per default considers your Flutter app as a PWA.
Behind the scenes, the build process generates a flutter_service_worker.js file. This service worker is a script that your browser runs in the background. It's responsible for fetching the essential resources for your web app and caching them for offline usage, hence making your web app installable and offline-capable.
While the PWA support in Flutter is promising, it's still considered a work in progress. However, the Flutter team is working relentlessly to improve it, so keep an eye out for future updates and enhancements!
Just like any good journey, this exploration of how to deploy a Flutter web app has been filled with learning and insights. We’ve traversed the paths of building the app for release, testing it, deploying it to a host, handling images, choosing a web renderer, understanding code minification, and embedding the app in an HTML page, Finally, we arrived at the exciting possibility of creating Progressive Web Apps using Flutter itself.
The clearest takeaway from our journey is how Flutter simplifies the process of web app development, from writing the code to preparing for release, and finally to deploying to a server. The skill of deploying a Flutter web app isn't just about knowing the commands or the steps, but also about understanding the process and making the right choices.
I hope this guide has helped clarify deploying Flutter web apps. As Flutter developers, we're always keen to iterate, improve, and learn. Happy coding and deploying!
With that, I conclude this guide on how to deploy the Flutter web app . Enjoy the process of creation, and remember, each line of code is a step forward, irrespective of the challenge it brings.
