Dynamic Subdomains in FlutterFlow Web

FlutterFlow is a revolutionary visual platform that allows you to develop web and mobile applications quickly and without writing extensive code. In this article, I will show you how to configure a FlutterFlow Web project so that the subdomain is dynamically extracted from the URL.

Why use dynamic subdomains?

In applications where each user, client or group needs their own personalized space, dynamic subdomains offer a scalable and elegant solution. For example, if you are building a CRM, you can assign a subdomain like company1.micrm.com to “Company 1” and company2.micrm.com to “Company 2”, all without having to duplicate instances or projects.

Creating a Custom Action

FlutterFlow allows you to get the subdomain directly from the URL using Dart. Below I explain how the function you can use to achieve this works:

import 'dart:html' as html;

Future<String> getSubDomain() async {
  final String url = html.window.location.href;
  final Uri uri = Uri.parse(url);
  final String host = uri.host;

  final List<String> parts = host.split('.');
  if (parts.length > 2) {
    return parts.first;
  }
  return '';
}

Function Explanation:

Importing the dart:html package: The dart:html package is imported to access DOM APIs in web applications. This is crucial to get the current URL from the browser.
Asynchronous function getSubDomain: This function returns a Future<String> containing the extracted subdomain. Since it is asynchronous, it can be easily integrated into other non-blocking processes.
Getting the current URL: You get the full URL from the browser with html.window.location.href.
URL parsing: The URL is converted into a Uri object to access its different parts, such as the host.
Host extraction: From the Uri object, the host is extracted, which is the part of the URL that contains the domain name, for example, subdomain.domain.com.
Separating the Host into Parts: The host is divided into parts using split('.'), where each part represents a level of the domain (subdomain, main domain, top-level domain).
Determining and Returning the Subdomain: If the host has more than two parts (subdomain.domain.com), the first one, which corresponds to the subdomain, will be returned. If there is no subdomain (domain.com), an empty string will be returned.

Usage example

If the URL is https://subdomain.domain.com/path, the function will return “subdomain”. If the URL is https://domain.com/path, it will return an empty string.

This feature is essential to personalize the user experience based on the subdomain.

Implementing the Subdomain in the Application

To obtain the subdomain, we must create an action on the home page where we will call the Custom Actions

Once you have your subdomain, you can use it to customize the user experience based on the client or group it applies to. You can load specific data from an API, connect to a dedicated database, or apply a specific theme based on the subdomain.

DNS Configuration in Cloudflare

In order for dynamic subdomains to work properly, it is essential to configure DNS in Cloudflare:

Add your domain to Cloudflare: If you haven’t already done so, add your domain to Cloudflare and update the nameservers they provide.
Create a wildcard CNAME record: Set up a CNAME record using a wildcard (*).

This configuration ensures that all subdomains under your-domain.com point to your web server or application, allowing your application to handle dynamic subdomains without any hassle.

Deployment automation with GitHub Actions

To ensure efficient and error-free deployment to your VPS server, use GitHub Actions. Here is an example workflow (.github/workflows/ci_cd.yml):

name: CI/CD

on:
  push:
    branches: [ "flutterflow" ]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout Repository
      uses: actions/checkout@v4
    
    - name: Set up Flutter
      uses: subosito/[email protected]
      with:
        flutter-version: 3.22.2
        cache: true
        cache-key: 'flutter-:os:-:channel:-:version:-:arch:-:hash:'
        cache-path: '${{ runner.tool_cache }}/flutter/:channel:-:version:-:arch:'
        architecture: x64
    - name: Install dependencies
      run: flutter pub get

    - name: Build Web
      run: flutter build web

    - name: Copiar arquivos para VPS
      uses: appleboy/[email protected]
      with:
        host: ${{ secrets.HOST }}
        username: root
        password: ${{ secrets.PASSWORD }}
        port: 22
        source: build/web
        target: /root/seu-projeto

    - name: Mueve la carpeta para App 
      uses: appleboy/ssh-action@master
      with:
        host: ${{ secrets.HOST }}
        username: root
        password: ${{ secrets.PASSWORD }}
        port: 22
        script: |
          rm -rf /root/seu-projeto/app
          mv /root/seu-projeto/build/web /root/seu-projeto/app
          rm -rf /root/seu-projeto/build

Here I will leave the link to the online project https://lowcode.pideaqui.shop/ just change the subdomain to the name you want and it will look like this

I hope it is useful, I understand that it is a little more complex than normal in Flutterflow, but I wanted to show all the usefulness that you can have with Flutterflow.

To finish, I will share the project in Flutterflow and the repository in GitHub of the project.

Project repository: https://github.com/hectorcanaimero/flutterflow-saas

Project in Flutterflow: https://app.flutterflow.io/project/saas-client-t0p52r

Web project: https://lowcode.pideaqui.shop/