Using ES6/ES2015 in a Node.JS and Express

These are some very minimal changes to the standard express.js generated app.js file. It looks nice, “=>” syntax is getting easier to read the more I use and get used to it. Note: I took out a lot of unrelated code to isolate the topic of the blog. This example is for getting a development, learning environment ready to use Babel.js with Express on the back and front ends.

How’d I do it?

Using Babel’s “babel-node” cli tool, its compiling in real time in the development env. For production, do not use babel-node, you’ll want to compile with Babel.js then run with node. Just use “npm install -g babel-cli” and babel-node is already there and built in.

I also included eslint for good measure. Make sure to “npm install –save-dev babel-eslint” and set the parser to “babel-eslint.”

{
"parser": "babel-eslint",
"env": {
"node": true,
"es6": true
},
"rules":{
"vars-on-top": 2,
"no-undef": 2
}
}

view raw
.eslintrc
hosted with ❤ by GitHub

"use strict";
import express from 'express';
import path from 'path';
import favicon from 'serve-favicon';
import logger from 'morgan';
import cookieParser from 'cookie-parser';
import bodyParser from 'body-parser';
import routes from './routes/index';
import users from './routes/users'
//using let
let app = express();
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes);
app.use('/users', users);
// using arrow syntax
app.use((req, res, next) => {
let err = new Error('Not Found');
err.status = 404;
next(err);
});
if (app.get('env') === 'development') {
app.use((err, req, res, next) => {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
app.use((err, req, res, next) => {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});
module.exports = app;

view raw
app.js
hosted with ❤ by GitHub

{
"name": "es6-express",
"version": "0.0.0",
"description": "ES6/ES2015 Express Example",
"repository": "n/a",
"license": "MIT",
"author": "Steven",
"scripts": {
"lint": "eslint app.js",
"start": "babel-node ./bin/www",
"auto-start": "nodemon –exec \"npm run lint && npm start\" –ignore public/js"
},
"dependencies": {
"body-parser": "~1.13.2",
"cookie-parser": "~1.3.5",
"debug": "~2.2.0",
"express": "~4.13.1",
"jade": "~1.11.0",
"morgan": "~1.6.1",
"serve-favicon": "~2.3.0"
},
"devDependencies": {
"babel": "^5.8.21",
"babel-eslint": "^4.0.10",
"eslint": "^1.1.0",
"nodemon": "^1.4.1"
}
}

view raw
gistfile1.txt
hosted with ❤ by GitHub

What else do you suggest that can I do to the app.js to take advantage ES6 features, without straying too far from the default?

Written By StevenLacks