Browser-sync: iPhone not able to access external URL

[bezierer]

Everything is working great on desktop, but when using the external URL on my iPhone (Chrome, Safari) it just loads for a minute then say's it can't access the page. I have another machine that I'm using this exact setup on and it loads fine on my iPhone so I'm at a loss. Gulp file below:

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    prefix = require('gulp-autoprefixer'),
    rename = require('gulp-rename'),
    browserSync = require('browser-sync'),
    reload      = browserSync.reload;

var paths = {
    styles: {
        src: './bower_components',
        files: './modules/**/*.scss',
    }
}


var displayError = function(error) {

    // Initial building up of the error
    var errorString = '[' + error.plugin + ']';
    errorString += ' ' + error.message.replace("\n",''); // Removes new line at the end

    // If the error contains the filename or line number add it to the string
    if(error.fileName)
        errorString += ' in ' + error.fileName;

    if(error.lineNumber)
        errorString += ' on line ' + error.lineNumber;

    // This will output an error like the following:
    // [gulp-sass] error message in file_name on line 1
    console.error(errorString);
}

gulp.task('sass', function (){

    gulp.src(paths.styles.files, {base: '.'})

        .pipe(sass({
            sourceComments: 'map',
            errLogToConsole: true,
            includePaths : [
                paths.styles.src,
                paths.styles.src + '/bootstrap-sass/assets/stylesheets',
            ]
        }))
        .on('error', function(err){
            displayError(err);
        })
        .pipe(prefix(
            'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'
        ))
        .pipe(rename(function(path) {
            path.dirname = path.dirname.replace('/sass', '/css');
            path.extname = '.css';
        }))
        .pipe(gulp.dest('.'))
        .pipe(reload({stream: true}));

});


gulp.task('default', ['sass'], function() {
    browserSync({
        proxy: "http://localhost/ADGA/"
    });
    gulp.watch(paths.styles.files, ['sass'])
        .on('change', function(evt) {
            console.log(
                '[watcher] File ' + evt.path.replace(/.*(?=sass)/,'') + ' was ' + evt.type + ', compiling...'
            );
        })
        .on('change', reload);
});

[joshikeerti]

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

[AWaselnuk]

Also experiencing this issue, using browser-sync CLI with a rails server

browser-sync start --proxy localhost:3000 --logLevel "debug"

Debug option shows only expected output.

[gavmck]

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

[bezierer]

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']);

};

[eyal670]

had the same problem,
check your firewall settings
that's seems to fix it for me, and that explain the diff result from one computer to the other
platform: win 7
browser-sync with gulp
firewall setup: windows default

[wangxiao]

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

[jdkarns]

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

[bezierer]

@jdkarns did my above gruntfile setup help or my blog post on getting started with Browsersync?

[Turqueso]

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

[jdkarns]

Thank you for your post it did not help only because I do have a proxy
server like I said my tablet still works and it's a Android but my phone
decided not to work any longer. My phone is an Android Note 4 it stopped
after an update. It may have something to do with the injection process
being blocked I don't know.
On Apr 1, 2016 1:33 PM, "Luz Aramburo" [email protected] wrote:

Same problem for me, all my projects stopped working on iphone

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
https://github.com/BrowserSync/browser-sync/issues/604#issuecomment-204481352

[gavmck]

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

[jdkarns]

@gavmck How did you configure your firewall I don't really understand how to accomplish this in windows firewall?

[gavmck]

@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.

[jdkarns]

Mine is a PC. It doesn't make sense because it really worked great for a
long time on my phone my tablet and the PC all at once. Then one day bam no
phone. Strange the tablet still works fine.

Thank you so much for your reply. I hope you have better luck also.
On May 4, 2016 5:22 AM, "Gavyn McKenzie" [email protected] wrote:

@jdkarns https://github.com/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.

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
https://github.com/BrowserSync/browser-sync/issues/604#issuecomment-216808834

[Turqueso]

no news on this?

[renweibo]

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.

[jdkarns]

It's my own ignorance, it turned out to be my Windows firewall. At first I
didn't think it was. I turned it off and my phone was then able to access
my wamp proxy website.
On Jun 25, 2016 10:09 AM, "renweibo" [email protected] wrote:

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

This way fix my problem.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/BrowserSync/browser-sync/issues/604#issuecomment-228544506,
or mute the thread
https://github.com/notifications/unsubscribe/AGPywUUh4FhrouGfyHkgrYuVlqSdQgKOks5qPTaXgaJpZM4EOskX
.

[laurenthiernard]

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

[exoticknight]

@laurenthiernard
oh thx!!!!!!!!!!!!

[maxart2007]

@laurenthiernard thank you so so so much!

[giovannipds]

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).

[stephenasamoah]

Solution here also works wonderfully through the tunnel option:
https://github.com/BrowserSync/browser-sync/issues/390

[philgruneich]

I don't know why this issue is still open, but, I'm facing a situation like this one.

Does anyone know how to allow Node.js from Bash on Windows on the Windows 10 firewall?

[giovannipds]

@philgruneich you just have to enter on your control panel and allow Node.js to your current network connection (private or public). After that, you're all free to access it. =)

[philgruneich]

@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 :(

[giovannipds]

@philgruneich can't you just use the installer normally? That's usually how it's done on Windows. Sorry if I couldn't help you more.

[courier-new]

@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. :)

[giovannipds]

@courier-new just fix the link, URL's pointing to a wrong link (although copying and pasting works).

[courier-new]

Ah sorry, forum newbie. Thanks @giovannipds!

[Dan503]

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.

[nikkijd]

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.

[LewisAndrewCampbell]

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.

[sergeykonovalenko]

My cause of the problem was that the firewall, which blocked Node.js and the phone in antivirus software. After I clicked "unlock", it worked.

[VladislavDegtyarenko]

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

[al3jandrocabrera]

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

This worked for me after trying everything else. Many thanks @VladislavDegtyarenko

[sergeykonovalenko]

Good day! Thank you very much for your help!

---

С уважением, Сергей
Моё портфолио - https://freelance.ru/sergeykonovalenko
Отзывы *- https://freelance.ru/reviews/sergeykonovalenko
*Вконтакте *- https://vk.com/sergey_konovalenko
*Facebook *- https://www.facebook.com/sergeyfreelance
*Skype *- sergeykonovalenko5550199
*Почта *- [email protected]
*Viber, WhatsApp, Telegram [phone]

сб, 25 лип. 2020 о 09:27 Alejandro Cabrera [e-mail] пише:

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

This worked for me after trying everything else. Many thanks
@VladislavDegtyarenko https://github.com/VladislavDegtyarenko

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/BrowserSync/browser-sync/issues/604#issuecomment-663817194,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AHU4WY6RVLOUMGNG5AJ2LOLR5J3N5ANCNFSM4BB2ZELQ
.