Is it possible to test Discourse Embed comment on localhost?

Support
1

I’m testing Discourse Embed comment system for my static blog using React locally but I can’t get it to work. I’m sure that I read the instruction like 10 times. So I’m thinking that localhost should be the blocker here.

Set up :

  • A fake domain cpp.dev in /etc/hosts to for routing to localhost. Let’s say it’s cpp.dev

  • Discourse : Using vagrant with latest commit from Github.

    • Discourse port inside vagrant: 3000
    • Host port for Discourse: 4000. I can access Discourse via http://cpp.dev:4000

  • My website is running at http://cpp.dev:3000

  • I added both cpp.dev:3000and cpp.dev to hosts list in Admin > Customize > Embedding section

  • Website embed code:

DiscourseEmbed = {
  discourseUrl: "http://cpp.dev:4000/",
  discourseEmbedUrl: window.location,
}

Looking good, now let’s run it. It shows up an iframe with loading discussion forever.

  • In terminal, I see this message:
I, [2016-04-18T07:24:10.751058 #25645]  INFO -- : Processing by EmbedController#comments as HTML
I, [2016-04-18T07:24:10.784677 #25645]  INFO -- :   Parameters: {"embed_url"=>"http://cpp.dev:3000/dnh-cpp/cpp-co-ban/0-gioi-thieu-tong-quan/0-0-gioi-thieu-ve-khoa-hoc/"}
D, [2016-04-18T07:24:10.807149 #25645] DEBUG -- :   User Load (5.1ms)  SELECT  "users".* FROM "users" WHERE "users"."auth_token" = '951c06ee26073030dc3cf264e80804fa' LIMIT 1  [["auth_token", "951c06ee26073030dc3cf264e80804fa"]]
D, [2016-04-18T07:24:10.866750 #25645] DEBUG -- :    (3.6ms)  SELECT "topic_embeds"."topic_id" FROM "topic_embeds" WHERE (lower(embed_url) = 'http://cpp.dev:3000/dnh-cpp/cpp-co-ban/0-gioi-thieu-tong-quan/0-0-gioi-thieu-ve-khoa-hoc')
I, [2016-04-18T07:24:10.917468 #25645]  INFO -- :   Rendered embed/loading.html.erb within layouts/embed (0.9ms)
I, [2016-04-18T07:24:10.987482 #25645]  INFO -- : Completed 200 OK in 186ms (Views: 61.0ms | ActiveRecord: 8.7ms)
  • In browser console, I see this
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('http://cpp.dev:4000') does not match the recipient window's origin ('http://cpp.dev:3000').

  • No new topic was created.

  • Some suspicious log as `/logs/

	
Started GET "/dnh-cpp/cpp-co-ban/0-gioi-thieu-tong-quan/0-0-gioi-thieu-ve-khoa-hoc/" for 127.0.0.1 at 2016-04-18 07:29:25 -0400
6:29 pm
Permalink Exists (1.1ms) SELECT 1 AS one FROM "permalinks" WHERE "permalinks"."url" = 'dnh-cpp/cpp-co-ban/0-gioi-thieu-tong-quan/0-0-gioi-thieu-ve-khoa-hoc' LIMIT 1 [["url", "dnh-cpp/cpp-co-ban/0
6:29 pm
ActionController::RoutingError (No route matches [GET] "/dnh-cpp/cpp-co-ban/0-gioi-thieu-tong-quan/0-0-gioi-thieu-ve-khoa-hoc") /var/lib/gems/2.2.0/gems/actionpack-4.2.6/lib/action_dispatch/middleware

Where is the wrong part in my setup ? Any help would be appriciated.

2

This might be due to vagrant’s port forwarding. Your site believes its host is :4000 when in fact it’s :3000. When I test locally I am not using such port forwarding and it works correctly.

Perhaps try the force hostname site setting with :3000? That might correct the issue.

3 Likes
3

I’m not too familiar with Vagrant or Ruby ecosystem but can you tell me how to start Discourse in a different port (say 4000) so the port is the same in Vagrant and host machine.

4

I don’t think you can start it on the same port in both machines but maybe someone can correct me. I run Discourse on “bare metal” but just installing ruby/etc on OSX.

5

Yeah. Using Vagrant is a little slow on my old Linux machine. I believe there is a Advanced Development Installation Guide to run Discourse directly on the host machine.

Turn out, using port 3000 on both guest and host machine is quite simple. Just open Vagrantfile and edit the port forwarding section.

I’m testing the original problem and give feedback later

6

New setup :

  • Discourse port: 3000 (both guest and host machine)
  • My website: 3001

OK. So I set force hostname to localhost:3000

Same error on browser console

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('http://localhost:3000') does not match the recipient window's origin ('http://cpp.dev:3001')
7

I Installed a Discourse instance on Digital Ocean VPS (with getting started guide) and everything started working again. So to answer the topic’s title: No, it’s not possible.

1 Like
8

Clarification: It does work on localhost if you use bare metal, as I’ve done this many times. The issue here is finding a sutiable vagrant configuration to test/develop it.

As for your error, you’ve forced hostname to localhost:3000 and are visiting it on http://cpp.dev:3001 – those need to match so I’d force the hostname to be whatever you are access it via your web browser.

4 Likes
9

Can we confirm this still works on a local bare-metal environment (specifically Mac). I’m wanting to work on a solution for embedding comments on a site behind basic http auth, but can’t get comments embedding between two localhost ports for development. I am whitelisting the site correctly, but am getting stuck on the “Loading Discussion…” view. I can get it breaking correctly with a 401 error in production, but when local, the job seems to just up and disappear.

10

Trying to re-animate this discussion in a brand new topic

11

This topic was automatically closed after 2973 days. New replies are no longer allowed.