Separating routes in Express

Question

Edit #2

Got it, updated code

app.js

const express = require('express');
const bodyParser = require('body-parser');
const hbs = require('hbs');
const fs = require('fs');

var app = express();

// Server port
const port = process.env.PORT || 3000;
// Server starting message
app.listen(port, () => {
  console.log(`Server is up on port ${port}`);
});

// Views directory established and handbars engine
hbs.registerPartials(__dirname + '/views/layouts')
app.set('view engine', 'hbs');

// static assets rendered
app.use(express.static(__dirname + '/public'));

// body-parser middleware
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

// server.log setup middleware
app.use((req, res, next) => {
  var now = new Date().toString();
  var log = `${now}: ${req.method} ${req.url}`

  console.log(log);

  fs.appendFile('server.log', log + '\n', (err) => {
    if (err) {
      console.log('Unable to append to server.log');
    }
  });
  next();
});

// Routes
const routes = require('./routes/routes');
app.use("/", routes);

// Get year for footer
hbs.registerHelper('getCurrentYear', () => {
  return new Date().getFullYear()
});

Thank you everyone for your help!

Edit #1

I have added app.use("/", routes)" to my app.js but now when I test out my contact form and the mailer I get the following:

TypeError: Cannot read property 'name' of undefined
    at router.post (/Users/benbagley/Code/poetry-out-loud/routes/routes.js:29:27)
    at Layer.handle [as handle_request] (/Users/benbagley/Code/poetry-out-loud/node_modules/express/lib/router/layer.js:95:5)
    at next (/Users/benbagley/Code/poetry-out-loud/node_modules/express/lib/router/route.js:137:13)
    at Route.dispatch (/Users/benbagley/Code/poetry-out-loud/node_modules/express/lib/router/route.js:112:3)
    at Layer.handle [as handle_request] (/Users/benbagley/Code/poetry-out-loud/node_modules/express/lib/router/layer.js:95:5)
    at /Users/benbagley/Code/poetry-out-loud/node_modules/express/lib/router/index.js:281:22
    at Function.process_params (/Users/benbagley/Code/poetry-out-loud/node_modules/express/lib/router/index.js:335:12)
    at next (/Users/benbagley/Code/poetry-out-loud/node_modules/express/lib/router/index.js:275:10)
    at Function.handle (/Users/benbagley/Code/poetry-out-loud/node_modules/express/lib/router/index.js:174:3)
    at router (/Users/benbagley/Code/poetry-out-loud/node_modules/express/lib/router/index.js:47:12)

--

Original Question

I'm currently working on a node.js app and I'm trying to separate my app and routes into separate files.

Here is what I have so far

app.js

const express = require('express');
const bodyParser = require('body-parser');
const nodemailer = require('nodemailer');
const hbs = require('hbs');
const fs = require('fs');

const port = process.env.PORT || 3000;
var app = express();

hbs.registerPartials(__dirname + '/views/layouts')
app.set('view engine', 'hbs');

// body-parser middleware
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

const routes = require('./routes/routes');

app.use((req, res, next) => {
  var now = new Date().toString();
  var log = `${now}: ${req.method} ${req.url}`

  console.log(log);

  fs.appendFile('server.log', log + '\n', (err) => {
    if (err) {
      console.log('Unable to append to server.log');
    }
  });
  next();
});

app.use(express.static(__dirname + '/public'));

hbs.registerHelper('getCurrentYear', () => {
  return new Date().getFullYear()
});

app.listen(port, () => {
  console.log(`Server is up on port ${port}`);
});

routes.js

const express = require('express');
const router = express.Router();

// Routes
router.get('/', (req, res) => {
  res.render('index.hbs', {
    pageTitle: 'homepage'
  });
});

router.get('/registration', (req, res) => {
  res.render('registration.hbs', {
    pageTitle: 'Registration'
  });
});

router.get('/login', (req, res) => {
  res.render('login.hbs', {
    pageTitle: 'Login'
  });
});

router.post('/send', (req, res) => {
  const output = `
    <p>You have a new contact request</p>
    <h3>Contact Details</h3>
    <br>
    <ul>
    <li>Name: ${ req.body.name }</li>
    <li>Name: ${ req.body.email }</li>
    </ul>

    <h3>Message:</h3>
    <p>${ req.body.message }</p>
  `;

  nodemailer.createTestAccount((err, account) => {
    // create reusable transporter object using the default SMTP transport
    let transporter = nodemailer.createTransport({
      host: "smtp.mailtrap.io",
      port: 2525,
      auth: {
        user: "xxxxxxx",
        pass: "xxxxxxx"
      }
    });
    // setup email data with unicode symbols
    let mailOptions = {
      from: `"${req.body.name}" <${req.body.email}>`, // sender address
      to: 'xxxxxxxxx', // list of receivers
      subject: 'New contact message', // Subject line
      html: output // html body
    };
    // send mail with defined transport object
    transporter.sendMail(mailOptions, (error, info) => {
      if (error) {
        return console.log(error);
      }

      console.log('Message sent: %s', info.messageId);
      console.log('Preview URL: %s', nodemailer.getTestMessageUrl(info));

      res.render('index', {
        pageTitle: 'Thank you'
      });
    });
  });
});

module.exports = router;

The current terminal output I'm receiving is

Server is up on port 3000
Tue Jan 09 2018 15:58:40 GMT+0000 (GMT): GET /
[nodemon] restarting due to changes...
[nodemon] starting `node app.js hbs, css`
Server is up on port 3000

and in the browser I'm getting

here is a screenshot of the file structure

Any help here would be appreciated.

Answer 1

I'm still new to this but I use the following on my base URL:
app.get('/', (req, res) => { res.json('ready for your queries'); });
where app = express()
It's a simple code to let me know the server is running without doing anything with other services.

Answer 2

You should go for a tested solution. I like to use the express-generator. It creates a nice structure for you:

-bin
 www
-config
-public
 -javascripts
 -stylesheets
 -images
-routes
 index.js
 something.js
-views
 index.ejs
 something.ejs
app.js

bin/www holds your server-setting, app.js is where you load your config, your routes, your models if you are using a database. http://expressjs.com/en/starter/generator.html

You shouldn't have much trouble moving your code to this structure. Ask away if you have doubts.

Answer 3

Your code will be      

app.js 

const express = require('express');
const bodyParser = require('body-parser');
const nodemailer = require('nodemailer');
const hbs = require('hbs');
const fs = require('fs');

var app = express();

const port = process.env.PORT || 3000;
const routes = require('./routes/routes');


hbs.registerPartials(__dirname + '/views/layouts')
app.set('view engine', 'hbs');

// body-parser middleware
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

router(app);

app.use((req, res, next) => {
    var now = new Date().toString();
var log = `${now}: ${req.method} ${req.url}`

console.log(log);

fs.appendFile('server.log', log + '\n', (err) => {
    if (err) {
        console.log('Unable to append to server.log');
    }
});
next();
});

app.use(express.static(__dirname + '/public'));

hbs.registerHelper('getCurrentYear', () => {
    return new Date().getFullYear()
});

app.listen(port, () => {
    console.log(`Server is up on port ${port}`);
});


routes.js


module.exports = function (app) {

   app.get('/', (req, res) => {   res.render('index.hbs', {   pageTitle: 'homepage'  }); });

    router.get('/login', (req, res) => {  res.render('login.hbs', { pageTitle: 'Login'  }); });

..... Remaining function
}