# Architecture of aurelia.io

**URL:** <https://discourse.aurelia.io/t/architecture-of-aurelia-io/313>\
**Category:** Site Feedback\
**Created:** [November 6, 2017, 8:45am UTC](https://discourse.aurelia.io/t/architecture-of-aurelia-io/313 "2017-11-06T08:45:19Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![loaded02](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/loaded02/32/254_2.png) [@loaded02](https://discourse.aurelia.io/u/loaded02)\
**Post date:** [November 6, 2017, 8:45am UTC](https://discourse.aurelia.io/t/architecture-of-aurelia-io/313/1 "2017-11-06T08:45:19Z")

</div>

Hi,  
I find the new site very good and interesting. 👍 especially what you did to combine static rendering and progressive enhancement!

I am trying to figure out what you did.

1. There are components like `<search-panel>` and `<side-bar>` which are classical aurelia CustomElements. aurelia-docs.js is loaded, which includes require.js, and the bootstrapper is called. I get how this works.

2. Then there is the `<nav>` element which has its view server-side-rendered and has aurelia bindings like ${activeTab == ‘home’ ? …} in it. How does this work?

3. When you navigate between pages in the navbar, only index-fragment.html is beeing loaded. How does this work?

4. And finally I noticed, that window.aureliaDocConfiguration is beeing set. Whats that for?

I would be thrilled if anyone could give me a hint. 😀

---

<div class="post-metadata">

**Author:** ![loaded02](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/loaded02/32/254_2.png) [@loaded02](https://discourse.aurelia.io/u/loaded02)\
**Post date:** [November 10, 2017, 10:01am UTC](https://discourse.aurelia.io/t/architecture-of-aurelia-io/313/2 "2017-11-10T10:01:19Z")

</div>

anyone?? Is there a repo where I can look at sources?

---

<div class="post-metadata">

**Author:** ![timfish](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/timfish/32/1566_2.png) [@timfish](https://discourse.aurelia.io/u/timfish)\
**Post date:** [November 10, 2017, 11:04am UTC](https://discourse.aurelia.io/t/architecture-of-aurelia-io/313/3 "2017-11-10T11:04:25Z")

</div>

I asked the same as I was going to do a PR to fix the layout on mobile screens as the left menu takes up much of the screen. Apparently the repo is private.

---

<div class="post-metadata">

**Author:** ![loaded02](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/loaded02/32/254_2.png) [@loaded02](https://discourse.aurelia.io/u/loaded02)\
**Post date:** [November 21, 2017, 10:30am UTC](https://discourse.aurelia.io/t/architecture-of-aurelia-io/313/4 "2017-11-21T10:30:01Z")

</div>

I’ll try to answer it by myself:

1. CustomElements like `<drop-down>` are declared as `.globalResources(["./resources/drop-down",...]);` and can be bootstrapped through Progressive Enhancement with an `aurelia.enhance()` call. See guide [here](http://aurelia.io/docs/fundamentals/app-configuration-and-startup#leveraging-progressive-enhancement).

2. The Server side rendered static html page has a body tag like `<body aurelia-app="main" id="app-host">`. Inside the body there are aurelia bindings, triggers and aurelia CustomElements. How its done: The `aurelia-app="main"` attribute calls the main module. Inside the main module aurelia defines globalResources (see 1.) and bootstraps the aurelia app with a call that looks something like this:

3. Once you navigate to e.g. guides you click on a `<a href="docs">` tag and get a html response with aurelia bindings etc. from “docs/index-fragment.html”. How its done: Aurelia uses aurelia-fetch-client to add index-fragment.html to the url and fetch the response. Once it returns, aurelia uses InlineViewStrategy to dynamically enhance the template. Like:

4. window.aureliaDocConfiguration is a JSON that is used inside aurelia as a config object like: `this.config=window.aureliaDocConfiguration`

---

<div class="post-metadata">

**Author:** ![adriatic](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/adriatic/32/96_2.png) [@adriatic](https://discourse.aurelia.io/u/adriatic)\
**Post date:** [January 15, 2018, 8:27pm UTC](https://discourse.aurelia.io/t/architecture-of-aurelia-io/313/5 "2018-01-15T20:27:34Z")

</div>

@loaded02 since this disussion started with your own question followed by your own answer, I am assuming that you got it by the reverse engineering process. It might be a nice gesture to write a complete document / blog about such hybrid apps for our **[AUCS](https://discourse.aurelia.io/t/aucs-proposal-for-the-first-task/583)** project that will soon be looking for interesting technical documents.

---

<div class="post-metadata">

**Author:** ![loaded02](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/loaded02/32/254_2.png) [@loaded02](https://discourse.aurelia.io/u/loaded02)\
**Post date:** [January 17, 2018, 8:21am UTC](https://discourse.aurelia.io/t/architecture-of-aurelia-io/313/6 "2018-01-17T08:21:14Z")

</div>

Hi @adriatic! This is a good idea. I tried to answer it in an understandable way. But a Blog Post is a good idea. I have never written one before, but you should never say never. I’ll look into it.