Multi Tenant App in React

reactjs npm webpack

1686 просмотра

1 ответ

6375 Репутация автора

I'm building a multi tenant app in React (with Webpack setup via base, dev and prod config files), and I'm wondering the best way to create and access per-tenant variables.

When I run my app with:

npm run start tenant1

I am able to access tenant1 in Webpack by using this:

const tenant1 = process.argv[process.argv.length -1];

However, now I'm wondering what is the best way to make that variable globally accessible. My hope is to use that variable to the create a folder structure within the app along the lines of:

/app/${tenant}/img/ /app/${tenant}/css/ /app/${tenant}/components/

Ideally without having to import a variable into every single javascript file.

Any suggestions or links to existing setups would be greatly appreciated.

Автор: Toby Источник Размещён: 18.07.2016 05:52

Ответы (1)


0 плюса

6375 Репутация автора

Update Jan 2019:

I've found a way to achieve this with Create-react-app, not perfect but it works and achieves the following:

  • Run a React app on port 3000 that works for multiple domains simultaneously.

  • Forward all requests not handled by React to a back end.

  • Optionally use SSL in development.

Create-react-app has a proxy option that is very easy to setup. Simply add the following line to your package.json file:

"proxy": "http://localhost:5000"

However, this will not work for multiple domains. There is a more advanced proxy configuration available.

After following these steps, you will be able to control where different requests are sent, but it does not entirely provide the ability to proxy multiple domains - to achieve this:

  1. Create the file .env in the root of your create-react-app project.
  2. Add the following to it:
NODE_PATH=src/
DANGEROUSLY_DISABLE_HOST_CHECK=true

# optionally add this line for SSL in development

HTTPS=true
  1. From the advanced proxy instructions above, you should end up with a file called setupProxy.js in the root of your /src folder - change to the following:
const proxy = require('http-proxy-middleware')

const options = { target: 'https://[::1]:8000', secure: false }

module.exports = function(app) {
  app.use(proxy('/api', options))
  app.use(proxy('/graphql', options))
}

The magic part is the https://[::1]: 8000, which will forward all domains from the root request to the same back end. This doesn't seem to be well documented anywhere, but I believe it is the IPv6 equivalent of 127.0.0.1.

After this, you can add entries to your hosts file (for example: 127.0.0.1 some-domain.example.com), and in your React app use just the paths (/api or /graphql) and requests should be proxied to the same domain as the browser is running on.

Original answer:

I ended up taking a fairly manual approach to this.

I'm using a react/redux boilerplate, but I've modified the npm scripts like so:

"start:tenant1": "cp -r ./tenants/tenant1 ./app/tenant && cross-env NODE_ENV=development node server",
"start:tenant2": "cp -r ./tenants/tenant2 ./app/tenant && cross-env NODE_ENV=development node server",

Each tenant folder is copied to the app when the development server is run with the relevant command, and files are named the same within each tenant folder (masthead.svg, vars.js, etc) so that imports throughout the app can be static.

Mostly this works because I'm not using a node server in production, a static build folder is generated by the boilerplate.

Hope this helps someone.

Автор: Toby Размещён: 04.12.2016 04:26
Вопросы из категории :
32x32