N|Solid is a drop-in replacement for Node.js and it's fully compatible with the Babel ecosystem, in this article we are going to create a simple ES2015 web application using N|Solid and we will run and transpile it using Babel.

Initial Setup

We want to run the application using N|Solid and watch it on the N|Solid Console, so please refer to the N|Solid Documentation and the Quick Start Guide.

Also, running Babel v6 with npm v2 can cause performance problems due to how npm v2 installs dependencies, so we recommend updating to npm v3.

You can update npm in your N|Solid installation without problems by running:

$ [sudo] npm install -g npm

Getting Started

For our example, we are going to use micro, a library for writing http async microservices which are fully-featured ES2015, specifically async/await.

micro uses a CLI tool that automatically transpiles your server code using Babel with es2015 preset, but it can also be transpiled and run standalone, so it's perfect for this example.

Other tools like AVA for example use the same approach, a CLI that transpiles the code for you.

Creating a project

Let's create a basic node project with the following package.json:

{
  "name": "nsolid-babel",
  "version": "1.0.0",
  "description": "An example running N|Solid with Babel",
  "main": "server.js",
  "scripts": {
    "start": "micro -p 8181 server.js"
  },
  "author": "NodeSource Inc. <[email protected]>",
  "license": "MIT"
}

And then install the following dependencies:

$ npm install micro@1.x then-sleep --save

Note: newer versions of micro don't need Babel since Node ES2016 support has been increasing on every major version, this is presented only as an example.

After installing micro and a promised version of the sleep function let's write a simple http application using both:

'use strict'

import micro from 'micro'
import sleep from 'then-sleep'

let timeout = 500

export default async (req, res) => {
  await sleep(timeout)
  res.writeHead(200, { 'Content-Type': 'text/plain' })
  res.end(`and ${timeout}ms later...`)
}

The previous example can only be run with Babel, in this case with preset es2015 and the following plugins: transform-runtime and transform-async-to-generator but this is included with `[email protected]`.

Now, we need to see if everything is working as expected. Use this command to run the example using N|Solid:

$ NSOLID_APPNAME=nsolid-babel NSOLID_COMMAND=9001 micro -p 8181 server.js

And voila! Our process is now on the N|Solid Console:

Transpile project using Babel

Now we are going to transpile our project using Babel manually and run it again with the N|Solid runtime binary.

First, we need to install babel-cli and the needed plugins by running:

$ npm install -g babel-cli
$ npm install --save babel-runtime
$ npm install --save-dev babel-plugin-transform-async-to-generator babel-plugin-transform-runtime babel-preset-es2015

And we need to create our Babel configuration with the following:

{
  "presets": ["es2015"],
  "plugins": [
    "transform-runtime",
    "transform-async-to-generator"
  ]
}

Since we are going to run our example without micro CLI, we need to modify our code a little bit to listen on a specified port. Here is the updated version:

'use strict'

import micro from 'micro'
import sleep from 'then-sleep'

let timeout = 500

const server = micro(async (req, res) => {
  await sleep(timeout)
  res.writeHead(200, { 'Content-Type': 'text/plain' })
  res.end(`and ${timeout}ms later...`)
})

server.listen(8181)

Let's create a build server to store our transpiled code and transpile the server.js file with the following command:

$ babel server.js -o build/server.js

And run it with N|Solid:

$ NSOLID_APPNAME=nsolid-babel NSOLID_COMMAND=9001 nsolid build/server.js

Now you can write your N|Solid applications with Babel without problems!