• Stars
    star
    2,842
  • Rank 15,306 (Top 0.4 %)
  • Language
    JavaScript
  • License
    ISC License
  • Created over 8 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Example Node Server w/ Babel

Example Node Server w/ Babel

Getting Started

First we'll install @babel/cli, @babel/core and @babel/preset-env.

$ npm install --save-dev @babel/cli @babel/core @babel/preset-env

Then we'll create a .babelrc file for configuring babel.

$ touch .babelrc

This will host any options we might want to configure babel with.

{
  "presets": ["@babel/preset-env"]
}

Then create our server in index.js.

$ touch index.js
import http from 'http';

const server = http.createServer((req, res) => {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World\n');
}).listen(1337, '127.0.0.1');

console.log('Server running at http://127.0.0.1:1337/');

export default server;

With recent changes to babel, you will need to transpile your ES6 before node can run it.

So, we'll add our first script, build, in package.json.

  "scripts": {
+   "build": "babel index.js -d dist"
  }

Then we'll add our start script in package.json.

  "scripts": {
   "build": "babel index.js -d dist",
+   "start": "npm run build && node dist/index.js"
  }

Now let's start our server.

$ npm start

You should now be able to visit http://127.0.0.1:1337 and see Hello World.

Watching file changes with nodemon

We can improve our npm start script with nodemon.

$ npm install --save-dev nodemon

Then we can update our npm start script.

  "scripts": {
    "build": "babel index.js -d dist",
-   "start": "npm run build && node dist/index.js"
+   "start": "npm run build && nodemon dist/index.js"
  }

Then we'll restart our server.

$ npm start

You should now be able to make changes to index.js and our server should be restarted automatically by nodemon.

Go ahead and replace Hello World with Hello {{YOUR_NAME_HERE}} while our server is running.

If you visit http://127.0.0.1:1337 you should see our server greeting you.

Getting ready for production use

First let's move our server index.js file to lib/index.js.

$ mkdir lib
$ mv index.js lib/index.js

And update our npm start script to reflect the location change.

  "scripts": {
-   "build": "babel index.js -d dist",
+   "build": "babel lib -d dist",
    "start": "npm run build && nodemon dist/index.js"
  }

Next let's add a new task: npm run serve.

  "scripts": {
    "build": "babel lib -d dist",
    "start": "npm run build && nodemon dist/index.js",
+   "serve": "node dist/index.js"
  }

Now we can use npm run build for precompiling our assets, and npm run serve for starting our server in production.

$ npm run build
$ npm run serve

This means we can quickly restart our server without waiting for babel to recompile our files.

Oh, let's not forget to add dist to our .gitignore file:

$ touch .gitignore
dist

This will make sure we don't accidentally commit our built files to git.

Testing the server

Finally let's make sure our server is well tested.

Let's install mocha.

$ npm install --save-dev mocha

And create our test in test/index.js.

$ mkdir test
$ touch test/index.js
import http from 'http';
import assert from 'assert';

import server from '../lib/index.js';

describe('Example Node Server', () => {
  it('should return 200', done => {
    http.get('http://127.0.0.1:1337', res => {
      assert.equal(200, res.statusCode);
      server.close();
      done();
    });
  });
});

Next, install @babel/register for the require hook.

$ npm install --save-dev @babel/register

Then we can add an npm test script.

  "scripts": {
    "start": "nodemon lib/index.js --exec babel-node",
    "build": "babel lib -d dist",
    "serve": "node dist/index.js",
+   "test": "mocha --require @babel/register"
  }

Now let's run our tests.

$ npm test

You should see the following:

Server running at http://127.0.0.1:1337/

  Example Node Server
    ✓ should return 200

  1 passing (43ms)

That's it!

More Repositories

1

babel

🐠 Babel is a compiler for writing next generation JavaScript.
TypeScript
42,835
star
2

babel-loader

đŸ“Ļ Babel loader for webpack
JavaScript
4,794
star
3

minify

✂ī¸ An ES6+ aware minifier based on the Babel toolchain (beta)
JavaScript
4,375
star
4

babel-preset-env

PSA: this repo has been moved into babel/babel -->
JavaScript
3,502
star
5

babel-sublime

Syntax definitions for ES6 JavaScript with React JSX extensions.
JavaScript
3,260
star
6

babel-eslint

đŸ—ŧ A wrapper for Babel's parser used for ESLint (renamed to @babel/eslint-parser)
JavaScript
2,970
star
7

babylon

PSA: moved into babel/babel as @babel/parser -->
JavaScript
1,714
star
8

babelify

Browserify transform for Babel
JavaScript
1,680
star
9

gulp-babel

Gulp plugin for Babel
JavaScript
1,322
star
10

