So stellen Sie Ihre App mit Express.js und Heroku im Web bereit

Wenn Sie neu in der Welt der Webentwicklung sind, werden Sie viel Zeit damit verbringen, zu lernen, wie statische Websites mit HTML, CSS und JavaScript erstellt werden.

Anschließend lernen Sie möglicherweise, wie Sie gängige Frameworks wie React, VueJS oder Angular verwenden.

Nachdem Sie einige neue Ideen ausprobiert und einige Websites lokal ausgeführt haben, fragen Sie sich möglicherweise, wie Sie Ihre Website oder App tatsächlich bereitstellen können. Und wie sich herausstellt, kann es manchmal schwierig sein zu wissen, wo man anfangen soll.

Ich persönlich finde es eine der einfachsten Möglichkeiten, einen auf Heroku gehosteten Express-Server zu betreiben. Dieser Artikel zeigt Ihnen, wie das geht.

Heroku ist eine Cloud-Plattform, die verschiedene Programmiersprachen und Frameworks unterstützt.

Dies ist kein gesponserter Beitrag - es gibt natürlich viele andere Lösungen, wie zum Beispiel:

  • Digitaler Ozean
  • Amazon Web Services
  • Azurblau
  • Google Cloud Platform
  • Netlify
  • ZEIT jetzt

Schauen Sie sich alle an und finden Sie heraus, welche Ihren Anforderungen am besten entspricht.

Persönlich fand ich Heroku am schnellsten und einfachsten, um "out of the box" zu verwenden. Die kostenlose Stufe ist in Bezug auf die Ressourcen etwas begrenzt. Ich kann es jedoch zu Testzwecken mit Zuversicht empfehlen.

In diesem Beispiel wird eine einfache Site mithilfe eines Express-Servers gehostet. Hier sind die allgemeinen Schritte:

  1. Einrichten mit Heroku, Git, npm
  2. Erstellen Sie einen Express.js-Server
  3. Erstellen Sie statische Dateien
  4. In Heroku bereitstellen

Insgesamt sollte es ungefähr 25 Minuten dauern (oder länger, wenn Sie mehr Zeit mit den statischen Dateien verbringen möchten).

Dieser Artikel setzt voraus, dass Sie bereits wissen:

  • Einige Grundlagen zu HTML, CSS und JavaScript
  • Grundlegende Verwendung der Befehlszeile
  • Git für Anfänger zur Versionskontrolle

Sie finden den gesamten Code in diesem Repository.

Einrichten

Der erste Schritt in einem Projekt besteht darin, alle Tools einzurichten, von denen Sie wissen, dass Sie sie benötigen.

Sie müssen haben:

  • Knoten und npm auf Ihrem lokalen Computer installiert (lesen Sie hier, wie das geht)
  • Git installiert (lesen Sie diese Anleitung)
  • Die Heroku-CLI wurde installiert (hier erfahren Sie, wie es geht)

1. Erstellen Sie ein neues Verzeichnis und initialisieren Sie ein Git-Repository

Erstellen Sie über die Befehlszeile ein neues Projektverzeichnis und verschieben Sie es.

$ mkdir lorem-ipsum-demo $ cd lorem-ipsum-demo

Jetzt, wo Sie sich im Projektordner befinden, initialisieren Sie ein neues Git-Repository.

"Dieser Schritt ist wichtig, da Heroku sich auf Git verlässt, um Code von Ihrem lokalen Computer auf seinen Cloud-Servern bereitzustellen."

$ git init

Als letzten Schritt können Sie eine README.md-Datei erstellen, die Sie zu einem späteren Zeitpunkt bearbeiten können.

$ echo "Edit me later" > README.md

2. Melden Sie sich bei der Heroku-CLI an und erstellen Sie ein neues Projekt

Sie können sich über die Heroku-CLI (Befehlszeilenschnittstelle) bei Heroku anmelden. Sie benötigen dazu ein kostenloses Heroku-Konto.

