Deploying a Flutter Web Application

Deploying Flutter Web on Globe enables you to host high-performance single-page applications (SPAs) globally with minimal setup. Globe detects Flutter projects automatically and applies optimized defaults for build, deploy, and caching. This page outlines requirements and deployment behaviour.

Project Setup

To create a new Flutter Web project:

1. Open your terminal and run:

   flutter create my_flutter_app
   cd my_flutter_app
   

2. Test your application locally with:

   flutter run -d chrome
   

Deploying to Globe

1. Run the deployment command from your project root:

   globe deploy
   

2. For first-time deployments:

   • Confirm setup when prompted (press Y)
   • Enter a name for your project (e.g., my-flutter-app)
   • Accept the detected Flutter preset when prompted

3. Wait for the deployment to complete. You'll receive a unique URL for accessing your web application.

Viewing your application

Once deployed, your app is available at the unique URL shown in your dashboard (e.g., https://my-flutter-app.globeapp.dev). Reloading the page or opening in multiple tabs will show the same consistent deployment state.

Deployment Behaviour

Globe builds your Flutter Web project and uploads the compiled output (build/web) to its CDN network.

• Preset detection: Flutter Web projects are automatically recognized.
• Environment: No manual configuration required.
• Build runner: If used, it is auto-detected and executed before deployment.
• Asset handling:
  • Assets are hashed and fingerprinted for cache optimization.
  • Base href is automatically set to /.

Best practices

• Use responsive design principles for optimal display across different devices.
• Test your application across multiple browsers before deployment.
• Consider using web-specific optimizations like lazy loading for better performance.

Learn more

• Managing deployments
• Globe CLI reference
• GitHub integration