How to make a dynamic website depending on subdomain?

user_8532801 0
Viewed 1414

I'm going to try to explain my problem as clear as possible, feel free to ask me more precision if you didn't understand what I meant and forgive my mistakes, English is not my mother tongue.

My goal

I have a website, www.mywebsite.com, that I want to use for multiple clients (brands).
For each brand I want to dynamically load different images / brand name / color schemes, etc.
Each website will be on a different subdomain, like www.brand1.mywebsite.com, www.brand2.mywebsite.com etc.
I want to store my code only in one place, and all the vhost for each subdomain to use the same base of the code, but loading dynamically all I want depending on the current subdomain the user is on.

The things you have to know

  1. This is my first JavaScript project, I'm a PHP developer
  2. I'm using NextJS (ReactJS framework) with material-ui (this is what I used as a base), because of material-ui the website use Server Side Rendering (SSR from now on)
  3. For now I'm working with a json config file for each brand (that I'm trying to load dynamically) but in the future I'd like to find a way to store these informations in the database

What I've tried so far

To reach that goal, I tried a bunch of things. I'm not going to talk about all of them because none of them worked so far. \

The current state of things is :

  • A config file for each brand, exporting the variables I'll use later in the code

    export const ConfigBrand1 = {
    theme: {
        palette: {
            primary:{
                light: '#314ce3',
                main: '#fd0000'
            }
        } 
    }
}

  • A "loader.js" file that I would like to include in all the files that will need to use variables from the config file like this :
    import { Config } from './config/loader.js';
    and then I'm using the variable like this : Config.theme.palette.primary.light

  • The load.js file look like this :

    import { brand1 } from './brand1.js';
import { brand2 } from './brand2.js';

function getConf(){
    return brand1;
}

export const Config = getConf();

And this is working properly for 1 brand. My problem is that I can't find a way to switch between the brands according to the subdomain I'm on.

window.location is not working because window is not defined as we're using SSR, so I can't get the current subdomain like that.

I tried to use it in the _app.js file as well with no success.
I also tried to use ReactJS router but can't find a working syntax to use it, I don't think I can.

My questions are simple :

  • Do I have the right way of thinking ? (trying to use subdomains to dynamically load config files)
  • Is there a way get the subdomain from a SSR file ?
  • If not, how should I proceed to do what I want to do ?

If you need any more precision, feel free to ask !

next.js reactjs javascript
1 Answers

As Lawrence said in the comment above - you need to get the request headers - Add that via a getServerSideProps in the page you use.

export async function getServerSideProps(context) 
 const hostDomain = context.req.headers.host;
  return {
    props: {}, // will be passed to the page component as props
  }
}
user_137499570
Related