The script doesn't work after deploying a javascript app to heroku

Question

I created a simple javascript app with mojs, an animation library, and wanted to deploy it to heroku. First, I tried to "heroku create" etc and deploy the original app to heroku - the app was accessible, but the script didn't work. Second, I tried to change an app that I made following the Node.js tutorial from heroku website, by inserting a script bootstrap tag

   <script src="http://cdn.jsdelivr.net/mojs/latest/mo.min.js"></script>
   <script src="myburstscript.js"></script>

copying the script I made to the folder of this app

var myBurst = new mojs.Burst({

    count:10, 
    radius: {0 :150},
    angle: {0 : 180},
    children : {
      //fill:{'red' : 'blue'},
      fill: ['red', 'purple', 'blue', 'violet'],
      duration : 1000, 
      radius: 10,
      shape: 'polygon',
      delay: 'stagger(50)'
}

});

document.addEventListener('click', function(e) {
   myBurst.replay();

 });

then running "npm install mojs", and, as usual,

 git add .
 git commit -m "somedumbsh*t"
 git push heroku master

But it didn't play the animation it plays on my localhost. Logs show no errors. The rest, the html part of the page, works fine. Why?

Answer 1

Heroku needs some server, not only the client-side code.

If you cannot start your app with:

PORT=4446 npm start

and then access it on:

• http://localhost:4446/

then you won't be able to host it on Heroku. (I'm assuming that you're using Node as indicated by the tags in your question.) It's important that your app needs to actually use the port number provided in the PORT environment variable, not just a hardcoded port number.

For example if you put all your static files (HTML, client-site JavaScript, CSS, images etc.) in a directory called html then you can use a simple server like this, e.g. called server.js:

'use strict';

const path = require('path');
const express = require('express');

const app = express();

const port = process.env.PORT || 3338;

app.use('/', express.static(path.join(__dirname, 'html')));

app.listen(port, () => console.log(`Listening on http://localhost:${port}/`));

Example package.json:

{
  "name": "your-name",
  "version": "0.0.0",
  "description": "Your description",
  "scripts": {
    "start": "node server.js",
  },
  "author": "Your details",
  "license": "MIT",
  "dependencies": {
    "express": "^4.15.2",
  }
}

See also this example that I posted on GitHub for a complete solution that even has a Deploy to Heroku button:

• https://github.com/rsp/node-live-color

It is an example that was created for this answer:

• Getting data from/writing data to localhost with Express

where you can find more details on why it was written like that.