Multi-Tenant Architecture or Multitenancy is a software architecture that runs on a single instance of a database.

Basically, it uses a single database for all the multiple instances and can be differentiated with the subdomain.

As the above image portrait that each of the instances can differentiate the subdomain.

Introduction

We are trying to create the Multi-Tenant Architecture system, we wrote all the codes on the backend system. When comes on front-end, we found that no article will give the exact information we want. After digging google so hard we found only the two steps will enable us to run the same react-app on different sub-domain with our local machine.

Development

Backend system can able to identify the subdomain, but we need to run our react application on the different subdomain.

Step 1: Host Entries

Create react application can able to run on the different sub-domain in your local machine. But first, we need to add host entries to our local machine.

Let's say, we have only 3 tenants namely blue, red, green. Add these hosts entries and host file located on the

• Windows — “C:\Windows\System32\drivers\etc\hosts”
• Linux — “/etc/hosts”
• Mac OS X — “/private/etc/hosts”

127.0.0.1   blue.yourapp.com
127.0.0.1   red.yourapp.com
127.0.0.1   green.yourapp.com

Step 2: Environment Entries

In general, the create react app would not allow the react application in different subdomains, we need to add some environment variables to the react application.

Open your react app folder, then create .env the file doesn’t exist and adds these variables to it.

HOST=blue.yourapp.com
DANGEROUSLY_DISABLE_HOST_CHECK=true

Once the app is ready, then create-react-app will automatically open the application on the browser with the URL blue.yourapp.com

If you are application, needs to run different subdomain for the testing phase, we need to disable the host check. So that we need DANGEROUSLY_DISABLE_HOST_CHECK=true

Now you can run the multi-tenant architecture application in your local machine. That’s all you need to run the react-app on different sub-domains on your local machine.

If this article helps you, then please consider clap and share this article.