Building Multi-Tenant Applications with Subdomains, Microsites, and Sub Sites Using FAB Builder (2).jpg

Create white label sites and sub sites with FAB Builder’s low-code platform. SaaS multi-tenancy, custom branding, and scalable solutions for your business.

Low-Code Platform for White Label Sites & Sub Sites | FAB Builder

Building Multi-Tenant Applications with Subdomains, Microsites, and Sub Sites Using FAB Builder

<p>FAB Builder empowers businesses to create&nbsp;<strong>multi-tenant applications</strong>&nbsp;that support&nbsp;<strong>tenants</strong>,&nbsp;<strong>microsites</strong>, and&nbsp;<strong>sub-sites</strong>—all with the flexibility of&nbsp;<strong>subdomain-based architecture</strong>. When you generate your application’s source code using FAB Builder, you can enable&nbsp;<strong>multi-tenancy</strong>&nbsp;as an option, allowing your application to dynamically create and manage tenants, microsites, and sub-sites. This feature is ideal for businesses looking to offer&nbsp;<strong>white-label solutions</strong>,&nbsp;<strong>client-specific portals</strong>, or&nbsp;<strong>regional sub-sites</strong>&nbsp;under a single application.</p><h4><strong>What Are Multi-Tenant Applications with Subdomains?</strong></h4><ul><li><strong>Multi-Tenant Applications</strong>: A single application instance that serves multiple tenants (clients or users), with each tenant’s data isolated for security and privacy.</li><li><strong>Subdomains</strong>: Unique web addresses (e.g.,&nbsp;client1.yourdomain.com) that allow tenants, microsites, or sub-sites to operate independently under the main application.</li></ul><h4><strong>How FAB Builder Enables Multi-Tenant Applications</strong></h4><ol><li><strong>Generate Source Code with Multi-Tenancy</strong>:</li><li class="ql-indent-1">During the code generation process, enable the&nbsp;<strong>multi-tenancy option</strong>&nbsp;to create an application that supports tenants, microsites, and sub-sites.</li><li><strong>Configure Subdomains</strong>:</li><li class="ql-indent-1">Set up subdomains for each tenant, microsite, or subsite (e.g.,&nbsp;client1.yourdomain.com,&nbsp;campaign.yourdomain.com).</li><li><strong>Customize Tenant Experience</strong>:</li><li class="ql-indent-1">Allow tenants to customize their subdomains with unique branding and themes.</li><li><strong>Manage Permissions</strong>:</li><li class="ql-indent-1">Use&nbsp;<strong>role-based permissions</strong>&nbsp;to control access to features and data for each tenant or site.</li><li><strong>Deploy Your Application</strong>:</li><li class="ql-indent-1">Deploy the multi-tenant application to your preferred hosting provider (e.g., AWS, GCP, Azure) using FAB Builder’s&nbsp;<strong>one-click deployment</strong>.</li></ol><p><img src="https://storage-for-tutors.ams3.digitaloceanspaces.com/helpdesk/tenant/651456610067eba9d6188aac/content/image/a599d537-1667-43e2-bb3f-bc802f412527.jpg"></p><h4><strong>Key Features of FAB Builder’s Multi-Tenant Architecture</strong></h4><ol><li><strong>Tenant Creation</strong>:</li><li class="ql-indent-1">Dynamically create and manage tenants, each with their <strong>subdomain</strong>&nbsp;(e.g.,&nbsp;client1.yourdomain.com).</li><li><strong>Microsites and Sub-Sites</strong>:</li><li class="ql-indent-1">Create&nbsp;<strong>microsites</strong>&nbsp;(e.g.,&nbsp;campaign.yourdomain.com) or&nbsp;<strong>sub-sites</strong>&nbsp;(e.g.,&nbsp;region.yourdomain.com) under the main application.</li><li><strong>Custom Branding</strong>:</li><li class="ql-indent-1">Allow tenants to customize their subdomains with unique branding, logos, and themes.</li><li><strong>Role-Based Permissions</strong>:</li><li class="ql-indent-1">Control access to features and data for tenants, microsites, and sub-sites using&nbsp;<strong>role-based permissions</strong>.</li><li><strong>Scalability</strong>:</li><li class="ql-indent-1">Add new tenants, microsites, or sub-sites as your business grows, without disrupting the main application.</li><li><strong>Subdomain Flexibility</strong>:</li><li class="ql-indent-1">Use subdomains to create a seamless and branded experience for each tenant or site.</li></ol><h4><strong>Benefits of Multi-Tenant Applications with FAB Builder</strong></h4><ol><li><strong>Efficiency</strong>:</li><li class="ql-indent-1">Manage multiple tenants, microsites, and sub-sites under a single application, reducing development and maintenance efforts.</li><li><strong>Customization</strong>:</li><li class="ql-indent-1">Offer tenants the ability to customize their subdomains with unique branding and themes.</li><li><strong>Scalability</strong>:</li><li class="ql-indent-1">Add new tenants or sites as your business grows, without worrying about infrastructure limitations.</li><li><strong>Security</strong>:</li><li class="ql-indent-1">Isolate tenant data and control access with&nbsp;<strong>role-based permissions</strong>&nbsp;and&nbsp;<strong>multi-layer security</strong>.</li><li><strong>Cost-Effectiveness</strong>:</li><li class="ql-indent-1">Save on development and hosting costs by managing multiple clients or sites under a single application.</li></ol><h4><strong>Use Cases for Multi-Tenant Applications</strong></h4><ol><li><strong>White-Label Solutions</strong>:</li><li class="ql-indent-1">Offer fully branded applications to clients, each with its subdomain (e.g.,&nbsp;client1.yourplatform.com).</li><li><strong>Regional Sub Sites</strong>:</li><li class="ql-indent-1">Create sub-sites for specific regions or markets (e.g.,&nbsp;us.yourplatform.com,&nbsp;eu.yourplatform.com).</li><li><strong>Campaign Microsites</strong>:</li><li class="ql-indent-1">Launch microsites for specific campaigns or events (e.g.,&nbsp;campaign.yourplatform.com).</li><li><strong>Multi-Client Portals</strong>:</li><li class="ql-indent-1">Provide each client with a dedicated portal under a subdomain (e.g.,&nbsp;client1.yourplatform.com).</li><li><strong>Educational Platforms</strong>:</li><li class="ql-indent-1">Create sub-sites for different schools or departments (e.g.,&nbsp;school1.yourplatform.com).</li></ol><h2>Frequently Asked Questions</h2><p><strong>1. Can I create multi-tenant applications with FAB Builder?</strong></p><p>Yes, FAB Builder allows you to generate source code with&nbsp;<strong>multi-tenancy support</strong>, enabling the creation of tenants, microsites, and sub-sites.</p><p><strong>2. How do subdomains work in FAB Builder?</strong></p><p>Each tenant, microsite, or subsite can have its subdomain (e.g.,&nbsp;client1.yourdomain.com), providing a unique and branded experience.</p><p><strong>3. Can tenants customize their subdomains?</strong></p><p>Yes, tenants can customize their subdomains with unique branding, logos, and themes.</p><p><strong>4. Is multi-tenancy scalable?</strong></p><p>Absolutely! You can add new tenants, microsites, or sub-sites as your business grows, without disrupting the main application.</p><p><strong>5. How do I deploy a multi-tenant application?</strong></p><p>Use FAB Builder’s&nbsp;<strong>one-click deployment</strong>&nbsp;to deploy your application to AWS, GCP, Azure, or your preferred hosting provider.</p>

