Das Skript funktioniert nicht nach der Bereitstellung einer Javascript-App auf Heroku

Question

Ich erstellte eine einfache Javascript-App mit mojs, eine Animationsbibliothek, und wollte es auf Heroku bereitstellen. Zuerst habe ich versucht, "heroku create" usw. zu erstellen und die originale App auf heroku zu installieren - die App war zugänglich, aber das Skript hat nicht funktioniert. Zweitens habe ich versucht, eine App zu ändern, die ich von Heroku Website nach dem Node.js Tutorial gemacht, von

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

Kopieren Sie das Skript ein Skript Bootstrap-Tag eingefügt ich in den Ordner dieser App gemacht

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(); 

}); 

dann läuft „npm Mojš installieren“, und, wie üblich,

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

Aber es spielte nicht die Animation auf meinem localhost spielt. Protokolle zeigen keine Fehler. Der Rest, der HTML-Teil der Seite, funktioniert gut. Warum?

Answer 1

Heroku benötigt einige Server, nicht nur den clientseitigen Code.

Wenn Sie Ihre App nicht mit starten:

PORT=4446 npm start 

und dann auf Zugang:

• http://localhost:4446/

dann werden Sie nicht in der Lage sein, es auf Heroku Gastgeber . (Ich nehme an, dass Sie Node verwenden, wie durch die Tags in Ihrer Frage angezeigt.) Es ist wichtig, dass Ihre App die in der Umgebungsvariable PORT angegebene Portnummer und nicht nur eine fest codierte Portnummer verwendet.

Zum Beispiel, wenn Sie alle Ihre statischen Dateien (HTML, Client-Site-JavaScript, CSS, Bilder usw.) in ein Verzeichnis namens html, dann können Sie einen einfachen Server wie diese, z. genannt 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}/`)); 

Beispiel 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", 
    } 
} 

Siehe auch dieses Beispiel, dass ich für eine Komplettlösung auf GitHub veröffentlicht, die sogar eine Deploy Heroku-Taste hat:

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

Es ist ein Beispiel, das für diese Antwort erstellt wurde:

• Getting data from/writing data to localhost with Express

, wo Sie weitere Informationen darüber, warum es geschrieben wurde, so finden.