How can I successfully use browser-sync with wordpress locally?

1 Views

I’m trying to get browser-sync to work with my multipress wordpress install, for simpler mobile / responsive development.

Currently I’m having problems in that, my normal development takes place at local.example.com, and browser-sync is proxying this (via 123.456.78.9:3202, as per browser sync).

Read More

So far browser-sync loads the site, but none of my scripts or CSS are loading (although images load fine). They jsut fail with no response in the network panel.

I’m using NGINX for hosting the site, as opposed to apache.

Does anyone have any wordpress browser-sync experience? Am I missing something with the browser-sync set up? And tips for this would be super welcome. I’d love to get this as a solid part of my work flow.

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. The problem is to do with how wordpress handles URLs, in that it normally uses full URLs for including content and links etc.

    The proxy is trying to access these on another domain and that’s why it’s failing.

    Update
    A much simple, cleaner and maintainable strategy, that also helps with development environments is to use the Root Relative URLs plugin. Adds hooks and configs similar to below, but also updates your content and editors to apply the same structure, so it’s a bit more robust

    Original Answer
    You can add a simple hook (source: wordpress relative urls) to filter wordpress generated urls and remove the base domain so you get relative links to styles and posts etc:

     $relative_url_filters = array(
        'script_loader_src', //js
        'style_loader_src', //css
        'post_link',       // Normal post link
        'post_type_link',  // Custom post type link
        'page_link',       // Page link
        'attachment_link', // Attachment link
        'get_shortlink',   // Shortlink
        'post_type_archive_link',    // Post type archive link
        'get_pagenum_link',          // Paginated link
        'get_comments_pagenum_link', // Paginated comment link
        'term_link',   // Term link, including category, tag
        'search_link', // Search link
        'day_link',   // Date archive link
        'month_link',
        'year_link'
        );

    foreach ( $relative_url_filters as $relative_url_filters ) {
        add_filter( $relative_url_filters, 'wp_make_link_relative' );
    }

    Which should clean up most of your issues and get browser-sync working nicely.

    I’m still having some issues where I have more complex inclusions for images, but more or less it’s working and we’re already seeing how cool it is!