Building Multi-Tenant Applications with Subdomains, Microsites, and Sub Sites Using FAB Builder.jpg

send grid.png

Learn how to integrate and use SendGrid for seamless email communication. Follow our step-by-step guide to set up and optimize your email services.

Using SendGrid for Email Communication | FAB Builder Guide

Using SendGrid for E-Mail communication

#### Generate API Key, Goto Settings > API keys

![](https://storage-for-tutors.ams3.digitaloceanspaces.com/helpdesk/tenant/651456610067eba9d6188aac/content/image/sg_keys.png)

#### **Restricted** Key can be generated with "**Full Access**" to "**Mail Send**"\\

![](https://storage-for-tutors.ams3.digitaloceanspaces.com/helpdesk/tenant/651456610067eba9d6188aac/content/image/sg_permissionskeys.png)

#### Copy the generated key

**Now create Dynamic Templates for the 3 basic email types**

* Invitation
* E-Mail Verification
* Forgot Password

![](https://storage-for-tutors.ams3.digitaloceanspaces.com/helpdesk/tenant/651456610067eba9d6188aac/content/image/sg_dynamic%20templates.png)

#### For Local, Update the Template ID's in .env file&#x20;

#### For Server, Add Environment Variables as&#x20;

```js
SENDGRID_EMAIL_FROM = "no-reply@baryonventures.com"

SENDGRID_KEY = "SG.bc7c5WYzQ6OxLuC0mtk8sA.XXXXXXXXXXXXXXXXXXXXXXyhIkjxVMO9uMJsWOkNgE0"

SENDGRID_TEMPLATE_EMAIL_ADDRESS_VERIFICATION = "d-e3e06979b26d44XXXXXXXXXXXea42a"

SENDGRID_TEMPLATE_INVITATION = "d-485b1XXXXXXXXXXXXX6ed2c69e6ab1"

SENDGRID_TEMPLATE_PASSWORD_RESET = "d-57f6eXXXXXXXXXXXXXXX7cf11c25b"
```

blog-image-6.png

Using SendGrid for Email Communication  Fab Builder Guide.jpg

Github.png

Learn how to set up GitHub access using SSH. This comprehensive guide walks you through the configuration process for secure and efficient code management.

Setup GitHub Access Using SSH | FAB Builder Guide

Setup GitHub access using SSH

**1.** Create an account on GitHub with company provided email

**2.** Open git bash or terminal

The best option to use git bash is to use the terminal provided in VS code

Execute the following command with your email (form which you have signed up)

ssh-keygen -t ed25519 -C "your\_email@coderower.com"

Use the predefined settings, and continue until it gets completed

![](https://assets.tina.io/46ec08cf-0f02-4b2b-9ab7-081512548481/step1.png)

**3.** Now copy the public key generated

cat /c/Users/garim/.ssh/id\_ed25519.pub

**4.** Go to GitHub > Settings > SSH and GPG Keys

**Add a New SSH key**

![](https://assets.tina.io/46ec08cf-0f02-4b2b-9ab7-081512548481/github_ssh_settings.png)

Put "CodeRower Account" in the title

Paste the public key copied above in the key section

![](https://assets.tina.io/46ec08cf-0f02-4b2b-9ab7-081512548481/dithub_add_ssh_key.png)

**-- And it's done.**

Go to the project repository and clone the repo using ssh link, you can find it here

![](https://assets.tina.io/46ec08cf-0f02-4b2b-9ab7-081512548481/gh_sshclone.PNG)

blog-image-5.png

Setup GitHub Access Using SSH  Fab Builder Guide.jpg

CMS.png

Learn how to set up Google Cloud Platform (GCP) Cloud Storage in FAB Builder. Follow our detailed guide for seamless cloud storage integration and management.

Setup GCP Cloud Storage | FAB Builder Configuration Guide

Setup GCP Cloud Storage

To use Google Cloud Storage, change the FILE\_STORAGE\_PROVIDER variable fo the backend/.env file to use gcp.

FILE\_STORAGE\_PROVIDER = "gcp"

Go to [https://cloud.google.com/](https://cloud.google.com/) and create an account.Create a new project for the development environment.Go to Storage > Browser and create a new Bucket.Save the bucket name on the FILE\_STORAGE\_BUCKET variable. The value must be your bucket-name.

<img height="338" width="780" src="https://assets.tina.io/46ec08cf-0f02-4b2b-9ab7-081512548481/Screenshot%202023-05-06%20at%2011.08.08%20PM.png" />

In the example of this image, it will be **fab-builder.appspot.com**.

FILE\_STORAGE\_BUCKET = "fab-builder.appspot.com"

#### The service key

Now our app needs a service key to be able to access the bucket.Create a service account key that has permission to manage Google Cloud Storage buckets. Follow this: [https://cloud.google.com/iam/docs/creating-managing-service-account-keys#creating\_service\_account\_keys](https://cloud.google.com/iam/docs/creating-managing-service-account-keys#creating_service_account_keys).

After you download the JSON file, you will see that it looks like this:

```js
{
"type": "service_account",
"project_id": "...",
"private_key_id": "...",
"private_key": "...",
"client_email": "...",
"client_id": "...",
"auth_uri": "...",
"token_uri": "...",
"auth_provider_x509_cert_url": "...",
"client_x509_cert_url": "..."
}
```

Now we must place this entire file into a single environment variable.If you use VSCode, you can use the join lines command.Now place this line on

theGOOGLE\_CLOUD\_PLATFORM\_CREDENTIALS variable.

GOOGLE\_CLOUD\_PLATFORM\_CREDENTIALS = { "type": "service\_account", "project\_id": "...", "private\_key\_id": "...", "private\_key": "...", "client\_email": "...", "client\_id": "...", "auth\_uri": "...", "token\_uri": "...", "auth\_provider\_x509\_cert\_url": "...", "client\_x509\_cert\_url": "..." }

#### CORS

Install the [https://cloud.google.com/sdk](https://cloud.google.com/sdk).Sign in to your account by calling gcloud auth login .

Create a gcp-cors.json file on the same folder that you are at the command line

```js
[{
"maxAgeSeconds": 3600,
"method": ["GET", "HEAD", "POST", "PUT"],
"origin": ["*"],
"responseHeader": ["Content-Type", "Access-Control-Allow-Origin"]
}]
```

Run this script. Make sure you replace the your-bucket-name by the bucket you created!

gsutil cors set gcp-cors.json gs://your-bucket-name

Done! You are now ready to use the Google Cloud File storage on your project.

blog-image-4.png

Setup GCP Cloud Storage  Fab Builder Configuration Guide.jpg

GCP1.png

Learn how to set up GCP Cloud Run deployment using GitHub Actions. This guide provides a step-by-step approach for seamless cloud deployment automation.

Setting Up GCP Cloud Run Deployment with GitHub Actions

Setting-up GCP Cloud Run deployment using action

**Step 1:** Create GCP project and enable services for Cloud Run

1. Cloud Build API

![](https://assets.tina.io/46ec08cf-0f02-4b2b-9ab7-081512548481/gcp-cr-servuce.png)

2\. Cloud Run API

![](https://assets.tina.io/46ec08cf-0f02-4b2b-9ab7-081512548481/gcp-rr-servuce.png)

**Step 2:** Create service account on the GCP project

* Create Account from **IAM & Admin** > **Service Account**

![](https://assets.tina.io/46ec08cf-0f02-4b2b-9ab7-081512548481/service%20account%20email.png)

* Grant Permissions

![](https://assets.tina.io/46ec08cf-0f02-4b2b-9ab7-081512548481/service%20account%20permissions.png)

* Generate KEY

<img height="564" width="773" src="https://assets.tina.io/46ec08cf-0f02-4b2b-9ab7-081512548481/generate%20key.png" />

* Download Key as json file

<img height="463" width="780" src="https://assets.tina.io/46ec08cf-0f02-4b2b-9ab7-081512548481/downlad%20key.png" />

**Step 3:** Update workflow of GitHub action

* Add Action Secret in the repo

<img height="379" width="780" src="https://assets.tina.io/46ec08cf-0f02-4b2b-9ab7-081512548481/gh%20secrests.png" />

1. GCP\_PROJECT

![](https://assets.tina.io/46ec08cf-0f02-4b2b-9ab7-081512548481/action%20secret%20project%20name.png)

2\. GCP\_APPLICATION - Name of the service you want

![](https://assets.tina.io/46ec08cf-0f02-4b2b-9ab7-081512548481/action%20secret%20application%20name.png)

3\. GCP\_EMAIL

<img height="567" width="780" src="https://assets.tina.io/46ec08cf-0f02-4b2b-9ab7-081512548481/action%20secret%20email.png" />

4\. GCP\_CREDENTIALS

* a. Open the Service Account JSON key in VS code
* b. select - all (ctrl +a / cmd + a)
* c. Execute Global Command (ctrl + shift + p / cmd + shift + p) -> "Join Lines"

![](https://assets.tina.io/46ec08cf-0f02-4b2b-9ab7-081512548481/vs%20join%20lines.png)

Add to GitHub action secret as

![](https://assets.tina.io/46ec08cf-0f02-4b2b-9ab7-081512548481/gh%20secrests%20credentials.png)

* Create custom workflow in GitHub action

<img height="315" width="780" src="https://assets.tina.io/46ec08cf-0f02-4b2b-9ab7-081512548481/gh-custome%20workflow.png" />

* Set the Scripts according branch you want to configure deployment for

<img height="411" width="780" src="https://assets.tina.io/46ec08cf-0f02-4b2b-9ab7-081512548481/gh-workflow%20script.png" />

name: cloudrun-deploy

on:

push:

branches:

\- main

jobs:

setup-build-publish-deploy:

name: Setup, Build, Publish, and Deploy

runs-on: ubuntu-latest

steps:

\- name: Checkout

uses: actions/checkout@master

*# Setup gcloud CLI*

\- uses: google-github-actions/setup-gcloud@v0.6.0

with:

service\_account\_email: ${{ secrets.GCP\_EMAIL }}

service\_account\_key: ${{ secrets.GCP\_CREDENTIALS }}

export\_default\_credentials: true

*# Configure Docker with Credentials*

\- name: Configure Docker

run: |

gcloud auth configure-docker

*# Build the Docker image*

\- name: Build & Publish

run: |

gcloud config set project ${{ secrets.GCP\_PROJECT }}

gcloud builds submit --tag gcr.io/${{ secrets.GCP\_PROJECT }}/${{ secrets.GCP\_APPLICATION }}

gcloud config set run/region us-central1

*# Deploy the Docker image to the GKE cluster*

\- name: Deploy

run: |

gcloud run deploy ${{ secrets.GCP\_APPLICATION }} --image gcr.io/${{ secrets.GCP\_PROJECT }}/${{ secrets.GCP\_APPLICATION }} \\

\--platform managed \\

\--allow-unauthenticated \\

\--memory=1Gi \\

\--region asia-south2

Commit the file

<img height="241" width="780" src="https://assets.tina.io/46ec08cf-0f02-4b2b-9ab7-081512548481/commit%20gh.png" />

Push changes and wait for few sconds.

You can navigate to actions and observe action is in progress. take a look at the execution to make sure it won't break.

on successful completion you can see your service is running on GCP cloud run.

<img height="559" width="780" src="https://assets.tina.io/46ec08cf-0f02-4b2b-9ab7-081512548481/gr%20service.png" />

You can now use the URL to call the service

blog-image-3.png

Setting Up GCP Cloud Run Deployment with GitHub Actions.jpg

stripe.png

Learn how to integrate Stripe payments for subscription plans. Follow our guide to set up and manage recurring payments seamlessly.

Integrate Stripe Payments for Subscription Plans | Guide

Integrate Stripe Payments for Subscription Plans

To integrate Stripe Payments for subscription plans, you can follow these general steps to set up the integration and manage recurring billing. Here’s a simple overview:

### 1. **Create a Stripe Account**

* If you don’t already have one, sign up on the [Stripe website](https://stripe.com/).
* After signing in, you'll need to set up your business and billing details to start using Stripe.

### 2. **Install Stripe SDK**

* Depending on your backend language (Node.js, Python, Ruby, etc.), install the Stripe SDK to your project.

For **Node.js**, run:

```js
npm install stripe
```

### 3. **Set Up Stripe API Keys**

* In your Stripe dashboard, find your **API keys** under **Developers > API keys**.
* Use the **Publishable key** on the front end and the **Secret key** on the back end.

### 4. **Create Subscription Plans in Stripe**

* Go to **Billing > Products** in your Stripe Dashboard.
* Create a new **product** and set up pricing options (monthly, yearly, etc.) that will be offered to customers.

### 5. **Build the Checkout Page**

* On the frontend, integrate Stripe’s **Checkout** to create a subscription process.

Example of creating a checkout session with **Stripe.js**:

HTML

```js
<script src="https://js.stripe.com/v3/"></script>

<button id="checkout-button">Subscribe</button>

<script type="text/javascript">
  var stripe = Stripe('your-publishable-key-here');
  var checkoutButton = document.getElementById('checkout-button');

  checkoutButton.addEventListener('click', function () {
    fetch('/create-checkout-session', { method: 'POST' })
      .then(function (response) { return response.json(); })
      .then(function (sessionId) {
        return stripe.redirectToCheckout({ sessionId: sessionId });
      })
      .then(function (result) {
        if (result.error) {
          alert(result.error.message);
        }
      })
      .catch(function (error) {
        console.error('Error:', error);
      });
  });
</script>
```

### 6. **Create Checkout Session on the Server**

* On the server-side, you’ll create a checkout session to handle the customer’s payment. Here’s an example using **Node.js**:

```js
const stripe = require('stripe')('your-secret-key-here');

app.post('/create-checkout-session', async (req, res) => {
  const session = await stripe.checkout.sessions.create({
    payment_method_types: ['card'],
    line_items: [
      {
        price_data: {
          currency: 'usd',
          product_data: {
            name: 'Subscription Plan',
          },
          unit_amount: 1000, // $10.00
        },
        quantity: 1,
      },
    ],
    mode: 'subscription',
    success_url: 'https://your-site.com/success',
    cancel_url: 'https://your-site.com/cancel',
  });

  res.json({ id: session.id });
});
```

### 7. **Handle Webhooks for Subscription Events**

* Set up **webhooks** to receive notifications when the subscription status changes, such as successful payments, cancellations, or failures.
* Register your webhook URL in the Stripe dashboard under **Developers > Webhooks**.

Example of handling a webhook:

```js
const endpointSecret = 'your-webhook-secret';
const sig = req.headers['stripe-signature'];

try {
  const event = stripe.webhooks.constructEvent(req.body, sig, endpointSecret);

  switch (event.type) {
    case 'invoice.payment_succeeded':
      // Handle successful payment
      break;
    case 'invoice.payment_failed':
      // Handle failed payment
      break;
    // Add more event types as needed
  }

  res.json({ received: true });
} catch (err) {
  console.error('Webhook error:', err);
  res.status(400).send('Webhook error');
}

```

### 8. **Manage Customer Subscriptions**

* You can use Stripe’s dashboard or API to manage subscriptions, such as upgrading, downgrading, or canceling the subscription.

### 9. **Display Subscription Details to Customers**

* After the customer subscribes, use the **Stripe API** to fetch the subscription details and display it on their profile or dashboard.

By following these steps, you'll be able to integrate Stripe Payments with subscription plans in your system.

blog-image-2.png

Integrate Stripe Payments for Subscription Plans  Guide.jpg

flutter.png

Learn how to initialize platforms in your Flutter application. This guide provides step-by-step instructions for setting up and configuring platform support.

Initialize Platforms in Flutter Application | FAB Builder

Initialise Platforms in Flutter Application

Initialize Platforms in Flutter Application  Fab Builder.jpg

Explore the FAB Builder Knowledge Base for expert guides, solutions, tutorials & FAQs. Get the support you need to master our tools and optimize your projects.

FAB Studio

Analytics

Customer Experience

Page Pilot

Blogs

Case Studies

Knowledge Base

Hackathon

Customization

Hosting

Consultation

Professional Services

Hire a Developer

The quickest way to master Product Growth, Management, and Trends.