web-dev-qa-db-fra.com

BrowserSync ne peut pas obtenir /

J'ai seulement installé NodeJS et BrowserSync avec cette commande:

npm install -g browser-sync

Après avoir utilisé cette commande pour démarrer le serveur:

C:\xampp\htdocs\browser_sync
λ browser-sync start --server
[BS] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.223:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.1.223:3001
 --------------------------------------
[BS] Serving files from: ./

Et je reçois l’erreur suivante: Impossible d’obtenir /

Je suis confus parce que je veux utiliser BrowserSync avec mon projet Laravel.

Où devrais-je installer BrowserSync?

Merci.

node.jsbrowser-sync
29
Funny Frontend

Utiliser BrowserSync en tant que serveur ne fonctionne que si vous utilisez un site statique. Par conséquent, PHP ne fonctionnera pas ici.

On dirait que vous utilisez XAMPP pour servir votre site, vous pouvez utiliser BrowserSync pour envoyer un proxy à votre hôte local.

Exemple:

browser-sync start --proxy localhost/yoursite

Références:

21
Kyle Marimon

Parce que cela ne fonctionne qu'avec index.html par défaut, par exemple:

linux@linux-desktop:~/Templates/browsersync-project$ ls 

brow.html  css

linux@linux-desktop:~/Templates/browsersync-project$ browser-sync start --server --files '.'

Résultat attendu:

Cannot GET/

Afin de voir votre page Web statique dans le navigateur Web au lieu de ce message gênant, vous devez renommer un fichier brow.html en index.html. Cela résoudra le problème Cannot GET/.

P.S. Où que vous installiez une synchronisation de navigateur n’importe pas. Il suffit de taper npm install -g browser-sync quel que soit le répertoire dans lequel vous vous trouvez, et après avoir revérifié browser-sync --version.

12
daGo

Cet article était extrêmement utile pour faire en sorte que browsersync fonctionne avec un site PHP.

