browser-sync: iPhone not able to access external URL

For me, the IP showing by BrowserSync was different than my real one. Just leaving the comment here if someone’s fail on the same thing (Windows 10, by network, on a Moto G4 Plus).

(SOLVED) Really! Weird thing, but it solved my problem. So, the solution is:

1. Open Command Prompt
2. Type “ipconfig”
3. Find your IPv4 address below your network adapter
4. Use it instead of what browsersync told ya

Solved on WIN10 by allowing Node.js:Server-side Javascript on “Private” network in “Control Panel\System and Security\Windows Firewall\Allowed applications”

For me, the IP showing by BrowserSync was different than my real one. Just leaving the comment here if someone’s fail on the same thing (Windows 10, by network, on a Moto G4 Plus).

+1 , I have the same issue as well. The external Url is not usable on iphone safari/chrome or ipad

@philgruneich If you’re still having this issue, I found my solution by opening TCP Port 3000 in Windows Firewall thanks to this issue: https://github.com/Microsoft/BashOnWindows/issues/2054. A quick google of how to open a port and my browser sync was once again accessible from my mobile devices. Hope that might help you, too. 😃

Just fixed this for me by turning my firewall on and allowing connections to node.

• + 1 My firewall is closed, but also have the problem.

@giovannipds I wish it was that simple; but Node.js is not listed among applications since I installed it on Bash only using n; so I don’t have a clue how to allow it 😦

@jdkarns This was on a Macbook, I just went to firewall (it was off) and switched it on. It asked if I should allow connections to node and I said yes. Hasn’t worked consistently though unfortunately.

Same problem for me, all my projects stopped working on iphone. Using OSX and firewall is off

+1, both iPhone and iPad unable to access the external url. The tunnel url seems to work fine though.

One possible fix, setup host option with the right ip address if you have multiple network interface.

This way fix my problem.

Too bad, This fix is not stable. After some try, iphone and ipad not work any more but other pc works. Restart browsersync is need to make ipad works.

Multiple network interfaces was my issue as well. If I check “ipconfig”, browser-sync was reporting the “VirtualBox Host-Only Network” as my ip address. So naturally that’s what I typed on my phone…

If you have virtualbox, this may be the issue.

In macOS: Security & Privacy > Firewall > Firewall Options Find node and make sure it’s set to Allow incoming connections In my case it was set to Block incoming connections so that fixed my issue.

I still can’t get it to work for me 😦

I tried:

• completely disabling the firewall altogether, didn’t work
• enabled firewall and allowed node application, didn’t work
• added allowance for the port number, didn’t work

This stack overflow post suggests Avast might be interfering but I don’t have Avast installed https://stackoverflow.com/questions/50397030/browsersync-dont-work-external-link

I have Malwarebytes installed on my computer, I tried turning that off in case that was messing with things. Still no luck. 😦

This is on a Samsung Galaxy S7, not an iPhone.

Ah sorry, forum newbie. Thanks @giovannipds!

I have the same problem but on my Android Note 4. I tried Chrome, Native Samsung Browser and Firefox and none will access the URL. It works fine on my Nexus 7 tablet. I hope we can find a fix. Thank you

This is an old problem I had that has since been resolved, will close this out today. I wrote a blog post about getting set up with Browsersync and Grunt if anyone is interested: https://webdevstudios.com/2015/08/18/testing-websites-real-devices-browsersync/

Also, here’s my current Gruntfile if anyone wants to take a look at it for reference. Browsersync stuff is on line 255 and 293.

