Multi-Tenant Architecture in React JS

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.

Multi-tenant Architecture

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 10 — “C:\Windows\System32\drivers\etc\hosts”
  • Linux — “/etc/hosts”
  • Mac OS X — “/private/etc/hosts”
127.0.0.1   blue.yourapp.com127.0.0.1   red.yourapp.com127.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 URLblue.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.

Follow me on twitter: @naveenda

--

--

--

I was a software developer at Zoho and I help people to improve/understand ReactJS knowledge through Medium articles.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Easily create custom Typescript interfaces with quicktype.io — Fran Prieto

image with HTML code to illustrate our article

Systems Interaction in Entity-Component-System (events)

How I Use Excel With React

99 Projects in DailyUI

JavaScript_Arrays

Create a Coronavirus (Covid-19) App in React

Pagepiling.js with React web app

Set up your React app for CRUD operations using MongoDB Realm GraphQL — Part 2

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Naveen DA

Naveen DA

I was a software developer at Zoho and I help people to improve/understand ReactJS knowledge through Medium articles.

More from Medium

How to send push notifications with Firebase and React

React, Libraries and Frameworks: an Introduction

Which Frontend Framework to Pick for Your E-commerce Storefront?

GraphQL and React starter pack