Skip to content

Tutorials

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

82 Topics 594 Posts
  • 8 Votes
    1 Posts
    6k 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.

  • 11 Votes
    3 Posts
    502 Views
    crazycellsC

    @brazzerstop thanks for sharing!

  • Card view with CSS and some custom JS

    25
    6 Votes
    25 Posts
    871 Views
    phenomlabP

    For anyone following this thread, new stable release is here. If you use Cloudflare, please also see notes around that

    Link Preview Image Switch between list and card view function

    After a significant rewrite of the code plus the CSS, I’m pleased to release this stable version. There are some changes however. The external CSS file is n...

    favicon

    Sudonix | A one-stop-shop for all your technology questions (sudonix.org)

  • 1 Votes
    2 Posts
    86 Views
    ernstkiE

    @nhl-pl Good resource, thanks for sharing!

  • How to create a "New Topic" button in header

    24
    12 Votes
    24 Posts
    3k Views
    barisB

    @saikarthikp9 https://www.screentogif.com/

  • 6 Votes
    4 Posts
    212 Views
    DownPWD

    Thanks dude @baris

    Works great know on Smartphone an Desktop 🙂

    Love it !

  • 6 Votes
    6 Posts
    370 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...

    Screen Shot 2023-08-10 at 20.18.17.png

  • 3 Votes
    25 Posts
    2k Views
    E

    @baris Awesome, thank you!

  • Using Gmail as your mailer for NodeBB

    9
    2 Votes
    9 Posts
    3k Views
    PitaJP

    @S-Yang indeed, mailer putting take precedence over the built-in SMTP mailer.

  • 15 Votes
    106 Posts
    63k 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
    269 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
    748 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

  • 5 Votes
    1 Posts
    225 Views
    B

    Hi everybody 🌴

    Today I show you how to make a sticky brand header and avatars in Harmony.

    preview

    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

  • 0 Votes
    21 Posts
    1k Views
    phenomlabP

    @Topper Always happy to help. Good luck !

  • 1 Votes
    5 Posts
    320 Views
    DownPWD

    Example of footer bar with this code (and Other) on my dev site V3 harmony :

    image.png

  • 8 Votes
    1 Posts
    262 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:

    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.

    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
    648 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

  • 0 Votes
    2 Posts
    249 Views
    phenomlabP

    @julian nice idea, and one I can certainly make use of.

  • 0 Votes
    6 Posts
    393 Views
    PitaJP

    Oh are you using the one from the blog? Try our docs here instead:

    Link Preview Image Ubuntu (Recommended) - NodeBB Documentation

    favicon

    (docs.nodebb.org)