title: Configure Express routes using Gulp
body: <p>I have a <strong>server side</strong> and a <strong>client side</strong>, in the <strong>server side</strong> im using <strong>express</strong> and <strong>mongodb</strong> and in the <strong>client side</strong> im using gulp.</p>
  
  <p>My <strong>client side</strong> use <strong><a href="http://localhost:3000/" rel="nofollow noreferrer">http://localhost:3000/</a></strong> and the <strong>server side</strong> use <strong><a href="http://localhost:3010/" rel="nofollow noreferrer">http://localhost:3010/</a></strong></p>
  
  <p>I need to create a profile page <strong><a href="http://localhost:3000/profile" rel="nofollow noreferrer">http://localhost:3000/profile</a></strong>.</p>
  
  <p>i have configure my route in angular using <strong>$routeProvider</strong></p>
  
  <pre><code>  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);
  </code></pre>
  
  <p>}</p>
  
  <p>when i click the url <code>&lt;a href="profile"&gt;ACCOUNT&lt;/a&gt;</code> it works ok but if i reload the page i get <strong>Cannot GET /profile</strong></p>
  
  <p>I think this is because i need to configure my routes in <strong>express</strong> and in <strong>gulp</strong>.</p>
  
  <p><strong>index.js</strong> server side </p>
  
  <pre><code>    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');
  </code></pre>
  
  <p><strong>gulpfile.js</strong> client side</p>
  
  <pre><code>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'])
  });
  </code></pre>