title: How to make a dynamic website depending on subdomain?
body: <hr />
  <p>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.</p>
  <hr />
  <h2>My goal</h2>
  <p>I have a website, <a href="http://www.mywebsite.com" rel="nofollow noreferrer">www.mywebsite.com</a>, that I want to use for multiple clients (brands). <br />
  For each brand I want to dynamically load different images / brand name / color schemes, etc. <br />
  Each website will be on a different subdomain, like <a href="http://www.brand1.mywebsite.com" rel="nofollow noreferrer">www.brand1.mywebsite.com</a>, <a href="http://www.brand2.mywebsite.com" rel="nofollow noreferrer">www.brand2.mywebsite.com</a> etc. <br />
  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.</p>
  <hr />
  <h2>The things you have to know</h2>
  <ol>
  <li>This is my first JavaScript project, I'm a PHP developer</li>
  <li>I'm using NextJS (ReactJS framework) with material-ui (<a href="https://github.com/mui-org/material-ui/tree/master/examples/nextjs" rel="nofollow noreferrer">this is what I used as a base</a>), because of material-ui the website use Server Side Rendering (SSR from now on)</li>
  <li>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</li>
  </ol>
  <hr />
  <h2>What I've tried so far</h2>
  <p>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. \</p>
  <p>The current state of things is :</p>
  <ul>
  <li><p>A config file for each brand, exporting the variables I'll use later in the code</p>
  <pre><code>export const ConfigBrand1 = {
      theme: {
          palette: {
              primary:{
                  light: '#314ce3',
                  main: '#fd0000'
              }
          } 
      }
  }
  </code></pre>
  </li>
  <li><p>A &quot;loader.js&quot; file that I would like to include in all the files that will need to use variables from the config file like this :<br />
  <code>import { Config } from './config/loader.js';</code><br />
  and then I'm using the variable like this :
  <code>Config.theme.palette.primary.light</code></p>
  </li>
  <li><p>The load.js file look like this :</p>
  <pre><code>import { brand1 } from './brand1.js';
  import { brand2 } from './brand2.js';
  
  function getConf(){
      return brand1;
  }
  
  export const Config = getConf();
  </code></pre>
  </li>
  </ul>
  <p>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.</p>
  <p><code>window.location</code> is not working because window is not defined as we're using SSR, so I can't get the current subdomain like that.</p>
  <p>I tried to use it in the _app.js file as well with no success.<br />
  I also tried to use ReactJS router but can't find a working syntax to use it, I don't think I can.</p>
  <p>My questions are simple :</p>
  <ul>
  <li>Do I have the right way of thinking ? (trying to use subdomains to dynamically load config files)</li>
  <li>Is there a way get the subdomain from a SSR file ?</li>
  <li>If not, how should I proceed to do what I want to do ?</li>
  </ul>
  <p>If you need any more precision, feel free to ask !</p>