How I extended my ReactJs Application to different URLs by domain forwarding with masking.
In this post, I will share how I extended my ReactJS application “tofusoup429.com” to completely different URLs such as “knklab.com”.
First, I created a sub-page “tofusoup429.com/subpage-knklab” by using the famous “react-router-dom” module. Then, I purchased a new URL, “knklab.com” and made it point to the sub-page.
In that way, I have one web application in fact, but it looks like I had two applications, “tofusoup429.com” and “knklab.com”
By doing so, I could benefit from saving myself from spending additional dollars on AWS S3, and boost efficiency from not have to create additional folder for another application in my local.
1. Original problem I encountered?
I have a personal web application “tofusoup429.com”, which was built in ReactJS and deployed in AWS S3. It was just a well-built personal webpage.
And I needed a business web application, “knklab.com”. It is for my work as a CPA, which, of course, should be separated from my personal one, “tofusoup429.com”
But, I did not want to buy another S3 storage from Amazon and make separate ReactJS application folder for the business web application.
In short, I wanted to manage the two web applications in the single S3 storage and the single ReactJS folder in my local.
2. Solution
I was thinking it would be really nice if I could make my newly purchased domain ,“knklab.com”, point to “tofusoup429.com/subpage-knklab”, a subdomain of “tofusoup429.com”
Another important thing is that after it redirects to “tofusoup429.com/subpage-knklab”, the URL should remain as “knklab.com”, not being change to “tofusoup429.com/subpage-knklab”
In that way, I can extend “tofusoup429.com” to however many separated web applications without buying another S3 and making additional ReactJS folders in my local. I achieved this goal by something called “Forwarding With Masking”
3. Prerequisite
The followings are all you need to do it.
(1) One Godaddy Account
(2) One new URL bought from Godaddy.
(3) A few clicks
Of course, you may use other domain providers. But I found using Godaddy the quickest and easiest.
Once you completed to purchase a new URL, then go to Godaddy and the “Manage Domain”
It should look something like this. I have two domains in my account.
I wanted to make “knklab.com” point to “tofusoup429.com/subpage-knklab”, therefore, I had to configure “knklab.com”. Click the three dots, which are placed on the right of “knklab.com”. Then you will see
Then Click “Manage DNS”.
On the new page, scroll down to the bottom-right and you will see Forwarding section as follows.
- “FORWARD TO”: It simply tells DNS where to redirect. In my case, it is “www.tofusoup429.com/subpage-knklab”
- “FOWARD TYPE”: This is only for search engines. For humans, regardless which one to be chosen, it works the same. However, depending on which one you choose, search engines index your page accordingly.
- “SETTINGS”: This is quite important. If you choose “Forward Only”, it changes URLs when redirecting. It means if a visitor types “knklab.com”, it changes to “www.tofusoup429.com/subpage-knklab” during redirection. If this is what you want, choose this. But I want to keep “knklab.com”, therefore, “Forward with masking” was what I had chosen.
- “Masking Information”: At least one field should be submitted. These go to header information of the application “knklab.com” Your input in Title goes inside <title></title> tag and Description and Keywords go to <meta name=”description” content=”your input”> and <meta name=”keywords” content=”your input”> respectively. Therefore, if you want to help search engine index your application properly, you better type some useful information regarding your application.
If you type “knklab.com”, it redirect you to “tofusoup429.com/subpage-knklab” Problem solved.
I hope this post saves someone’s time and money.
Thank you for reading.
