Configure Express routes using Gulp

Question

I have a server side and a client side, in the server side im using express and mongodb and in the client side im using gulp.

My client side use http://localhost:3000/ and the server side use http://localhost:3010/

I need to create a profile page http://localhost:3000/profile.

i have configure my route in angular using $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);

}

when i click the url <a href="profile">ACCOUNT</a> it works ok but if i reload the page i get Cannot GET /profile

I think this is because i need to configure my routes in express and in gulp.

index.js server side

    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 client side

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

Answer 1

If you are using html5 mode, you need additional setup for browserSync to rewrite all routes to index.html of your application, so that angular can process routing.

You can use connect-history-api-fallback middleware (https://github.com/bripkens/connect-history-api-fallback)

To use this middleware, you need to modify your browserSync setup like this:

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

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