Настройка экспресс-маршрутов с использованием Gulp - PullRequest
Новая
       5

Настройка экспресс-маршрутов с использованием Gulp

0 голосов
/ 06 июня 2018

У меня есть на стороне сервера и на стороне клиента , на стороне сервера im с использованием express и mongodb и на клиентской стороне я использую gulp.

My на клиентской стороне использует http://localhost:3000/ и на стороне сервера использовать http://localhost:3010/

Мне нужно создать страницу профиля http://localhost:3000/profile.

Я настроил свой маршрут в угловом формате, используя $ routeProvider 

  function($routeProvider,$locationProvider){
$locationProvider.html5Mode(true);  
$routeProvider
  .when('/',{
    templateUrl: 'views/home.html',
    controller: 'homeCtrl'
  })
  .when('/profile',{
    templateUrl: 'views/profile.html',
    controller: 'profileCtrl'
  })
  .otherwise({
    redirectTo: '/'
  });
  $locationProvider.html5Mode(true);

}

, когда я нажимаю на URL <a href="profile">ACCOUNT</a>, все работает нормально, но если я перезагружаю страницу, я получаю Невозможно получить / профиль

Я думаю, это потому, что мне нужно настроить мои маршруты в express и в gulp .

index.js на стороне сервера 

    const app = express();
    const cors = require('cors')
    const bodyParser = require('body-parser');
    const mongoose = require('mongoose');

    app.use(cors())
    app.use(express.static(__dirname+'/client'));
    app.use(bodyParser.urlencoded({ extended: false }));
    app.use(bodyParser.json());

    User = require('./models/user')
    Card = require('./models/card')

    // Connect to mongoose
    mongoose.connect('mongodb://localhost/minimind');
    const db = mongoose.connection;

    app.get('/', function(req,res){
      res.send('ok')
    });

    app.use('/api',require('./routes/cards'));


    app.listen(3010);
    console.log('Running on port 3010');

gulpfile.js на стороне клиента 

const gulp = require('gulp');
const sass = require('gulp-sass')
const concat = require('gulp-concat');
const browserSync = require('browser-sync').create();

const scripts = require('./scripts');
const styles = require('./styles');

var devMode = false;

gulp.task('default',['sass','js','html','browser-sync'])

gulp.task('sass', function(){
  gulp.src('./src/sass/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./dist/css'))
    .pipe(browserSync.reload({
      stream: true
    }));
})

gulp.task('js', function(){
  gulp.src(scripts)
    .pipe(concat('scripts.js'))
    .pipe(gulp.dest('./dist/js'))
    .pipe(browserSync.reload({
      stream: true
    }));
});

gulp.task('html', function(){
  gulp.src('./src/templates/**/*.html')
    .pipe(gulp.dest('./dist/'))
    .pipe(browserSync.reload({
      stream: true
    }));
})

gulp.task('build', function(){
  gulp.start(['sass', 'js', 'html'])
})

gulp.task('browser-sync', function(){
  browserSync.init(null,{
    open: false,
    server: {
      baseDir: 'dist'
    }
  });
});


gulp.task('start', function(){
  devmode = true;
  gulp.start(['build','browser-sync']);
  gulp.watch(['./src/js/**/*.js'],['js']);
  gulp.watch(['./src/templates/**/*.html'],['html']);
  gulp.watch(['./src/sass/pages/*.scss'],['sass'])
  gulp.watch(['./src/sass/*.scss'],['sass'])
});

1 Ответ

0 голосов
/ 06 июня 2018

Если вы используете режим html5 , вам потребуется дополнительная настройка для browserSync для перезаписи всех маршрутов в index.html вашего приложения, чтобы angular мог обрабатывать маршрутизацию.

Вы можете использовать connect-history-api-fallback промежуточное ПО (https://github.com/bripkens/connect-history-api-fallback)

) Чтобы использовать это промежуточное ПО, вам необходимо изменить browserSync настроить так: 

const historyApiFallback = require('connect-history-api-fallback')

gulp.task('browser-sync', function(){
  browserSync.init(null,{
    open: false,
    server: {
      baseDir: 'dist',
      middleware: [ historyApiFallback() ]
    }
  });
});
...