Hier gibt es zwei Möglichkeiten. Standardmäßig können Sie sich bei Heroku über den Webbrowser anmelden. Durch Hinzufügen des -iFlags können Sie sich über die Befehlszeile anmelden.

$ heroku login -i

Jetzt können Sie ein neues Heroku-Projekt erstellen. Ich habe meine angerufen lorem-ipsum-demo.

$ heroku create lorem-ipsum-demo

Benennen Sie Ihr Projekt:

  • Heroku generiert einen zufälligen Namen für Ihr Projekt, wenn Sie im Befehl keinen angeben.
  • Der Name ist Teil der URL, über die Sie auf Ihr Projekt zugreifen können. Wählen Sie also eine aus, die Ihnen gefällt.
  • Dies bedeutet auch, dass Sie einen eindeutigen Projektnamen auswählen müssen, den sonst niemand verwendet hat.
  • Es ist möglich, Ihr Projekt später umzubenennen (machen Sie sich also keine Sorgen, dass Sie jetzt den perfekten Namen erhalten).

3. Initialisieren Sie ein neues npm-Projekt und installieren Sie Express.js

Als Nächstes können Sie ein neues npm-Projekt initialisieren, indem Sie eine package.json-Datei erstellen. Verwenden Sie dazu den folgenden Befehl.

⚠️Dieser Schritt ist entscheidend. Heroku verlässt sich darauf, dass Sie eine package.json-Datei bereitstellen, um zu wissen, dass dies ein Node.js-Projekt ist, wenn es Ihre App erstellt ⚠️

$ npm init -y

Installieren Sie als Nächstes Express. Express ist ein weit verbreitetes Server-Framework für NodeJS.

$ npm install express --save

Endlich können Sie mit dem Codieren beginnen!

Schreiben eines einfachen Express-Servers

Der nächste Schritt besteht darin, eine Datei mit dem Namen zu erstellen app.js, auf der ein Express-Server lokal ausgeführt wird.

$ touch app.js

Diese Datei ist der Einstiegspunkt für die App, wenn sie fertig ist. Das heißt, der einzige Befehl, der zum Starten der App benötigt wird, lautet:

$ node app.js

Aber zuerst müssen Sie Code in die Datei schreiben.

4. Bearbeiten Sie den Inhalt von app.js.

Öffnen Sie app.jsin Ihrem Lieblingseditor. Schreiben Sie den unten gezeigten Code und klicken Sie auf Speichern.

// create an express app const express = require("express") const app = express() // use the express-static middleware app.use(express.static("public")) // define the first route app.get("/", function (req, res) { res.send("

Hello World!

") }) // start the server listening for requests app.listen(process.env.PORT || 3000, () => console.log("Server is running..."));

Die Kommentare sollen Aufschluss darüber geben, was gerade passiert. Aber lassen Sie uns den Code schnell aufschlüsseln, um ihn besser zu verstehen:

  • The first two lines simply require the Express module and create an instance of an Express app.
  • The next line requires the use of the express.static middleware. This lets you serve static files (such as HTML, CSS and JavaScript) from the directory you specify. In this case, the files will be served from a folder called public.
  • The next line uses app.get() to define a URL route. Any URL requests to the root URL will be responded to with a simple HTML message.
  • The final part starts the server. It either looks to see which port Heroku will use, or defaults to 3000 if you are running locally.

⚠️The use of process.env.PORT || 3000 in the last line is important for deploying your app successfully ⚠️

If you save app.js and start the server with:

$ node app.js

You can visit localhost:3000 in your browser and see for yourself the server is running.

Create your static files

The next step is to create your static files. These are the HTML, CSS and JavaScript files you will serve up whenever a user visits your project.

Remember in app.js you told the express.static middleware to serve static files from the public directory.

The first step is of course to create such a directory and the files it will contain.

$ mkdir public $ cd public $ touch index.html styles.css script.js

5. Edit the HTML file

Open index.html in your preferred text editor. This will be the basic structure of the page you will serve to your visitors.

The example below creates a simple landing page for a Lorem Ipsum generator, but you can be as creative as you like here.

Lorem Ipsum generator

