How do I setup Babel 6 with Node JS to use ES6 in my Server Side code?

Question

I have read several times the documentation provided at : Node API Babel 6 Docs

I'm starting out learning pg-promise following the Learn by Example tutorial and would prefer to work with ES6 and transpile to ES5 with Babel but am unsure of a few things :

1. After installing babel-core, what preset do I use and where/how do I configure this to work?

The documentation was unclear to me about which file I put: require("babel-core").transform("code", options); into and what parts of that code are place holders. When I use that code, do I just use it one time somewhere and then I can use ES6 in every other file? How would this be achieved?

2. I read about this .babelrc file and would like to confirm if the actual filename is ".babelrc" or if that is just the file extension and where in relation to the root directory of my project do I put that file.. and how do I link to it?

3. If I'm using pg-promise should I be using ES6 and Babel or will running : npm install as described under the Testing section for pg-promise be enough and trying to use ES6 with this create more problems?

I was hoping to take advantage of let and const if the need came up during my server side development.

4. Is there a standard file structure for a node+babel+pg-promise server setup?

Edit Worth noting that I have also read Node JS with Babel-Node and saw that using this should be avoided. The final answer at the very bottom didn't really make sense to me for similar reasons I'm having trouble following the actual documentation provided by Babel.

Eozoic

Answer 1

1.a What Preset is needed?

You will need to install Babel firstly with npm install babel-core --save-dev in the root directory of your project using a Terminal window like Command Prompt.

Once installed, you will need to install the es2015 preset with npm install babel-preset-es2015 --save-dev. Babel-Core is Promises/A+ Compliant but not ideal for usage due to poor error handling so a library such as Bluebird should be used instead for this purpose. In order to transpile, babel-core will still need to be installed and es2015 enables ES6->ES5 transpiling so you can use fancy things like let and const etc.

1.b Where to put require("babel-core");?

instead, use require("babel-core/register"); and place it inside your Entry file typically called, "server.js". The server.js file will need to use CommonJS (ES5) exclusively.

By using the "require" statement it will apply all relevant transforms to all code being required into the Entry file and all files being required/included into those files.

You point to the Entry file inside package.json under the "main": section.

Package.json is created when you initialise the project with npm init at the root directory of your project inside the Terminal Window

One approach to this would be :

• Entry File - server.js
• server.js - requires {babel-core and the main ES6 file : config.js/jsx/es6/es}
• config.es6 - uses ES6 and has includes(requires) for all other project files that can also use ES6 as they get transpiled by being loaded into the "config" file which is being directly transpiled by babel-core.

2. What is .babelrc?

.babelrc is the filename and should be placed in the same folder as your package.json file (normally the root directory) and will automatically "load" when babel-core is required to determine which preset(s) or plugins are to be used.

Inside .babelrc , you will need to add the following code :

{
  "presets": ["es2015"]
}

3. pg-promise Testing Section

A direct quote from the developer recently answered this

You do not need to worry about steps in the Tests, use only the steps in the install. The one in tests relates to the dev dependency installation, in order to run tests. The pg-promise can work with any promise library compliant with Promises/A+ spec.

4. Standard File/Folder Structure for Server Side Projects?

There is no standard way to achieve this task as each project has unique demands. A good starting point would be to place the Entry file in the project root directory, the ES6 Config file in a "scripts" or "src" sub-folder and individual components in folders below that.

e.g.

• ROOT/server.js
• ROOT/src/config.es6
• ROOT/src/component1/files.es6
• ROOT/src/component2/files.es6

With this in place, Babel will successfully transpile all ES6 to ES5 and enable support of A+ compliant promises.

To begin using the node.js webserver This Guide provides a bit more insight and in the context of this answer the code shown would be placed into the ES6 config.es6 file and the following code would go into the Entry server.js file :

require("babel-core/register");
require("./src/config.es6");

The process for building Isomorphic web applications is different to this and would likely use things like grunt, gulp, webpack, babel-loader etc another example of which can be Found Here.

This answer is the combination of several key points provided by other answers to this question as well as contributions from experienced developers and my own personal research and testing. Thank you to all who assisted in the production of this answer.

Eozoic

Is there a repository that we can pick up to see an example? – Devisable

This answer was used to produce the following repository and linked file in particular : github.com/JaxCavalera/Tagged-DBserver/blob/master/server.js – Eozoic

If you are wanting to build isomorphically and include server-side CSS etc then an example that combines the usage of Babel 6 with Webpack server-side can be found here : Babel-Loader is configured github.com/JaxCavalera/Tagged_Isomorphic/blob/master/… Server-Side webpack is configured using shared webpack.config.js github.com/JaxCavalera/Tagged_Isomorphic/blob/master/… Various webpack configs are launched with NPM scripts defined in the package.json file. – Eozoic

@JaxCavalera but isn't the Require Hook "babel-register" not stable for production code? Shouldn't people use the "babel-cli"? – Electorate

Answer 2

1. This answer uses this simple directory structure

   project/server/src/index.js => your server file

   project/server/dist/ => where babel will put your transpiled file

2. Install babel dependencies

   npm install -g babel nodemon

   npm install --save-dev babel-core babel-preset-es2015

3. Add these npm scripts to your package.json file

   "scripts": { "compile": "babel server/src --out-dir server/dist", "server": "nodemon server/dist/index.js }

4. Create a .babelrc file in your project root directory

   { "presets": "es2015" }

5. Transpile your directory with

   npm run compile

6. Run your server with

   npm run server

Tatman

What's the best way to watch the scripts then? – Allenaallenby

I don't know. I just ctrl-c and rerun the npm script when I make changes to the server. – Tatman

Answer 3

I think you should use a tool like grunt or gulp to manage all your "build" tasks. It will automate it for you, and you won't make errors.

In one command, you can transpile your code into babel ES2015 et start your application.

I suggest you to take a look at this simple project. (just install node_modules and launch npm start to start the app.js file)

However, if you really want to use babel manually,

• .babelrc is the name of the file, you can see one in this project (redux) to have an example

• .babelrc is a config file, if you want to see how it works, you can check this package.json (always redux)

• There's actually no standard way that I know. You can use the project skeleton below if needed, and send pull request to improve it :-)

Grajeda

Thank you for your response, I'm not certain that I understand how to apply it to the situation. I thought Gulp is used for building your client side stuff. I'm unsure how to apply info from "this simple project" to the question at hand. My only experience with a task manager is Webpack, but it's also for client side stuff only as far as I know. In the redux example does *.babelrc just need to be in the same folder as the package.json file for node/babel to find & use it when you run any of the "script": commands in the Terminal? Is the 3rd link clientside or does it work on node server – Eozoic

Gulp isn't only for client side – Grajeda

Is there a linkable step-by-step on getting starting with gulp+babel6+node server and pg-promise? It looks like it might be a good way to go if I can locate comprehensible documentation on how to use them together. – Eozoic

Answer 4

@makeitsimple

Step: 1

npm install nodemon --save

In project directory

Step: 2

yarn add babel-cli

yarn add babel-preset-es2015

Step: 2 In package.json-> scipts change 'start' to the following

start: "nodemon src/server.js --exec babel-node --presets es2015"

Step: 3

yarn start

Moonshiner