babel-upgrade

âŦ†ī¸ A tool for upgrading Babel versions (to v7): `npx babel-upgrade`
JavaScript
1,308
star
11

awesome-babel

😎A list of awesome Babel plugins, presets, etc.
857
star
12

babel-standalone

🎮 Now located in the Babel repo! Standalone build of Babel for use in non-Node.js environments, including browsers.
JavaScript
821
star
13

preset-modules

A Babel preset that targets modern browsers by fixing engine bugs (will be merged into preset-env eventually)
JavaScript
740
star
14

website

🌐 The Babel documentation website
TypeScript
740
star
15

kneden

Transpile ES2017 async/await to vanilla ES6 Promise chains: a Babel plugin
JavaScript
514
star
16

grunt-babel

Grunt plugin for Babel
JavaScript
438
star
17

proposals

✍ī¸ Tracking the status of Babel's implementation of TC39 proposals (may be out of date)
433
star
18

eslint-plugin-babel

An ESlint rule plugin companion to babel-eslint
JavaScript
390
star
19

generator-babel-boilerplate

A Yeoman generator to author libraries in ES2015 (and beyond!) for Node and the browser.
JavaScript
381
star
20

babel-time-travel

Time travel through babel transformations one by one (implemented in the Babel REPL now)
JavaScript
345
star
21

babel-polyfills

A set of Babel plugins that enable injecting different polyfills with different strategies in your compiled code.
TypeScript
321
star
22

babel-sublime-snippets

Next generation JavaScript and React snippets for Sublime
264
star
23

karma-babel-preprocessor

Karma plugin for Babel
JavaScript
167
star
24

ruby-babel-transpiler

Ruby Babel is a bridge to the JS Babel transpiler.
Ruby
158
star
25

babel-jest

Jest plugin for Babel (moved) ->
139
star
26

notes

â™Ŧ Notes from the @Babel Team (discuss in PRs)
121
star
27

generator-babel-plugin

Babel Plugin generator for Yeoman
JavaScript
118
star
28

babel-bridge

A placeholder package that bridges babel-core to @babel/core.
JavaScript
94
star
29

babel-bot

🤖 A helpful bot to automate common tasks on Babel Issues/PRs
JavaScript
75
star
30

babel-brunch

Brunch plugin for Babel
JavaScript
69
star
31

broccoli-babel-transpiler

Broccoli plugin for Babel
JavaScript
58
star
32

jade-babel

Jade plugin for Babel
JavaScript
40
star
33

sandboxes

Babel repl-like codesandbox: check out link =>
JavaScript
39
star
34

jekyll-babel

A Babel converter for Jekyll.
Ruby
34
star
35

acorn-to-esprima

(unmaintained) Converts acorn tokens to esprima tokens
JavaScript
33
star
36

babel-connect

Connect plugin for Babel
JavaScript
27
star
37

podcast.babeljs.io

The Babel Podcast site!
JavaScript
25
star
38

phabricator-to-github

A tool to migrate phabricator issues to github
JavaScript
24
star
39

actions

Babel specific github actions 🤖
JavaScript
24
star
40

rfcs

RFCs for changes to Babel
21
star
41

metalsmith-babel

A Metalsmith plugin to compile JavaScript with Babel
JavaScript
20
star
42

babel-configuration-examples

WIP
JavaScript
18
star
43

duo-babel

Duo plugin for Babel
JavaScript
16
star
44

logo

Babel logo
15
star
45

parser_performance

JavaScript
13
star
46

babel-standalone-bower

Bower build of babel-standalone. See https://github.com/Daniel15/babel-standalone
JavaScript
10
star
47

gobble-babel

Gobble plugin for Babel
JavaScript
9
star
48

eslint-config-babel

ESLint config for all Babel repos
JavaScript
9
star
49

eslint-plugin-babel-plugin

A set of eslint rules to enforce best practices in the development of Babel plugins.
JavaScript
8
star
50

flavortown

what else?
7
star
51

.github

Community health files for the Babel organization
7
star
52

babel-archive

🗑 Packages that are deprecated or don't need to be updated
JavaScript
6
star
53

babel-test262-runner

Run test262 tests on Node 0.10 using Babel 7 and `core-js@3`.
JavaScript
6
star
54

babel-plugin-proposal-private-property-in-object

@babel/plugin-proposal-private-property-in-object, with an added warning for when depending on this package without explicitly listing it in dependencies or devDependencies
JavaScript
6
star
55

phabricator-redirects

↩ī¸ Redirects for old phabricator urls
HTML
5
star
56

babel-plugin-transform-async-functions

https://github.com/MatAtBread/fast-async/issues/46
4
star
57

slack-invite-link

Source of slack.babeljs.io
1
star