Skip to content

Tutorials

NodeBB guides, how-to's and general tips and tricks

83 Topics 601 Posts
  • [FAQ] Websockets not working due to misconfigured origins

    Pinned
    1
    8 Votes
    1 Posts
    8k Views
    PitaJP
    This FAQ is applicable for the following situations: You're receiving the following error in the Javascript console: WebSocket connection to 'wss://<site>/socket.io/?EIO=3&transport=websocket' failed: Error during WebSocket handshake: Unexpected response code: 400 The "Looks like your connection to NodeBB was lost, please wait while we try to reconnect." alert box and the spinner in the navbar consistently appear You want your users to be able to access NodeBB from multiple subdomains on your site Background By default, NodeBB only allows websocket connections from the "url" value in config.json. This is because of what is called Cross-Site Websocket Hijacking. By restricting the origin at which sockets can connect, we prevent this attack from taking place. Diagnosis To make sure that your issue is in fact caused by an origin mismatch, try this: Stop the NodeBB server: ./nodebb stop Start NodeBB in dev mode: ./nodebb dev Visit your site, and see if the issue is resolved. Ctrl+C to exit dev mode If the issue disappeared when visiting your site running in dev mode, then your problem is in fact an origin mismatch. If not, it is likely something else, so look around or ask a question here on the forum. Solutions The easiest solution is to set the "url" value in config.json to exactly the URL at which you access your NodeBB forum. For instance, the configuration for this site is { "url": "https://community.nodebb.org", ... } If you want your forum to work from multiple origins (like www.yoursite.com and yoursite.com) the preferred option is to just redirect one to the other. For instance, redirect www.yoursite.com to yoursite.com within your reverse proxy. If you absolutely must have full access from multiple origins, you can configure the accepted origins directly. As documented here, you can add a socket.io:origins property to config.json. For example, to allow accessing the forum sockets from the main NodeBB site, nodebb.org, the following would be added to our config: { ... "socket.io": { "origins": "https://community.nodebb.org:* https://nodebb.org:*" } } Make sure your original site is included in the new origins property, and that you add :*, otherwise it's invalid. Still having issues? It's likely a reverse proxy configuration issue. Take a look at the proxy documentation for examples. If you still have issues, ask a question here on the forum.
  • how do you use sort-by-title

    2
    0 Votes
    2 Posts
    118 Views
    Z
    not sure the plugin worked for firefox. saw a-z in the sort icon. when i used it, i expected the topics in the category would be sorted a-z. they werent
  • How to write hooks

    5
    6 Votes
    5 Posts
    1k Views
    barisB
    Quick start plugin has an example on how to add a new api route https://github.com/NodeBB/nodebb-plugin-quickstart/blob/master/library.js#L40-L76. The hooks that are fired client side are for client side code in plugins. If you want to pass data from the client to the server you have two options. Create an api route like in quick start plugin Create a new socket event listener on the server side and use socket.emit() client side. Example here
  • How do I create footer for more information, text and links

    Moved Solved
    8
    1 Votes
    8 Posts
    822 Views
    phenomlabP
    @frontendjulien Always happy to help.
  • [manual] Build a Night Mode for Harmony

    3
    +0
    11 Votes
    3 Posts
    956 Views
    crazycellsC
    @brazzerstop thanks for sharing!
  • Card view with CSS and some custom JS

    25
    6 Votes
    25 Posts
    4k Views
    phenomlabP
    For anyone following this thread, new stable release is here. If you use Cloudflare, please also see notes around that https://sudonix.org/post/8433
  • Running NodeBB using Rootless Podman and Nobbic

    2
    1 Votes
    2 Posts
    289 Views
    ernstkiE
    @nhl-pl Good resource, thanks for sharing!
  • How to create a "New Topic" button in header

    24
    12 Votes
    24 Posts
    5k Views
    barisB
    @saikarthikp9 https://www.screentogif.com/
  • Create a public chat room dropdown in navigation

    4
    6 Votes
    4 Posts
    389 Views
    DownPWD
    Thanks dude @baris Works great know on Smartphone an Desktop Love it !
  • Stats of categories as a progress bars on GitHub

    6
    6 Votes
    6 Posts
    653 Views
    crazycellsC
    @baris I think even for tags, this "distribution bar" above makes more sense than the "progress bar" since tags are not competing with each other to reach #264... so, their "progress" is not that important... [image: 1691713412155-screen-shot-2023-08-10-at-20.18.17.png]
  • [manual] Build a custom header in Harmony

    Moved
    25
    3 Votes
    25 Posts
    4k Views
    E
    @baris Awesome, thank you!
  • Using Gmail as your mailer for NodeBB

    9
    2 Votes
    9 Posts
    4k Views
    PitaJP
    @S-Yang indeed, mailer putting take precedence over the built-in SMTP mailer.
  • Using CloudFlare with NodeBB

    106
    15 Votes
    106 Posts
    74k Views
    phenomlabP
    @DownPW I'm not sure it's solely traffic that causes this. I took saw this frequently when I used Cloudflare and it became so bad that I decided to stop using the service altogether. No issues since.
  • Run NodeBB in the Docker or Kubernetes

    11
    6 Votes
    11 Posts
    3k Views
    J
    @Sebastix to reset admin password run: . /nodebb user reset 1 --pssword
  • Setup OGProxy for use in NodeBB

    6
    1 Votes
    6 Posts
    479 Views
    phenomlabP
    @brazzerstop yep. Already discussed with Julian. Hotlink protect is enabled on my domain. I've seen numerous cases whilst writing the server sudonix uses, and so I fill the gap with a pretty 404 image.
  • [manual] Build a Dock Panel

    12
    +0
    4 Votes
    12 Posts
    1k Views
    DownPWD
    @brazzerstop said in [manual] Build a Dock Panel: If you mean show "select category" on every category/topic page, I think no. yep It's that what I mean, I have testing with category number 0 but don't working
  • [manual] Sticky header and avatars in Harmony

    1
    +0
    5 Votes
    1 Posts
    348 Views
    B
    Hi everybody Today I show you how to make a sticky brand header and avatars in Harmony. [image: 1IAJKUX.gif] Step-by-step We need modify 6 files: library.js, harmony.json, theme.tpl, harmony.tpl, brand.tpl, post.tpl to add 3 new settings: Sticky avatars (user avatars in the posts) Sticky header (brand header) Setting to show sticky header on mobile devices First we add a new settings in library.js Paste this code after this line stickyAvatars: 'on', stickyHeader: 'off', stickyHeaderMobile: 'off', Paste this code after this line config.stickyAvatars = config.stickyAvatars === 'on'; config.stickyHeader = config.stickyHeader === 'on'; config.stickyHeaderMobile = config.stickyHeaderMobile === 'on'; Now we need add translation for the new settings in harmony.json Paste this code after this line "settings.stickyAvatars": "Sticky user avatars in posts", "settings.stickyHeader": "Sticky header on desktop", "settings.stickyHeaderMobile": "Show sticky header on mobile", Next step, create controls of new settings in ACP and user profile in harmony.tpl and theme.tpl Paste this code after this line in harmony.tpl <div class="form-check form-switch"> <input type="checkbox" class="form-check-input" id="stickyAvatars" name="stickyAvatars" /> <label for="stickyAvatars" class="form-check-label">settings.stickyAvatars</label> </div> <div class="form-check form-switch"> <input type="checkbox" class="form-check-input" id="stickyHeader" name="stickyHeader" /> <label for="stickyHeader" class="form-check-label">settings.stickyHeader</label> </div> <div class="form-check form-switch"> <input type="checkbox" class="form-check-input" id="stickyHeaderMobile" name="stickyHeaderMobile" /> <label for="stickyHeaderMobile" class="form-check-label">settings.stickyHeaderMobile</label> </div> Paste this code after this line in theme.tpl <div class="form-check mb-3"> <input class="form-check-input" type="checkbox" id="stickyAvatars" name="stickyAvatars" {{{ if config.theme.stickyAvatars }}}checked{{{ end }}}> <label class="form-check-label" for="stickyAvatars">settings.stickyAvatars</label> </div> <div class="form-check mb-3"> <input class="form-check-input" type="checkbox" id="stickyHeader" name="stickyHeader" {{{ if config.theme.stickyHeader }}}checked{{{ end }}}> <label class="form-check-label" for="stickyHeader">settings.stickyHeader</label> </div> <div class="form-check mb-3"> <input class="form-check-input" type="checkbox" id="stickyHeaderMobile" name="stickyHeaderMobile" {{{ if config.theme.stickyHeaderMobile }}}checked{{{ end }}}> <label class="form-check-label" for="stickyHeaderMobile">settings.stickyHeaderMobile</label> </div> The finally we modify a theme files post.tpl and brand.tpl Replace the code in this line with a new code in post.tpl <div class="icon py-1 bg-body d-none d-sm-block {{{ if config.theme.stickyAvatars }}}position-sticky{{{end}}}" {{{ if config.theme.stickyAvatars }}}style="top:7.5rem;"{{{end}}}> Replace the code in this line with a new code in brand.tpl <div class="container px-md-4 brand-container {{{ if config.theme.stickyHeaderMobile }}}sticky-top{{{end}}} {{{ if config.theme.stickyHeader }}}sticky-lg-top bg-body pt-3{{{end}}}" {{{ if config.theme.stickyHeader }}}style="margin-top:-1rem;"{{{end}}}> /.nodebb build Happy Dev
  • How to verify users with third party APIs?

    21
    0 Votes
    21 Posts
    2k Views
    phenomlabP
    @Topper Always happy to help. Good luck !
  • How to create a category selector in navigation

    1
    8 Votes
    1 Posts
    430 Views
    barisB
    Since NodeBB 1.18.6 it is possible to create dropdowns in the navigation (https://github.com/NodeBB/NodeBB/issues/9967). Before 1.18.6 to accomplish this you would have to use nodebb-plugin-customize to modify the menu template or use javascript to inject the markup after page load. In this tutorial I will show you how to create a dropdown navigation item that replaces the default categories link with a dropdown. The final result will look like this: [image: 1680303939625-category-dropdown.gif] First thing to do is to turn the navigation item into a dropdown, to do this head over to yourforum.com/admin/settings/navigation, select the categories navigation item and toggle the dropdown option. [image: 1680304297256-category-dropdown-1.gif] Once this is done you can use the text area below the toggle to add your markup. To create a simple dropdown you would just add a list of dropdown items like so: <li><a class="dropdown-item" href="/categories">All</a></li> <li><a class="dropdown-item" href="/category/2/general-discussion">General Discussion</a></li> Since you can input html here you can create custom dropdowns. To achieve the same dropdown as the first gif use the below html code, no css is necessary. <li><a class="dropdown-item" href="/categories">All</a></li> <li class="dropdown-divider"> <li><a class="dropdown-item" href="/category/2/general-discussion">General Discussion</a></li> <li class="d-flex flex-column"> <a class="dropdown-item" href="/category/3/nodebb-development">NodeBB Development</a> <div class="d-flex flex-column px-4"> <div class="d-flex align-items-center gap-1"> <i class="fa fa-fw fa-caret-right text-primary"></i> <a class="btn-ghost-sm text-sm text-nowrap" href="/category/13/nodebb-blog">NodeBB Blog</a> </div> <div class="d-flex align-items-center gap-1"> <i class="fa fa-fw fa-caret-right text-primary"></i> <a class="btn-ghost-sm text-sm text-nowrap" href="/category/5/feature-requests">Feature Requests</a> </div> <div class="d-flex align-items-center gap-1"> <i class="fa fa-fw fa-caret-right text-primary"></i> <a class="btn-ghost-sm text-sm text-nowrap" href="/category/6/bug-reports">Bug Reports</a> </div> <div class="d-flex align-items-center gap-1"> <i class="fa fa-fw fa-caret-right text-primary"></i> <a class="btn-ghost-sm text-sm text-nowrap" href="https://explore.transifex.com/nodebb/nodebb/">NodeBB Localization</a> </div> </div> </li> <li><a class="dropdown-item" href="/category/7/nodebb-plugins">NodeBB Plugins</a></li> <li><a class="dropdown-item" href="#">...add more as needed...</a></li> Modify the links to match your forum categories. To create dividers between sections you can use <li class="dropdown-divider"> Now you can navigate your categories without going to the home/categories page.
  • 0 Votes
    14 Posts
    1k Views
    S
    Hi @baris , Just to provide some updates: I tested the w=<number of mongod instance> in my local and it works. However, in our real environment, we're using Amazon DocumentDB, which unfortunately doesn't support user defined write concern and ignored the configuration, it will always use the default MAJORITY. Based on the suggestion by DocumentDB, I guess we should use readPreference=primary in this case to ensure read-after-write result. Assuming DocumentDB will manage it so that for reads after write will prioritize primary and at the time routes other reads to secondary to avoid overloading primary. Just curious why we need to configure this instead of being a default behavior. https://docs.aws.amazon.com/documentdb/latest/developerguide/how-it-works.html#how-it-works.replication