module.exports = function(grunt) {

    // load all grunt tasks in package.json matching the `grunt-*` pattern
    require('load-grunt-tasks')(grunt);

    grunt.initConfig({

        pkg: grunt.file.readJSON('package.json'),

        githooks: {
            all: {
                'pre-commit': 'default'
            }
        },

        sprite: {
            all: {
                'src': 'images/sprites/*.png',
                'dest': 'images/sprites.png',
                'destCss': 'sass/base/_sprites.scss',
                'imgPath': 'images/sprites.png',
                'algorithm': 'binary-tree',
            }
        },

        svgmin: {
            dist: {
                files: [{
                    expand: true,
                    cwd: 'images/svg',
                    src: ['*.svg'],
                    dest: 'images/svg'
                }]
            }
        },

        svgstore: {
            options: {
                prefix: 'icon-',
                cleanup: ['fill', 'style'],
                svg: {
                    style: 'display: none;'
                }
            },
            default: {
                files: {
                    'images/svg-defs.svg': ['images/svg/*.svg'],
                }
            }
        },

        sass: {
            options: {
                sourceMap: true,
                outputStyle: 'expanded',
                lineNumbers: true,
                includePaths: [
                    'bower_components/bourbon/app/assets/stylesheets',
                    'bower_components/neat/app/assets/stylesheets'
                ]
            },
            dist: {
                files: {
                    'style.css': 'sass/style.scss'
                }
            }
        },

        autoprefixer: {
            options: {
                browsers: ['last 2 versions', 'ie 9']
            },
            dist: {
                src: ['*.css', '!*.min.css', '!bower_components', '!node_modules']
            }
        },

        cmq: {
            options: {
                log: false
            },
            dist: {
                files: {
                    'style.css': 'style.css'
                }
            }
        },

        csscomb: {
            dist: {
                files: [{
                    expand: true,
                    cwd: '',
                    src: ['*.css', '!*.min.css', '!bower_components', '!node_modules'],
                    dest: '',
                }]
            }
        },

        cssmin: {
            minify: {
                expand: true,
                cwd: '',
                src: ['*.css', '!*.min.css', '!bower_components', '!node_modules'],
                dest: '',
                ext: '.min.css'
            }
        },

        concat: {
            dist: {
                src: [
                    'js/concat/*.js'
                ],
                dest: 'js/project.js',
            }
        },

        uglify: {
            build: {
                options: {
                    mangle: false
                },
                files: [{
                    expand: true,
                    cwd: 'js/',
                    src: ['**/*.js', '!**/*.min.js', '!concat/*.js'],
                    dest: 'js/',
                    ext: '.min.js'
                }]
            }
        },

        imagemin: {
            dynamic: {
                files: [{
                    expand: true,
                    cwd: 'images/',
                    src: ['**/*.{png,jpg,gif}'],
                    dest: 'images/'
                }]
            }
        },

        watch: {

            scripts: {
                files: ['js/**/*.js'],
                tasks: ['javascript'],
                options: {
                    spawn: false,
                    livereload: true,
                },
            },

            css: {
                files: ['sass/**/*.scss'],
                tasks: ['sass'],
                options: {
                    spawn: false,
                    livereload: true,
                },
            },

            sprite: {
                files: ['images/sprites/*.png'],
                tasks: ['sprite', 'styles'],
                options: {
                    spawn: false,
                    livereload: true,
                },
            },

            svg: {
                files: ['images/svg/*.svg'],
                tasks: ['svgstore'],
                options: {
                    spawn: false,
                    livereload: true,
                },
            },

        },

        shell: {
            grunt: {
                command: '',
            }
        },

        clean: {
            js: ['js/project*', 'js/**/*.min.js'],
            css: ['style.css', 'style.min.css']
        },

        makepot: {
            theme: {
                options: {
                    cwd: '',
                    domainPath: 'languages/',
                    potFilename: 'ucm.pot',
                    type: 'wp-theme'
                }
            }
            /*plugin_name: {
                options: {
                    cwd: 'plugins/plugin_name',
                    domainPath: '/languages/',
                    potFilename: 'plugin_name.pot',
                    type: 'wp-plugin'
                }
            }
            repeat as necessary
            */
        },

        addtextdomain: {
            theme: {
                options: {
                    textdomain: 'ucm'
                },
                target: {
                    files: {
                        src: ['*.php']
                    }
                }
            },
            /*plugin_name: {
                options: {
                    textdomain: 'text-domain'
                },
                target: {
                    files: {
                        src: ['*.php']
                    }
                }
            }
            repeat as necessary
            */
        },

        phpcs: {
            application: {
                dir: [
                    '**/*.php',
                    '!**/node_modules/**'
                ]
            },
            options: {
                bin: '~/phpcs/scripts/phpcs',
                standard: 'WordPress'
            }
        },

        browserSync: {
            dev: {
                bsFiles: {
                    src : 'style.css'
                },
                options: {
                    proxy: "ucm.dev"
                }
            }
        },

        sassdoc: {
            default: {
                src: [
                    'sass/**/*.scss',
                    'bower_components/bourbon/app/assets/stylesheets',
                    'bower_components/neat/app/assets/stylesheets'
                ],
                options: {
                    dest: './sassdoc/',
                    display: {
                        access: ['public'],
                        watermark: false
                    },
                    groups: {
                        fontawesomeicons: 'Font Awesome Icons',
                        wds: 'WebDevStudios',
                        'undefined': 'Bourbon & Neat'
                    },
                    description: 'Sass Documentation, which includes Bourbon and Neat documentation as well.',
                    sort: ['group>'],
                },
            },
        },


    });

    grunt.loadNpmTasks('grunt-browser-sync');

    grunt.registerTask('styles', ['sass', 'autoprefixer', 'cmq', 'csscomb', 'cssmin']);
    grunt.registerTask('javascript', ['concat', 'uglify']);
    grunt.registerTask('imageminnewer', ['newer:imagemin']);
    grunt.registerTask('sprites', ['sprite']);
    grunt.registerTask('icons', ['svgmin', 'svgstore']);
    grunt.registerTask('i18n', ['makepot']);
    grunt.registerTask('default', ['styles', 'javascript', 'imageminnewer', 'icons', 'i18n', 'sassdoc']);

};