Unlock the Power of Cross-Platform App Development
The world of app development has witnessed a significant shift towards cross-platform frameworks that enable developers to create apps that run seamlessly across multiple platforms, including Android, iOS, and desktop devices. Among the popular frameworks, Flutter has emerged as a strong contender, offering an impressive feature set and incredible end-user performance.
What is Flutter?
Flutter is Google’s solution to cross-platform development, allowing developers to create apps that compile down to native code, resulting in exceptional performance and frame rates. Its primary focus has been on iOS and Android, but with the recent 1.9 release, web support has been added as a technical preview, opening up new possibilities for developers.
Why Run a Flutter Web App on Node.js?
While Flutter web apps can run on any web server, choosing Node.js offers several advantages. Node.js is exceptional at servicing large volumes of simple requests, allowing developers to code their front-end and back-end in JavaScript, and more. If you already have a Node.js API serving data to your Flutter iOS or Android apps, compiling your Flutter app as a web app and hosting it on your existing Node.js server might be a logical extension to your current solution, eliminating additional hosting costs.
Demonstrating Flutter Web in Action
To explore the capabilities of Flutter web, we’ll create a simple weather app that retrieves data from a back-end server running on Node.js. You’ll need the following tools:
- Android Studio (Android SDK manager and emulator)
- Visual Studio Code + Flutter extension (or Android Studio)
- Node.js 12
Step 1: Explore the Sample Code
Clone the source code for the weather app and server from GitHub:
- briandesousa/weatherappflutter
- briandesousa/weather-app-nodejs-server
Explore the Flutter weather app and Node.js server, reviewing the main.dart file, fetchWeatherData function, and WEATHERAPIURL constant.
Step 2: Add Web Support to the Flutter App
To add web support, you’ll need the latest in-development version of Flutter. Run the following commands in the root folder of the weatherappflutter repository:
- flutter channel master
- flutter upgrade
Enable web support in your Flutter installation:
- flutter config –enable-web
Create a new Chrome device in the device list, and restart Visual Studio Code to refresh the device list menu.
Step 3: Run the Flutter Web App on Node.js
Build and copy the compiled web version of the weather app to the Node.js server:
- flutter build web
- Copy the contents of weatherappflutter/build/web to weather-app-nodejs-server/public-flutter
Access your Node.js server in the browser at http://localhost:3000 to see your app running on Node.js, displaying weather data retrieved from the weather API without cross-origin resource sharing errors.
Final Thoughts
It’s remarkable how easily you can take an existing Flutter app and compile it into a web app ready to be deployed to a web server. While Flutter web support is still in its early days, the future looks promising. However, it’s essential to tread lightly and consider the limitations and known performance issues before adopting Flutter as your cross-platform app framework solely because of its web support.
Monitor Your App’s Performance with LogRocket
Deploying a Node-based web app or website is just the beginning. Ensuring your Node instance continues to serve resources to your app is where things get challenging. Try LogRocket to monitor failed and slow network requests in production, and get to the root cause of problems quickly. Start monitoring for free today!