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?

[CydGoblin]

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" notifications@github.com 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" notifications@github.com 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

[CydGoblin]

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" notifications@github.com 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.

[ghost]

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 Почта - sergeykonovalenko5550199@gmail.com Viber, WhatsApp, Telegram +38 (097) 194-82-58

сб, 25 лип. 2020 о 09:27 Alejandro Cabrera notifications@github.com пише:

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 .