How to set up express api with framework7 + gulpfile?

Questions
1

Hi, I am trying to figure out how to create somekind of api or how to communicate with the backend?

I am want to use this sendgrind client.

I am making an attempt to try and setup something like api routes so I can call the client but I have little to no experience with any of this gulp/nodejs stuff.

var express = require('express');
var nodejs = express();
var router = express.Router();

nodejs.all('./api/*', function(req, res, next) {
  // CORS headers
  res.header("Access-Control-Allow-Origin", "*"); // restrict it to the required domain
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
  // Set custom headers for CORS
  res.header('Access-Control-Allow-Headers', 'Content-type,Accept,X-Access-Token,X-Key');
  if (req.method == 'OPTIONS') {
      res.status(200).end();
  } else {
      next();
  }
});

router.get('/login', function(test) {
  console.log(test);
});

var nodePort = process.env.PORT || 8080;



//-----------------SENDGRID
const client = require('@sendgrid/client');
//client.setApiKey(process.env.SENDGRID_API_KEY);
client.setApiKey('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');

//-----------------SENDGRID

/* eslint no-console: ["error", { allow: ["log"] }] */
const gulp    = require('gulp');
const connect = require('gulp-connect');
const opn     = require('opn')

const buildKsCore             = require('./build-ks-core.js');
const buildCoreJs             = require('./build-core-js.js');
const buildCoreTypings        = require('./build-core-typings.js');
const buildCoreLess           = require('./build-core-styles.js');
const buildCoreComponents     = require('./build-core-components.js');
const buildCoreLazyComponents = require('./build-core-lazy-components.js');

const env = process.env.NODE_ENV || 'development';

// Tasks
gulp.task('ks-core', buildKsCore);
gulp.task('core-js', buildCoreJs);
gulp.task('core-typings', buildCoreTypings);
gulp.task('core-styles', buildCoreLess);
gulp.task('core-components', buildCoreComponents);
gulp.task('core-lazy-components', buildCoreLazyComponents);

// eslint-disable-next-line
gulp.task('build-core', gulp.series([
  'core-components',
  'core-js',
  'core-typings',
  'core-styles',
  ...(env === 'development' ? [] : ['core-lazy-components']),
]));

// Watchers
const watch = {
  all() {
    gulp.watch(['./src/core/**/*.js'], gulp.series(
      'core-js',
      'core-components',
    ));
    gulp.watch(['./src/core/**/*.d.ts'], gulp.series(
      'core-typings'
    ));
    gulp.watch('./src/core/**/*.less', gulp.series(
      'core-styles',
      'core-components'
    ));
  },
  core() {
    gulp.watch(['./src/core/**/*.js'], gulp.series([
      'core-js',
      'core-components',
      ...(env === 'development' ? [] : ['core-lazy-components']),
    ]));
    gulp.watch(['./src/core/**/*.d.ts'], gulp.series(
      'core-typings'
    ));
    gulp.watch('./src/**/**/*.less', gulp.series([
      'core-styles',
      'core-components',
      ...(env === 'development' ? [] : ['core-lazy-components']),
    ]));
  },
};

// Server
function server() {

  nodejs.listen(nodePort);

  connect.server({
    host: '192.168.2.21',
    // host: '127.0.0.1',
    root: ['./'],
    livereload: false,
    port: '80',
  });  
}
gulp.task('server', () => {
  if (env === 'development') watch.all();
  server();
  // opn('http://localhost:3000/huka-app/');
});
gulp.task('server-core', () => {
  if (env === 'development') watch.core();
  server();
  // opn('http://localhost:3000/huka-app/');
});

gulp.task('watch', () => {
  watch.all();
});
gulp.task('watch-core', () => {
  watch.core();
});
2

Alright turns out I set it up in the wrong way.

First install with the Frameowrk7 CLI
https://framework7.io/docs/installation.html

Then I followed this guys explanation to serve the app with NodeJS