# How to make a React.js-based page within Discourse that only re-uses its header and session?
**URL:** https://meta.discourse.org/t/how-to-make-a-react-js-based-page-within-discourse-that-only-re-uses-its-header-and-session/46927
**Category:** Development
**Created:** [07.Июль.2016 02:47:30 UTC](https://meta.discourse.org/t/how-to-make-a-react-js-based-page-within-discourse-that-only-re-uses-its-header-and-session/46927 "2016-07-07T02:47:30Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@meglio](https://meta.discourse.org/u/meglio)
#### Post date: [07.Июль.2016 02:47:30 UTC](https://meta.discourse.org/t/how-to-make-a-react-js-based-page-within-discourse-that-only-re-uses-its-header-and-session/46927/1 "2016-07-07T02:47:30Z")
I would like to create a page under the Discourse’s main domain, for example:
[https://meta.discourse.org/my-page](https://meta.discourse.org/my-page)
I’d like this page to get full access to Discourse js environment, but only show the main header:
Under the header, I’d like a React container with my own custom JS code.
Question:
1. How can I do it without making a custom plugin for Discourse, but by only providing custom JS scripts in admin panel?
2. I’ll need to still keep the Discourse header live
3. Will I be able to subscribe to Discourse streaming API without using Ember?
As you can understand, the whole goal for me here is to make a custom page with the native Discourse header, but with using React.js and not touching Ember.js at all.
Any advice appreciated!
---
### Author:  [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [07.Июль.2016 02:49:23 UTC](https://meta.discourse.org/t/how-to-make-a-react-js-based-page-within-discourse-that-only-re-uses-its-header-and-session/46927/2 "2016-07-07T02:49:23Z")
> [@meglio](#):
>
> without making a custom plugin for Discourse
This isn’t possible, the router (both rails and ember one) must be aware of that route.
---
### Author:  [@meglio](https://meta.discourse.org/u/meglio)
#### Post date: [07.Июль.2016 02:50:57 UTC](https://meta.discourse.org/t/how-to-make-a-react-js-based-page-within-discourse-that-only-re-uses-its-header-and-session/46927/3 "2016-07-07T02:50:57Z")
The ember router is JS, so I thought what if there is a way to add a route to it AND provide a template as well - such a template which would not make Ember request anything from the server, but just load react JS library and some custom JS files with React components?
---
### Author:  [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [07.Июль.2016 02:52:11 UTC](https://meta.discourse.org/t/how-to-make-a-react-js-based-page-within-discourse-that-only-re-uses-its-header-and-session/46927/4 "2016-07-07T02:52:11Z")
But if the user go direct to the /my-page you’re toasted.
---
### Author:  [@meglio](https://meta.discourse.org/u/meglio)
#### Post date: [07.Июль.2016 02:54:21 UTC](https://meta.discourse.org/t/how-to-make-a-react-js-based-page-within-discourse-that-only-re-uses-its-header-and-session/46927/5 "2016-07-07T02:54:21Z")
Right…
What if a topic is created for such a page, and then a template is overriden for this topic’s URL in Ember?
---
### Author:  [@meglio](https://meta.discourse.org/u/meglio)
#### Post date: [07.Июль.2016 03:01:22 UTC](https://meta.discourse.org/t/how-to-make-a-react-js-based-page-within-discourse-that-only-re-uses-its-header-and-session/46927/6 "2016-07-07T03:01:22Z")
I just looked at what HTML is returned per topic when it’s accessed directly by opening its URL. So, all the HTML gets populated straight away:
- Header
- Title
- Breadcrumb
- Posts
- Footer
This means the template has been processed on the server.
Is there a way to subscribe to an event when a new topic is opened in Discourse, including both navigation and opening by direct URL?
* * *
Now, if I make a separate page: [https://meta.discourse.org/my-page.html](https://meta.discourse.org/my-page.html)
Will it be possible to load the Discourse’s header section into that page and still have access to all the Discourse environment and streaming API from withing JS?
---
### Author:  [@gdpelican](https://meta.discourse.org/u/gdpelican)
#### Post date: [07.Июль.2016 06:12:31 UTC](https://meta.discourse.org/t/how-to-make-a-react-js-based-page-within-discourse-that-only-re-uses-its-header-and-session/46927/7 "2016-07-07T06:12:31Z")
What you’re proposing would have to go through some circus like
- Call to domain/my-page.html
- Discourse 404’s
- Your custom JS catches that 404, recognizes that it came from your custom route somehow, and.. renders the whole template into the 404 div?
- Meanwhile, it also loads a react component, which.. I guess gets slid into a particular DOM element using react-dom-inject or something?
- Then it subscribes to messageBus, err maybe by loading something like `let messageBus = Discourse. __container__.lookup('messageBus:main').subscribe`? (\<-- this code I think still works today, but likely won’t forever, or even for much longer)
I don’t quite get it; why is creating a custom plugin, or using Ember, not an option here?
I get that the plugin architecture and perhaps Ember has a steep learning curve, but this is really using a 🔨 to churn the butter.
---
### Author:  [@meglio](https://meta.discourse.org/u/meglio)
#### Post date: [07.Июль.2016 08:27:57 UTC](https://meta.discourse.org/t/how-to-make-a-react-js-based-page-within-discourse-that-only-re-uses-its-header-and-session/46927/8 "2016-07-07T08:27:57Z")
> [@gdpelican](#):
>
> I don’t quite get it; why is creating a custom plugin, or using Ember, not an option here?
Because I’m not a R programmer, nor am I an Ember programmer. In the same time, I have lots of React.js experience and I love building stuff with using it.
It’s not that learning Ember is difficult. It’s that I hate its paradigm, so would like to keep its usage to the minimum.
> [@gdpelican](#):
>
> Then it subscribes to messageBus, err maybe by loading something like
Okay, well, thanks for commenting - anyway, this one is not the critical point. What I wanted is to allow easy React embedding in particular Discourse pages.