Voici à quoi devraient ressembler les configurations pour Grunt et Gulp (extraites de l'article)

Grunt

Vous aurez besoin du plugin grunt-php

grunt.loadNpmTasks('grunt-browser-sync');
grunt.loadNpmTasks('grunt-php');
grunt.loadNpmTasks('grunt-contrib-watch');

grunt.initConfig({
    watch: {
        php: {
            files: ['app/**/*.php']
        }
    },
    browserSync: {
        dev: {
            bsFiles: {
                src: 'app/**/*.php'
            },
            options: {
                proxy: '127.0.0.1:8010', //our PHP server
                port: 8080, // our new port
                open: true,
                watchTask: true
            }
        }
    },
    php: {
        dev: {
            options: {
                port: 8010,
                base: 'path/to/root/folder'
            }
        }
    }
});

grunt.registerTask('default', ['php', 'browserSync', 'watch']);

Gulp

Vous aurez besoin du gulp-connect-php plugin

// Gulp 3.8 code... differs in 4.0
var gulp = require('gulp'),
    php = require('gulp-connect-php'),
    browserSync = require('browser-sync');

var reload  = browserSync.reload;

gulp.task('php', function() {
    php.server({ base: 'path/to/root/folder', port: 8010, keepalive: true});
});
gulp.task('browser-sync',['php'], function() {
    browserSync({
        proxy: '127.0.0.1:8010',
        port: 8080,
        open: true,
        notify: false
    });
});
gulp.task('default', ['browser-sync'], function () {
    gulp.watch(['build/*.php'], [reload]);
});
3
Daniel Tonon

Documentation d'examen: .__ Par défaut, le fichier d'index du projet, par exemple, peut être index.html, mais s'il porte un nom différent, vous devez le spécifier avec l'indicateur suivant indiqué dans la documentation:

--index: Spécifie quel fichier doit être utilisé comme page d'index

Dans mon cas:

browser-sync start --index"datalayer.html"  --server --files "./*.*"

J'espère vous avoir aidé, à bientôt.

1
alfonsovc15

cela si ou grunt les utilisateurs, je sais que gulp a des réglages différents, que votre serveur local est configuré mais ne fonctionne toujours pas, commentez ou supprimez cette ligne

//server: 'http://localhost/yoursiterootfolder/'

ajouter cette ligne

proxy: "http://localhost/yoursiterootfolder/"

Modifiez "votre dossier de site avec le dossier actuel, votre dossier racine et non le thème, le dossier de modèle sur lequel vous travaillez Consultez https://browsersync.io/docs/grunt pour plus de détails Enjoy

0
Mr.Meshack

J'ai réussi à faire fonctionner cela sans utiliser gulp-php-connect. Cela semblait redondant si BrowserSync fournit lui-même une méthode proxy. J'utilise Gulp 4.0alpha.3 et le dernier NPM. Je n'ai pas pris la peine d'essayer de faire en sorte que le matériel es2015 fonctionne. Au lieu d'utiliser les termes «importation» et «exportation», j'ai utilisé les expressions traditionnelles «require» et «exports». et avale tâche par défaut. ('export default build' est beaucoup plus propre: D) Le reste est "Gulp 4". Ceci est minime, la précompilation SCSS et l’injection CSS. C’est un pas en avant vers une solution plus large mais cela semblait être un défi pour beaucoup de gens, y compris moi-même, de commencer: PHP/XAMPP/SCSS semble être une configuration courante, j’espère que cela aidera certaines personnes. Cela fonctionne exactement comme avec gulp-php-connect. Voici mon gulpfile.js entier:

const gulp = require('gulp');
const del = require('del');
const sass = require('gulp-sass');
const browserSync = require('browser-sync');
const sourcemaps = require('gulp-sourcemaps');

const server = browserSync.create();

const paths = {
  scss: {
    src: './scss/admin.scss',
    dest: './css/'
  }
};

const clean = () => del(['dist']);

function scss() {
  return gulp.src(paths.scss.src, { sourcemaps: true })
    .pipe(sass())
    .pipe(gulp.dest(paths.scss.dest));
}

function reload(done) {
  server.reload();
  done();
}

function serve(done) {
  server.init({
    injectChanges: true,
    proxy: 'localhost:8100/',
    port: 8080,
    open: true,
    notify: false
  });
  done();
}

const watch = () => gulp.watch('./scss/**/*.scss', gulp.series(scss, reload));

const build = gulp.series(clean, scss, serve, watch);
exports.build = build;

gulp.task('default', build);
0
sinrise

Vous devez utiliser l'option proxy à la place

browser-sync start --proxy yoursite.dev
0
shane

Assurez-vous d'être dans le répertoire où se trouve le fichier index.html. Il est fort probable que vous exécutiez cette commande à partir du répertoire racine de votre projet. Cette commande ne sera exécutée que si vous spécifiez le chemin d'index.

0
Mahmoud Zalt

BrowserSync ne charge par défaut que des fichiers statiques. Si vous souhaitez l’utiliser pour charger un fichier php (index.php), vous devez démarrer le serveur php puis vous y connecter avec la synchronisation du navigateur via l’option proxy.

Vous pouvez y parvenir avec le code suivant . NB: Ce code est placé dans votre fichier webpack.config.js.

var BrowserSyncPlugin = require('browser-sync-webpack-plugin');
var Connect = require('gulp-php-connect');

// we create a serve object which we instantiate in
// webpacks plugins scope.
var Serve = function(){
    Connect.server({
        base: './public',
        port: 9000,
        keepalive: true
    });
    // return a new instance of browser sync
    return new BrowserSyncPlugin({
        proxy: 'localhost:9000',
        port: 8080,
        files: ['public/**/*', 'public/index.php']
    });
}

Maintenant, dans la portée des plugins de votre fichier de configuration webpack, vous pouvez instancier notre objet Serve . NB: Je suggérerai que ce soit le dernier plugin que vous appelez.

plugins: [
    ...,
    new Serve()
]

J'espère que cela a été utile.

0
Daniel Barde