Sådan distribueres din app til internettet ved hjælp af Express.js og Heroku

Hvis du er ny i verdenen af ​​webudvikling, bruger du meget tid på at lære at opbygge statiske websteder med HTML, CSS og JavaScript.

Du kan derefter begynde at lære at bruge populære rammer som React, VueJS eller Angular.

Men efter at have afprøvet et par nye ideer og kørt nogle websteder lokalt, spekulerer du måske på, hvordan du rent faktisk implementerer dit websted eller din app. Og som det viser sig, kan det nogle gange være svært at vide, hvor man skal starte.

Personligt finder jeg, at køre en Express-server hostet på Heroku, en af ​​de enkleste måder at komme i gang. Denne artikel viser dig, hvordan du gør dette.

Heroku er en skyplatform, der understøtter en række forskellige programmeringssprog og rammer.

Dette er ikke et sponsoreret indlæg - der er selvfølgelig mange andre løsninger tilgængelige, såsom:

  • Digital Ocean
  • Amazon Web Services
  • Azure
  • Google Cloud Platform
  • Netlify
  • ZEIT nu

Tjek dem alle sammen og se, hvilke der passer bedst til dine behov.

Personligt fandt jeg Heroku den hurtigste og nemmeste at begynde at bruge "out of the box". Det gratis niveau er noget begrænset med hensyn til ressourcer. Jeg kan dog med sikkerhed anbefale det til testformål.

Dette eksempel er vært for et simpelt websted ved hjælp af en Express-server. Her er trinene på højt niveau:

  1. Opsætning med Heroku, Git, npm
  2. Opret en Express.js-server
  3. Opret statiske filer
  4. Implementere til Heroku

Det tager i alt cirka 25 minutter (eller længere, hvis du vil bruge mere tid på de statiske filer).

Denne artikel antager, at du allerede ved:

  • Nogle grundlæggende HTML, CSS og JavaScript
  • Grundlæggende kommandolinjebrug
  • Begynder-niveau Git til versionskontrol

Du kan finde al koden i dette lager.

Sætte op

Det første skridt i ethvert projekt er at opsætte alle de værktøjer, du ved, du har brug for.

Du skal have:

  • Node og npm installeret på din lokale maskine (læs hvordan du gør dette her)
  • Git installeret (læs denne vejledning)
  • Heroku CLI installeret (her skal du gøre det)

1. Opret en ny mappe, og initialiser et Git-arkiv

Fra kommandolinjen skal du oprette en ny projektmappe og flytte ind i den.

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

Nu er du i projektmappen, initialiser et nyt Git-arkiv.

Step️ Dette trin er vigtigt, fordi Heroku er afhængig af Git til at implementere kode fra din lokale maskine til sine cloud-servere ⚠️

$ git init

Som et sidste trin kan du oprette en README.md-fil til redigering på et senere tidspunkt.

$ echo "Edit me later" > README.md

2. Log ind på Heroku CLI, og opret et nyt projekt

Du kan logge på Heroku ved hjælp af Heroku CLI (kommandolinjegrænseflade). Du bliver nødt til at have en gratis Heroku-konto for at gøre dette.

Der er to muligheder her. Standard er, at Heroku giver dig mulighed for at logge ind via webbrowseren. Tilføjelse af -iflag giver dig mulighed for at logge ind via kommandolinjen.

$ heroku login -i

Nu kan du oprette et nyt Heroku-projekt. Jeg ringede til mig lorem-ipsum-demo.

$ heroku create lorem-ipsum-demo

Navngivning af dit projekt:

  • Heroku genererer et tilfældigt navn til dit projekt, hvis du ikke angiver et i kommandoen.
  • Navnet udgør en del af den URL, du kan bruge til at få adgang til dit projekt, så vælg en, du kan lide.
  • Dette betyder også, at du skal vælge et unikt projektnavn, som ingen andre har brugt.
  • Det er muligt at omdøbe dit projekt senere (så bekymre dig ikke for meget om at få det perfekte navn lige nu).

3. Initialiser et nyt npm-projekt, og installer Express.js

Dernæst kan du initialisere et nyt npm-projekt ved at oprette en package.json-fil. Brug kommandoen nedenfor til at gøre dette.

Step️ Dette trin er afgørende. Heroku stoler på, at du leverer en package.json-fil for at vide, at dette er et Node.js-projekt, når det bygger din app ⚠️

$ npm init -y

Installer derefter Express. Express er en meget anvendt serverramme til NodeJS.

$ npm install express --save

Endelig er du klar til at starte kodning!

Skrivning af en simpel Express-server

Det næste trin er at oprette en fil kaldet app.js, der kører en Express-server lokalt.

$ touch app.js

Denne fil vil være startpunktet for appen, når den er klar. Det betyder, at den ene kommando, der er nødvendig for at starte appen, vil være:

$ node app.js

Men først skal du skrive noget kode i filen.

4. Rediger indholdet af app.js

Åbn app.jsi din yndlingseditor. Skriv koden vist nedenfor, og klik på Gem.

// 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..."));

Kommentarerne skal hjælpe med at indikere, hvad der sker. Men lad os hurtigt nedbryde koden for at forstå den yderligere:

  • 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.
  • Har dine statiske filer nogen fejl i dem? Kontroller dem ved at køre lokalt og se om der er nogen fejl.

Tak for læsningen - hvis du har nået det så langt, vil du måske tjekke den færdige version af demo-projektet.