How many paragraphs do you want to generate?

Generate Copy!

6. Edit the CSS file

Next up is editing the CSS file styles.css. Make sure this is linked in your HTML file.

The CSS below is for the Lorem Ipsum example. But again, feel free to be as creative as you want.

h1 { font-family: 'Alegreya' ; } body { font-family: 'Source Sans Pro' ; width: 50%; margin-left: 25%; text-align: justify; line-height: 1.7; font-size: 18px; } input { font-size: 18px; text-align: center; } button { font-size: 18px; color: #fff; } #generate { background-color: #09f; } #copy { background-color: #0c6; }

7. Edit the JavaScript file

Finally, you might want to edit the JavaScript file script.js. This will let you make your page more interactive.

The code below defines two basic functions for the Lorem Ipsum generator. Yes, I used JQuery - it's quick and easy to work with.

$("#generate").click(function(){ var lorem = $("#lorem"); lorem.html(""); var quantity = $("#quantity")[0].valueAsNumber; var data = ["Lorem ipsum", "quia dolor sit", "amet", "consectetur"]; for(var i = 0; i < quantity; i++){ lorem.append("

"+data[i]+"

"); } }) $("#copy").click(function() { var range = document.createRange(); range.selectNode($("#lorem")[0]); window.getSelection().removeAllRanges(); window.getSelection().addRange(range); document.execCommand("copy"); window.getSelection().removeAllRanges(); } )

Note that here, the data list is truncated to make it easier to show. In the actual app, it is a much longer list of full paragraphs. You can see the entire file in the repo, or look here for the original source.

Deploying your app

After writing your static code and checking it all works as expected, you can get ready to deploy to Heroku.

However, there are a couple more things to do.

8. Create a Procfile

Heroku will need a Procfile to know how to run your app.

A Procfile is a "process file" which tells Heroku which command to run in order to manage a given process. In this case, the command will tell Heroku how to start your server listening on the web.

Use the command below to create the file.

⚠️This is an important step, because without a Procfile, Heroku cannot put your server online. ⚠️

$ echo "web: node app.js" > Procfile

Notice that the Procfile has no file extension (e.g., ".txt", ".json").

Also, see how the command node app.js is the same one used locally to run your server.

9. Add and commit files to Git

Remember you initiated a Git repository when setting up. Perhaps you have been adding and committing files as you have gone.

Before you deploy to Heroku, make sure to add all the relevant files and commit them.

$ git add . $ git commit -m "ready to deploy"

The final step is to push to your Heroku master branch.

$ git push heroku master

You should see the command line print out a load of information as Heroku builds and deploys your app.

The line to look for is: Verifying deploy... done.

This shows that your build was successful.

Now you can open the browser and visit your-project-name.herokuapp.com. Your app will be hosted on the web for all to visit!

Quick recap

Below are the steps to follow to deploy a simple Express app to Heroku:

  1. Create a new directory and initialise a Git repository
  2. Login to the Heroku CLI and create a new project
  3. Initialise a new npm project and install Express.js
  4. Edit the contents of app.js
  5. Edit the static HTML, CSS and JavaScript files
  6. Create a Procfile
  7. Add and commit to Git, then push to your Heroku master branch

Things to check if your app is not working

Sometimes, despite best intentions, tutorials on the Internet don't work exactly as you expected.

The steps below should help debug some common errors you might encounter:

  • Did you initialise a Git repo in your project folder? Check if you ran git init earlier. Heroku relies on Git to deploy code from your local machine.
  • Did you create a package.json file? Check if you ran npm init -y earlier. Heroku requires a package.json file to recognise this is a Node.js project.
  • Is the server running? Make sure your Procfile uses the correct file name to start the server. Check you have web: node app.js and not web: node index.js.
  • Does Heroku know which port to listen on? Check you used app.listen(process.env.PORT || 3000) in your app.js file.
  • Do your static files have any errors in them? Check them by running locally and seeing if there are any bugs.

Thanks for reading - if you made it this far, you might want to checkout the finished version of the demo project.