# How do I customize app based on hostname?

**URL:** <https://discuss.emberjs.com/t/how-do-i-customize-app-based-on-hostname/11809>\
**Category:** Design\
**Created:** [October 22, 2016, 4:23am UTC](https://discuss.emberjs.com/t/how-do-i-customize-app-based-on-hostname/11809 "2016-10-22T04:23:03Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Graham\_Hunter](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/graham_hunter/32/12578_2.png) [@Graham\_Hunter](https://discuss.emberjs.com/u/Graham_Hunter)\
**Post date:** [October 22, 2016, 4:23am UTC](https://discuss.emberjs.com/t/how-do-i-customize-app-based-on-hostname/11809/1 "2016-10-22T04:23:03Z")

</div>

We are developing a multi-tenant application that is going to be set up on our customers’ domains. Each of our customers require a custom color scheme and text for their login screen. Of course, once they have logged in I can easily make an AJAX call and fetch all of the other dynamic content and formatting from the database, I just want to make sure that the user sees the right thing from the start of their experience.

Is there any way to get EmberJS to drive this from the incoming hostname?

As an aside, it would be great to see a multi-tenant design guide 😀

---

<div class="post-metadata">

**Author:** ![broerse](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/broerse/32/9497_2.png) [@broerse](https://discuss.emberjs.com/u/broerse)\
**Post date:** [October 22, 2016, 5:03am UTC](https://discuss.emberjs.com/t/how-do-i-customize-app-based-on-hostname/11809/2 "2016-10-22T05:03:50Z")

</div>

I think that if your multi-tenant grows you would also need separate databases. It is therefore better to specify an environment containing the login color scheme so you can switch databases easily also. To do this take a look at [GitHub - offirgolan/ember-host-manager: Host management solution for ambitious Ember applications](https://github.com/offirgolan/ember-host-manager)

---

<div class="post-metadata">

**Author:** ![Graham\_Hunter](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/graham_hunter/32/12578_2.png) [@Graham\_Hunter](https://discuss.emberjs.com/u/Graham_Hunter)\
**Post date:** [October 22, 2016, 1:07pm UTC](https://discuss.emberjs.com/t/how-do-i-customize-app-based-on-hostname/11809/3 "2016-10-22T13:07:52Z")

</div>

I have the database partitioning and clustering strategy already, we have a lot of experience in that area - it’s EmberJS that we’re coming up to speed on. For what it’s worth I had this working perfectly in a node/express prototype before we decided to port over to EmberJS.

It’s good to know that there is some sort of hostname conditional processing, I’ll look into ember-host-manager to see how deep it goes, but at first glance it seems to be completely client-side and manual config.

Are there any other possible solutions for pre-processing EmberJS? Is Fast Boot ready for something simple like this?

---

<div class="post-metadata">

**Author:** ![broerse](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/broerse/32/9497_2.png) [@broerse](https://discuss.emberjs.com/u/broerse)\
**Post date:** [October 22, 2016, 4:43pm UTC](https://discuss.emberjs.com/t/how-do-i-customize-app-based-on-hostname/11809/4 "2016-10-22T16:43:25Z")

</div>

We store the Ember app in the database with [ember-cli-deploy-couchdb](https://github.com/martinic/ember-cli-deploy-couchdb) so it can be specific for each customers. You can setup this on IBM’s [cloudant](https://cloudant.com/). If you want to do this on a classic backend I think that you can change the environment in the generated `<meta name="myapp/config/environment" content="....."/>` in `index.html`. Never tested this.

---

<div class="post-metadata">

**Author:** ![Graham\_Hunter](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/graham_hunter/32/12578_2.png) [@Graham\_Hunter](https://discuss.emberjs.com/u/Graham_Hunter)\
**Post date:** [October 22, 2016, 5:03pm UTC](https://discuss.emberjs.com/t/how-do-i-customize-app-based-on-hostname/11809/5 "2016-10-22T17:03:17Z")

</div>

Thank you. I’d appreciate knowing more details on how you look up the data for each hostname as part of the request process. There is very little documentation about this out there.

We’re in Azure so this project is looking like the right one to do this:

> **[GitHub - jamesdixon/node-ember-cli-deploy-azure-tables: Easily fetch...](https://github.com/jamesdixon/node-ember-cli-deploy-azure-tables)**
>
> Easily fetch ember-cli-deploy revisions from Azure Tables in a node app - GitHub - jamesdixon/node-ember-cli-deploy-azure-tables: Easily fetch ember-cli-deploy revisions from Azure Tables in a node...

---

<div class="post-metadata">

**Author:** ![broerse](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/broerse/32/9497_2.png) [@broerse](https://discuss.emberjs.com/u/broerse)\
**Post date:** [October 23, 2016, 5:02am UTC](https://discuss.emberjs.com/t/how-do-i-customize-app-based-on-hostname/11809/6 "2016-10-23T05:02:18Z")

</div>

We just use [ember-cli-deploy](http://ember-cli-deploy.com/) for each customer because the applications are in separate cloudant databases.

I created a test for your case. If you do the following:

- git clone [GitHub - broerse/multi-tenant](https://github.com/broerse/multi-tenant.git)
- `cd multi-tenant`
- `npm install`
- `bower install`
- `ember build production`
- `cd dist`
- `http-server` (npm install -g http-server)
- goto [http://localhost:8080/](http://localhost:8080/)
- break http-server
- open index.html in the `dist` folder in your editor and replace `foo` with `bar`
- `http-server`
- goto [http://localhost:8080/](http://localhost:8080/)

So it is possible to set your `tenant` on the backend based on hostname and do customization based on that.
