Express.js with Babel Boilerplate

A mostly unopinionated starter project for using Babel and ES2017+ features in a Node.js server environment as well as providing linting and testing solutions. It provides the setup for compiling, linting and testing your code but doesn't make any further assumptions on how your project should be structured.

It's a small improvement over Babel's official approach and express-generator.

Make sure you read the FAQ for more details and info.

Features:

Express.js as the web framework.
ES2017+ support with Babel.
Automatic polyfill requires based on environment with babel-preset-env.
Linting with ESLint.
Testing with Jest.
Quick deployment guide for Heroku, AWS Elastic Beanstalk, and App Engine.

Getting started

# Clone the project
git clone git@github.com:vmasto/express-babel.git
cd express-babel

# Make it your own
rm -rf .git && git init && npm init

# Install dependencies
npm install

# or if you're using Yarn
yarn

Then you can begin development:

# yarn
yarn run dev

# npm
npm run dev

This will launch a nodemon process for automatic server restarts when your code changes.

Testing

Testing is powered by Jest. This project also uses supertest for demonstrating a simple routing smoke test suite. Feel free to remove supertest entirely if you don't wish to use it.

Start the test runner in watch mode with:

# yarn
yarn test

# npm
npm test

You can also generate coverage with:

# yarn
yarn test --coverage

# npm
npm test -- --coverage

Linting

Linting is set up using ESLint. It uses ESLint's default eslint:recommended rules. Feel free to use your own rules and/or extend another popular linting config (e.g. airbnb's or standard).

Begin linting in watch mode with:

# yarn
yarn run lint

# npm
npm run lint

To begin linting and start the server simultaneously, edit the package.json like this:

"dev": "nodemon src/index.js --exec \"node -r dotenv/config -r babel-register\" | npm run lint"

Environmental variables in development

The project uses dotenv for setting environmental variables during development. Simply copy .env.example, rename it to .env and add your env vars as you see fit.

It is strongly recommended never to check in your .env file to version control. It should only include environment-specific values such as database passwords or API keys used in development. Your production env variables should be different and be set differently depending on your hosting solution. dotenv is only for development.

Deployment

Deployment is specific to hosting platform/provider but generally:

# yarn
yarn run build

# npm
npm run build

will compile your src into /dist, and

# yarn
yarn start

# npm
npm start

will run build (via the prestart hook) and start the compiled application from the /dist folder.

The last command is generally what most hosting providers use to start your application when deployed, so it should take care of everything.

You can find small guides for Heroku, App Engine and AWS in the deployment document.

Tips / Debugging

FAQ

Where is all the configuration for ESLint, Jest and Babel?

In package.json. Feel free to extract them in separate respective config files if you like.

Why are you using babel-register instead of babel-node?

babel-node contains a small "trap", it loads Babel's polyfill by default. This means that if you use something that needs to be polyfilled, it'll work just fine in development (because babel-node polyfills it automatically) but it'll break in production because it needs to be explicitely included in Babel's CLI which handles the final build.

In order to avoid such confusions, babel-register is a more sensible approach in keeping the development and production runtimes equal. By using babel-preset-env only code that's not supported by the running environment is transpiled and any polyfills required are automatically inserted.

Should I use this?

Full disclosure: If you have to ask perhaps you should reconsider. There is some debate on whether to use Babel-transpiled code on the server or not. Personally, I think it's fine and I've found this setup to be a sensible approach in doing so. That said, I'd suggest to take anything you read online with a grain of salt and refrain from blindly using boilerplates without first investigating personally.

Node is very rapidly converging with the latest ECMAScript specification, and there's mostly full native support for ES2015 and ES2016. The need to transpile on the server is way smaller nowadays, albeit the language is constantly improving and transpiling will probably always be a part of our workflow. At the time of this writing the main benefits are mainly ES6 module syntax and async/await without flags.

In any case, you can simply remove transpilation and keep everything else that this kit has to offer.

If you see anything that needs improvement feel free to open an issue for discussion!

You can also find me on twitter at @vmasto.

License

MIT License. See the LICENSE file.

1032740078/mini