Running jspm on Heroku in a Node.js Environment

While testing an Aurelia.js implementation on Heroku, I wanted to run pre-bundled files on the server instead of already bundled ones. This led me to try running jspm on Heroku.

It seems this will be improved once jspm reaches version 7.

This time, I'd like to introduce how to run scripts on Heroku, along with a solution to an error that occurs when installing a large number of jspm-related files from Git.

When Creating a Heroku Application

When creating a Heroku application, you can specify the buildpack that runs on Heroku. This time, I chose a buildpack that enables jspm to run.

(It's not clear if this is strictly necessary; simply having jspm in `package.json`'s `dependencies` might be enough.)

I found a buildpack that allows building jspm, gulp, and sass within Heroku, so I'm giving it a try.

Adding a Buildpack When Creating an Application

heroku create myappname --buildpack https://github.com/TimPetricola/heroku-buildpack-nodejs-jspm-gulp-sass.git

Adding a Buildpack to an Existing Application

heroku buildpacks:set https://github.com/TimPetricola/heroku-buildpack-nodejs-jspm-gulp-sass.git -a myappname

heroku create myappname --buildpack https://github.com/kudos/heroku-buildpack-nodejs-jspm.git

Configuring `package.json` for Heroku Builds

Heroku-side configurations can be managed by setting up `package.json`.

Specifying Actions After `npm install`

Add `postinstall` to the `scripts` section of `package.json`. In this case, `jspm install -y` is executed when pushing.

"scripts": {
    "start": "node app.js",
    "test": "gulp test",
    "e2e": "gulp serve webdriver-standalone e2e",
    "postinstall": "jspm install -y"
  }

Specifying Engines for the Build

You can specify the versions of engines to be used during the build process in the `engines` section.

"engines": {
    "node": "0.12.x",
    "npm": "3.5.x",
    "jspm": "0.16.x"
  }

Setting Up jspm's GitHub Config

GitHub rate limit reached. To increase the limit use GitHub authentication.
Run jspm endpoint config github to set this up.

⇒ Reference: https://gist.github.com/topheman/25241e48a1b4f91ec6d4

1. Log in to GitHub and Create a Token

⇒ https://github.com/settings/tokens

Personal settings > Personal access tokens

2. Find `JSPM_GITHUB_AUTH_TOKEN`

Find `JSPM_GITHUB_AUTH_TOKEN` to configure it in Heroku's jspm settings.

jspm registry config github

jspm registry export github

jspm config registries.github.remote https://github.jspm.io
jspm config registries.github.auth JSPM_GITHUB_AUTH_TOKEN
jspm config registries.github.maxRepoSize 100
jspm config registries.github.handler jspm-github

3. Register in Heroku Config

heroku login

jspm config registries.github.auth JSPM_GITHUB_AUTH_TOKEN

Register the value displayed in the `JSPM_GITHUB_AUTH_TOKEN` part (from above) into your Heroku config.

heroku config:set JSPM_GITHUB_AUTH_TOKEN=exportで吐き出されたTOKEN

4. Commit to Heroku!

Commit the `package.json` created earlier to Heroku. Also, modify `.gitignore` and other files as needed, and commit all necessary files for execution.

Since jspm-related files will be added on the Heroku side, you won't need to include the `jspm_packages` folder, etc.

Apparently, these capacity issues will no longer occur when jspm's version increases.