How to use ES6 and ES7 in NodeJS/ExpressJS and deploy it.

For starters here is a basic file structure I have been using

├── package.json

├── readME.md

└── server

├── controllers

│ └── search

│ ├── search.game.controller.js

│ ├── search.genre.controller.js

│ └── search.platform.controller.js

├── helpers

│ └── search

│ ├── search.game.helper.js

│ ├── search.genre.helper.js

│ └── search.platform.helper.js

├── index.js

├── middlewares

│ └── application.js

├── models

│ └── search

│ ├── search.game.model.js

│ ├── search.genre.model.js

│ └── search.platform.model.js

├── routers

│ ├── api

│ │ └── search.router.js

│ └── database.router.js

└── server.js

Please note that for this example server.js and index.js are located under the folder server.

In this example I will explain how to build and deploy a node server using ES7: First assume that your server.js file contains the code that actually starts the server. Something like:

app.listen(app.get('port'), () => {
console.log('we are listening on ', app.get('port')
}

In server/server.js: Setting ports:

app.set(‘port’, process.env.PORT || 3000);

make sure you allow the server to use process.env.PORT OR <another port> . If you deploy you will not have the same port as your local port.

dependencies:

babel-register (this allows us to use the new module types such as ‘Import’ and ‘export default’)

babel-polyfill (this allows us to use built-ins like weak-map, Promise)

babel-preset-es-2015 (this will tell babel that we want to transpile into ES6)

babel-preset-stage-0 (this is Strawman, aka this allows you to use future javascript, this allows us to use ES7).

Typically when we run node servers, in our package.json we have something like this:

“start” : node server/server.js

However if we with to dynamically transpile and use ES7 features we must create a new file called index.js which will be the entry point for our application. This file will then require other necessary files. See here:

Index.js

const path = require(‘path’);
require('babel-register');
require('babel-polyfill;);
require(path.join(__dirname, ‘/server.js’))

I prefer to specify absolute paths with path.join instead of writing out the path in string literal form. This will allow me to ensure that when I deploy I will be able to grab the server.js file.
 
 Back to server/server.js:
 Make sure you handle the route GET (‘/’). This is the landing route when you first hit the website and it needs to be handled. You can do this simply:
 
 in server/server.js:

app.get(‘/’, (req, res) => {
res.sendFile(path.join(__dirname, ‘../’, ‘index.html’));
});

Here I simply served the index.html file when the request is a GET to ‘/’.
 
 Make a file called .babelrc. When babel runs it will look for its .rc file and use this to know what presets to use.

In .babelrc:

{
presets: [“es2015”, “stage-0”]
}

Just put your presets in an array with the key “presets”. 
 
 I prefer to use DOTENV as a configuration key hider.

npm install –save dotenv

Then make a file called .env
 Note: You usually can’t right click and make this file, try using `touch .env` in your terminal to create it.
 
 Inside .env you can set up your api keys and things like that.

.env:

ultimate_password = ‘MYPASSORD’
username = ‘MYUSERNAME’

Then when you want to use it, simply do

require(‘dotenv’).config();

You can do this in any .js file

For example:

require(‘dotenv’).config();
console.log(process.env.ultimate_password) // MYPASSWORD

Now you have to configure your heroku stuff. 
 go to heroku, find the settings tab and then click ‘reveal config vars’.

Then enter the configuration variables. These should be the same key values you used in your .env file.

Remember:
 key: ultimate_password
value: MYPASSWORD 
Keys on the left side, values on the right side. Don’t insert the term ‘key’ just insert ech item in the correct box.
If you want to install your dev dependencies in your heroku branch include

NPM_CONFIG_PRODUCTION                                       false

In your package.json, make sure you have your “main” specified.
EX:

“main”: index.js

Specify your starting point:

“start”: node server/index.js

type the following heroku commands. (Make sure you have heroku installed globally first).

heroku login

heroku create

git push heroku <yourbranch>:master

Then if you hit an error type “Heroku logs”

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.