How to make a React.js-based page within Discourse that only re-uses its header and session?

Dev
1

I would like to create a page under the Discourse’s main domain, for example:

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:

Pasted image827×114 17.5 KB

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!

1 Like
2

This isn’t possible, the router (both rails and ember one) must be aware of that route.

3

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?

4

But if the user go direct to the /my-page you’re toasted.

5

Right…
What if a topic is created for such a page, and then a template is overriden for this topic’s URL in Ember?

6

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

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?

7

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 :hammer: to churn the butter.

4 Likes
8

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.

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.