86 Followers
·
Follow

How to Deploy ES6 Node.js & Express back-end to Heroku

Hello there! Today, I want to talk about how to deploy a Node.js & Express back-end application onto Heroku, specifically applications written in ES6 syntax and requires a babel transpiler.

Before I begin, I wanted to add that this blog post is inspired by the references I provide at the end. Please read them if you have the time to learn more about these topics!

Now, if you stumble upon this post, you might be one of those who writes their Node.js back-end with statements like import express from 'express'; versus var express = require('express');. I am one of those, so I struggled to figure out how to take my practices from development to deployment!

Why can’t you deploy it as is?

Given ES6 syntax, you need to compile your code with babel. This is done through the use of npm packages you install as a development dependency. Typically, I use the babel-cli package along with babel-preset-env to achieve this on the development end. This allows me to begin the Node.js application by setting my npm start as such "npm start": "babel-node index.js" Ultimately, this will allow my application to begin by calling babel-node compiler instead of the node compiler.

However, the challenge is the fact that babel-node is meant solely for development, and is strongly discouraged to use for deployment/production. So how do we get around this problem!?

The Solution

To come around this problem, we essentially have to compile our build, instead of compiling our source files. To do this, we create our build by using npm run build. Ideally, this command should create a build folder using babel transpiler. With this build, we can compile using ./build/index.js instead of index.js above.

This might sound confusing, but this is the short version of the solution. However, I will walk you through an example from start to finish to demystify the idea as a whole!

Let’s begin the example

First, you need to start a Node.js project. Create an empty directory, and initialize the project as a Node project. The code below is performed on the command line.

$ mkdir node-example
$ cd node-example
$ npm init -y // You can use yarn instead of npm

Now let’s install your package dependencies necessary for this project. We will need the express, babel-cli and babel-preset-env packages. Babel-core is to access the babel command and babel-preset-env accesses the latest babel environment. Learn more here.

$ npm install --save express babel-preset-env
$ npm install --save-dev babel-cli

To use the default configurations of babel-preset-env, we create a .babelrc file that contains:

{
"presets": ["env"]
}

You can add more to this file to configure babel-preset-env further, but this will give the default effects.

Now that we have all the packages we need, let’s begin writing our application. I created a src directory inside the project folder and created an index.js file. In the index.js file I wrote:

import express from 'express';const app = express();app.get('/', (req, res) => {
res.status(200).json({ message: Welcome to Node.js & Express });
});
app.listen(process.env.PORT || 3000, () => console.log("Listening to port 3000");

Now if you used babel-node ./src/index.js command as your npm start, this should work fine and you should be able to view the json response on http://localhost:3000. This will ensure your Express app itself does not have any issues.

Moving on, let’s create some scripts that will transpile our ES6 code with babel. Let’s begin with making our build. In your package.json file, please start editing your "scripts" object with the code below. First, we will start off with creating a new build directory with the command npm run clean.

"clean": "rm -rf build && mkdir build",

Then we want to build our build directory. With this command, we need our index.js file to be inside the src directory for debugging purposes.

"build-babel": "babel -d ./build ./src -s",

Finally, we will have our build and start commands.

"build": "npm run clean && npm run build-babel",
"start": "npm run build && node ./build/index.js"

Now let’s move onto Heroku

This will assume that you know how to use Heroku and have the Heroku CLI installed. If you don’t, please install it now. It will need the latest version of Node!

Now this is where my mind is kind of blown by how much work was done above, just to realize you need the babel command inside the build as well. This means, we need to have babel-cli either as a dependency, or to deploy the application on Heroku using the configuration heroku config:set NPM_CONFIG_PRODUCTION=false in order to install babel-cli for the deployment project.

This might essentially mean that all of the nonsense above is useless if we’re essentially still using babel-cli to compile our code. However, we still are not using babel-node, which is the key lesson here.

Continuing with Heroku. On the command line, you want to create a local git repository with your project, and create a Heroku application.

$ git init .
$ echo node_modules > .gitignore
$ git add .
$ git commit -m "Initial commit"
// I noticed you might want to add build to the .gitignore as well
$ heroku create
// This should successfully create a random application with your
// heroku account. AKA you should logged in Heroku!

Now, you want to add this new heroku application/repository as a remote repository for your local repository that you just initialized.

$ git remote add heroku:${git url that you received from heroku create}
// An example git heroku url: https://git.heroku.com/dug-tor-14637.git

Now after this, you have your remote repository for Heroku set up. You can now push your application (deploy it!) onto Heroku!

$ git push heroku master

If you followed all of the steps above, this should successfully deploy a Heroku application, and give you the link to the application. If you go to the application, you will just see a json response (if you created the same express app as I did). However, it works!

Here are some resources I used to figure all of this out:

I hope you have a great day! Thank you for reading.

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store