Cum să implementați aplicația pe web utilizând Express.js și Heroku

Dacă sunteți nou în lumea dezvoltării web, veți petrece mult timp învățând cum să creați site-uri statice cu HTML, CSS și JavaScript.

S-ar putea să începeți apoi să învățați cum să utilizați cadre populare precum React, VueJS sau Angular.

Dar după ce ați încercat câteva idei noi și ați rulat unele site-uri la nivel local, s-ar putea să vă întrebați cum să implementați site-ul sau aplicația dvs. Și după cum se dovedește, uneori poate fi dificil să știi de unde să începi.

Personal, consider că rularea unui server Express găzduit pe Heroku este una dintre cele mai simple modalități de a începe. Acest articol vă va arăta cum să faceți acest lucru.

Heroku este o platformă cloud care acceptă mai multe limbaje și cadre de programare diferite.

Aceasta nu este o postare sponsorizată - există desigur multe alte soluții disponibile, cum ar fi:

  • Oceanul digital
  • Servicii Web Amazon
  • Azur
  • Google Cloud Platform
  • Netlify
  • ZEIT Acum

Verificați-le pe toate și vedeți care se potrivește cel mai bine nevoilor dvs.

Personal, am găsit că Heroku este cel mai rapid și mai ușor de început să folosesc „out of the box”. Nivelul gratuit este oarecum limitat în ceea ce privește resursele. Cu toate acestea, îl pot recomanda cu încredere în scopuri de testare.

Acest exemplu va găzdui un site simplu folosind un server Express. Iată pașii la nivel înalt:

  1. Configurarea cu Heroku, Git, npm
  2. Creați un server Express.js
  3. Creați fișiere statice
  4. Distribuiți pe Heroku

Ar trebui să dureze aproximativ 25 de minute în total (sau mai mult dacă doriți să petreceți mai mult timp pe fișierele statice).

Acest articol presupune că știți deja:

  • Unele elemente de bază HTML, CSS și JavaScript
  • Utilizarea de bază a liniei de comandă
  • Git la nivel începător pentru controlul versiunii

Puteți găsi tot codul în acest depozit.

Configurare

Primul pas în orice proiect este să configurați toate instrumentele de care știți că veți avea nevoie.

Va trebui să aveți:

  • Nod și npm instalate pe computerul dvs. local (citiți cum să faceți acest lucru aici)
  • Git instalat (citiți acest ghid)
  • Heroku CLI instalat (iată cum se face)

1. Creați un director nou și inițializați un depozit Git

Din linia de comandă, creați un director de proiect nou și mutați-vă în el.

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

Acum vă aflați în folderul proiectului, inițializați un nou depozit Git.

⚠️ Acest pas este important deoarece Heroku se bazează pe Git pentru implementarea codului de pe mașina dvs. locală pe serverele sale cloud cloud️

$ git init

Ca ultim pas, puteți crea un fișier README.md pentru a edita într-o etapă ulterioară.

$ echo "Edit me later" > README.md

2. Conectați-vă la Heroku CLI și creați un nou proiect

Vă puteți conecta la Heroku folosind Heroku CLI (interfața liniei de comandă). Va trebui să aveți un cont Heroku gratuit pentru a face acest lucru.

Există două opțiuni aici. Implicit este ca Heroku să vă permită să vă conectați prin browserul web. Adăugarea -isteagului vă permite să vă conectați prin linia de comandă.

$ heroku login -i

Acum, puteți crea un nou proiect Heroku. L-am sunat pe al meu lorem-ipsum-demo.

$ heroku create lorem-ipsum-demo

Denumirea proiectului dvs.:

  • Heroku va genera un nume aleatoriu pentru proiectul dvs. dacă nu specificați unul în comandă.
  • Numele va face parte din adresa URL pe care o puteți utiliza pentru a accesa proiectul dvs., deci alegeți una care vă place.
  • Aceasta înseamnă, de asemenea, că trebuie să alegeți un nume de proiect unic pe care nimeni altcineva nu l-a folosit.
  • Este posibil să vă redenumiți proiectul mai târziu (așa că nu vă faceți griji prea mult pentru a obține numele perfect chiar acum).

3. Inițializați un nou proiect npm și instalați Express.js

Apoi, puteți inițializa un nou proiect npm prin crearea unui fișier package.json. Folosiți comanda de mai jos pentru a face acest lucru.

⚠️Acest pas este crucial. Heroku se bazează pe furnizarea unui fișier package.json pentru a ști că acesta este un proiect Node.js atunci când îți construiește aplicația ⚠️

$ npm init -y

Apoi, instalați Express. Express este un framework server utilizat pe scară largă pentru NodeJS.

$ npm install express --save

În cele din urmă, sunteți gata să începeți codarea!

Scrierea unui server Express simplu

Următorul pas este crearea unui fișier numit app.js, care rulează local un server Express.

$ touch app.js

Acest fișier va fi punctul de intrare pentru aplicație atunci când este gata. Asta înseamnă că singura comandă necesară pentru lansarea aplicației va fi:

$ node app.js

Dar mai întâi, trebuie să scrieți un cod în fișier.

4. Editați conținutul app.js

Deschideți app.jseditorul preferat. Scrieți codul de mai jos și faceți clic pe Salvați.

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

Comentariile ar trebui să ajute la indicarea a ceea ce se întâmplă. Dar hai să descompunem rapid codul pentru a-l înțelege mai departe:

  • 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.