Web Publishing
We expanded our capabilities to now support web publishing. This means that you can now build and publish web applications alongside your mobile apps, ensuring a consistent user experience across all platforms.
- You can ship your existing mobile app as a web app with little or no change to the current setup.
- We offer free hosting and custom subdomains for all users.
- We've rebuilt some of the components to work better on the web.
Publishing to the Web comprises of the following steps:
By default, we allow you to run your app on Android and iOS without any additional effort. But, to run and deploy your app on the Web, you need to add platform support for the web.
To add platform support:
- 1.Click on the Setting and Integrations () from the Navigation Menu (left side of your screen).
- 2.Under the Project Setup, select Platforms.
- 3.Turn on the Web toggle.
Enabling web support automatically enables deep linking for your project. This helps in creating URLs for every page of your app.
Enabling web support
If you're creating a web-only application, setting the canvas size to desktop and building pages accordingly can work well. However, if you plan to target both mobile and web users, some design adjustments may be necessary to ensure that the UI is optimized for both platforms.
You can create separate widgets for different platforms and control their visibility using Responsive Visibility.
If you have previously built a mobile app and have recently enabled web support, it is possible that you may encounter warnings regarding web compatibility. Due to the distinct nature of mobile and web platforms, some of the widgets and actions in FlutterFlow, including AdMob, RevenueCat, Share action, and Launch Map action, or your custom widgets may not function as expected because they are not yet supported on the web.
Any known Web Support Issues will be displayed as a Platform Support Warning.
This won't stop you from deploying your app to the web, but it can result in poor user experience and unexpected app behavior.
In such a situation, you can try to find the replacement of the package on pub.dev (considering it meets your requirement and has a good score).
Important: Make sure to double-check any pub.dev packages you are using have Web Support.
Web platform support warning
In this step, you must provide general information about your web app by following the steps below:
- Navigate to the Setting and Integrations () from the Navigation Menu > App Settings > Web Publishing.
- Inside the General Information section, enter the following details:
- Site URL: You can define the Site URL by adding the subdomain, for example, mywebapp.flutterflow.app. You can only change the subdomain, i.e., the part before flutterflow.app.
Important: When you change your subdomain, it only takes effect the next time you publish. Old addresses can stop working at any time and be given to another user.Tip: The number of subdomains registered per user is limited. You will receive an in-app warning if you are approaching the limit.- SEO Title: This appears in the browser tab while the page is loaded, in search results, and when you share the site URL on social media (inside the social share preview card). After the page is loaded, you will see the actual page name (e.g., homePage, productDetails). To edit the page title, open the page, move to the properties panel, and enter a value for Page Title under Route Settings.
- Social Share Image URL: The image from this URL will be displayed inside the social share preview card (e.g., OpenGraph and Twitter card).
- Site Description: A text that you would like to appear in the social sharing preview card and search results.
- Favicon: An icon that typically appears before the web app name inside the browser's tab. To change it, click on the Upload Favicon + and upload the icon. You can generate it for free from here.
- Watermark: By default, a button with "Built in FlutterFlow" text appears as a watermark at the bottom right side of your page. To remove, disable the Show watermark toggle.
- Individual Page Titles: Enabling this will display the current page name in the browser tab. For this, you must have a Page Title in the Route Settings for all pages.
- Allow Showcasing: If enabled, we may feature your project in our update email and website.
- Allows Search Engine Indexing: By default, this is enabled so that people discover your site via search engines.
Tip: Only Standard, Pro, and Teams users can remove the FlutterFlow watermark.
Example of how general information is displayed when shared on Twitter
When you are ready to deploy, select Publish. This will take approximately 2-3 minutes.
Publish to web
Once it is published, you can make any changes live to your users by clicking the Publish button again.
If you try to publish to a domain that is already taken, you will receive a warning like this:
Error while publishing with already taken subdomain
To overcome this, enter a different subdomain inside the Site URL and select Publish again.
In case you want to unroll your web app, hit the Unpublish button at the bottom.
To view the live version of your app, you can click 
next to your published site URL or click the preview icon (
) next to the "Publish to Web" button.
You can also copy your site URL by clicking on the Copy (
) button and then paste it inside the web browser.
View the live web app
These headers are used directly in the
index.html of your site, so malformed headers may cause unexpected behavior (just as directly editing index.html would). To add a custom header, enter your tag inside the Custom Headers input box and publish the web app again.
You can verify the added custom header by opening inspect element window(Command+Option+i on Mac or F12 on PC) and finding your tag inside the <head> tag.
Verifying custom header
Google Analytics tracking code in custom header
Adding a custom domain to your web app can give it a more professional look and feel and make it easier for your users to remember and find. We now allow you to connect your own domain name to your web app and have it up and running in no time. This feature is perfect for those who want to establish a strong online presence and increase their brand awareness.
Note that,
- Only Pro and Teams plans include one free custom domain. The Teams plan comes with one custom domain for the whole team. If you are on the Standard plan, you will need to purchase a custom domain, as it is not included in the plan for free.
- Only paid plans can purchase domains. Standard and Pro users can buy from their Account page, and Teams owners can buy it from My Organization.
To add a custom domain:
- 1.Enter your Custom Domain URL. Ensure you only enter the domain name (without www) and extension (e.g., mywebapp.com and not www.mywebapp.com).
- 2.Now you must set up the DNS. To do so:
- 1.Visit the website from where you bought the domain.
- 2.Open the DNS manager and create the records as per displayed in UI. Note that there should not be other A or AAA records after adding this. Here are quick links on how to do this on popular domain-selling websites. 1)Godaddy 2)Namecheap 3)Google Domains. Here's how it looks for our sample project in Godaddy.
- 3.Click Connect.
- 4.Once the domain is connected, hit the Publish button again.
Connect custom domain
We recommend that you update your Firebase Dynamic links URL scheme to https://{your-custom-subdomain}.flutterflow.app for shared links to open on the web correctly. This ensures your dynamic links will work for users across all platforms.
Changing Firebase dynamic link
If you are using Firebase Authentication, you must add your custom subdomain as an authorized domain. Otherwise, social and phone sign-in will not work.
To enable your subdomain as an authorized domain:
- 1.Open the Firebase console and click on Authentication (inside the Build section in the left side menu)
- 2.Select the Setting tab.
- 3.Select Authorized domains from the left side menu.
- 4.Click Add domain.
- 5.Enter {your-custom-subdomain}.flutterflow.app and click on add button.
Adding subdomain as Authorized domain (Firebase)