Running BabelJS/ES2015 Apps in Azure App Service

BabelJS is a really cool in-line transpiler. You can use it as a ‘require-hook’ to make your Node.js apps use the full ES6 syntax without the v8 javascript interpreter issues around ES6 support. For instance, I have a server.js file that looks like this:


My app.js file contains regular ES6 code, like this:

import express from 'express';
import process from 'process';
import staticFiles from 'serve-static';

let app = express();
app.use(staticFiles('public', { index: 'index.html' }));
app.listen(process.env.PORT || 3000);

I’ve also got a public directory and an index.html file inside the public directory for display. Finally, I need a .babelrc file:

    "presets": [ "es2015" ]

Assuming I’ve installed all the right packages:

npm install --save babel-register babel-preset-es2015 express serve-static

This will run and I’ll be able to browse to http://localhost:3000 and get my index page. It just works. Which is a great thing. Now, let’s transfer it up to the cloud. Azure App Service to be precise.

To do this, I logged onto the Azure Portal, created a new Web App and set up Continuous Deployment to read my site from the GitHub repository. When it deployed, I got a successful deployment. However, when I browsed to my site, I got a failure. The failure in the logs was this:

Mon Dec 28 2015 22:36:55 GMT+0000 (Coordinated Universal Time): Unaught exception: Error: ENOENT: no such file or directory, open 'D:\local\UserProfile\.babel.json'
    at Error (native)
    at Object.fs.openSync (fs.js:584:18)
    at Object.fs.writeFileSync (fs.js:1224:33)
    at save (D:\home\site\wwwroot\node_modules\babel-register\lib\cache.js:45:19)
    at nextTickCallbackWith0Args (node.js:433:9)
    at process._tickCallback (node.js:362:13)
    at Function.Module.runMain (module.js:432:11)
    at startup (node.js:141:18)
    at node.js:980:3

I don’t even have this .babel.json file, so what’s wrong? By default, BabelJS will save a cache file in your user profile. This is fine if you are running in the context of a user account – user accounts generally have a home directory or user profile.

BabelJS saves the JSON Cache in the following places:

  • HOME

You can also set BABEL_DISABLE_CACHE=1 to disable the generation of this file. Since the existence of this file improves startup times (and Azure does restart your site from time to time), you probably want to keep the file.

These are all environment variables. In Azure, USERPROFILE points to a directory that does not exist – there is no user in Azure. My opinion is that it should point to the temporary directory or not be set. Azure has a temporary directory at D:\local\Temp. We can force BabelJS to write to the temporary directory by specify an App Setting. To do this:

  1. Log onto the Azure Portal and select your Web App.
  2. Click on Settings, then Application Settings (under GENERAL).
  3. Scroll down to the bottom of the App settings section.
  4. In an empty box, for key, enter BABEL_CACHE_PATH and for value, enter D:\local\Temp\babel.json
  5. Click on Save.

You application may need a restart. Once restarted, browse to your site again and see it work properly. With this app setting, your site will work for both local development and within the Azure cloud.