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.

Ați putea începe apoi să învățați cum să utilizați cadre populare, cum ar fi Reacţiona, VueJS sau Unghiular.

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ă o serie de limbaje și cadre de programare diferite.

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

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 pentru 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:

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 pentru că Heroku se bazează pe Git pentru implementarea codului de pe mașina dvs. locală pe serverele sale 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ă). Pentru a face acest lucru, va trebui să aveți un cont Heroku gratuit.

Există două opțiuni aici. Implicit este ca Heroku să vă permită să vă conectați prin browserul web. Adăugarea -i flag 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 unic de proiect 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

Următorul, 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

Deschis app.js în editorul tău 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("<h1>Hello World!</h1>")
})

// 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:

  • Primele două linii necesită pur și simplu modulul Express și creează o instanță a unei aplicații Express.
  • Următoarea linie necesită utilizarea express.static middleware. Acest lucru vă permite să difuzați fișiere statice (cum ar fi HTML, CSS și JavaScript) din directorul specificat. În acest caz, fișierele vor fi trimise dintr-un folder numit public.
  • Următoarea linie folosește app.get() pentru a defini o rută URL. Orice solicitare URL către adresa URL rădăcină va fi răspunsă cu un mesaj HTML simplu.
  • Partea finală pornește serverul. Ori pare să vadă ce port va folosi Heroku sau va fi implicit la 3000 dacă rulați local.

⚠️Utilizarea process.env.PORT || 3000 în ultima linie este important pentru implementarea cu succes a aplicației ⚠️

Dacă salvați app.js și porniți serverul cu:

$ node app.js

Poți vizita localhost: 3000 în browser și vedeți singur serverul rulează.

Creați fișierele statice

Următorul pas este să vă creați fișierele statice. Acestea sunt fișierele HTML, CSS și JavaScript pe care le veți difuza ori de câte ori un utilizator vă vizită proiectul.

Amintiți-vă în app.js le-ai spus express.static middleware pentru a servi fișiere statice din public director.

Primul pas este desigur să creați un astfel de director și fișierele pe care le va conține.

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

5. Editați fișierul HTML

Deschis index.html în editorul de text preferat. Aceasta va fi structura de bază a paginii pe care o veți servi vizitatorilor dvs.

Exemplul de mai jos creează o pagină de destinație simplă pentru un Lorem Ipsum generator, dar puteți fi la fel de creativ pe cât doriți aici.

<!DOCTYPE html>
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<link href="https://fonts.googleapis.com/css?family=Alegreya|Source+Sans+Pro&display=swap" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<html>
<body>
<h1>Lorem Ipsum generator</h1>
  <p>How many paragraphs do you want to generate?</p>
  <input type="number" id="quantity" min="1" max="20" value="1">
  <button id="generate">Generate</button>
  <button id="copy">Copy!</button>
<div id="lorem">
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

6. Editați fișierul CSS

În continuare este editarea fișierului CSS styles.css. Asigurați-vă că acesta este conectat în fișierul dvs. HTML.

CSS de mai jos este pentru exemplul Lorem Ipsum. Dar, din nou, nu ezitați să fiți la fel de creativi pe cât doriți.

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. Editați fișierul JavaScript

În cele din urmă, vă recomandăm să editați fișierul JavaScript script.js. Acest lucru vă va permite să vă faceți pagina mai interactivă.

Codul de mai jos definește două funcții de bază pentru generatorul Lorem Ipsum. Da, am folosit JQuery – este rapid și ușor de lucrat.

$("#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("<p>"+data[i]+"</p>");
	}
})

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

Rețineți că aici, data lista este trunchiată pentru a ușura afișarea. În aplicația reală, este o listă mult mai lungă de paragrafe complete. Puteți vedea întregul fișier în repo sau puteți vedea aici pentru sursa originală.

Implementarea aplicației

După ce ați scris codul static și ați verificat că toate funcționează așa cum era de așteptat, vă puteți pregăti să le implementați pe Heroku.

Cu toate acestea, mai sunt câteva lucruri de făcut.

8. Creați un Procfile

Heroku va avea nevoie de un Procfile pentru a ști cum să ruleze aplicația.

Un Procfile este un „fișier de proces” care îi spune lui Heroku ce comandă să ruleze pentru a gestiona un proces dat. În acest caz, comanda îi va spune lui Heroku cum să pornească serverul dvs. ascultând pe web.

Utilizați comanda de mai jos pentru a crea fișierul.

⚠️ Acesta este un pas important, deoarece fără un Procfile, Heroku nu vă poate pune serverul online. ⚠️

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

Observați că Procfile nu are nicio extensie de fișier (de exemplu, “.txt”, “.json”).

De asemenea, vedeți cum funcționează comanda node app.js este același folosit local pentru a rula serverul.

9. Adăugați și trimiteți fișiere în Git

Amintiți-vă că ați inițiat un depozit Git la configurare. Poate că ați adăugat și comite fișiere pe măsură ce ați mers.

Înainte de a vă implementa pe Heroku, asigurați-vă că adăugați toate fișierele relevante și le comiteți.

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

Ultimul pas este să vă îndreptați către ramura principală Heroku.

$ git push heroku master

Ar trebui să vedeți linia de comandă tipărind o mulțime de informații pe măsură ce Heroku construiește și implementează aplicația dvs.

Linia de căutat este: Verifying deploy... done.

Acest lucru arată că construcția dvs. a avut succes.

Acum puteți deschide browserul și accesați-proiect-name.herokuapp.com. Aplicația dvs. va fi găzduită pe web pentru ca toți să o poată vizita!

Recapitulare rapidă

Mai jos sunt pașii de urmat pentru a implementa o aplicație simplă Express pe Heroku:

  1. Creați un director nou și inițializați un depozit Git
  2. Conectați-vă la Heroku CLI și creați un proiect nou
  3. Inițializați un nou proiect npm și instalați Express.js
  4. Editați conținutul aplicației.js
  5. Editați fișierele HTML statice, CSS și JavaScript
  6. Creați un Procfile
  7. Adăugați și angajați-vă în Git, apoi împingeți la filiala dvs. principală Heroku

Lucruri de verificat dacă aplicația dvs. nu funcționează

Uneori, în ciuda celor mai bune intenții, tutorialele de pe Internet nu funcționează exact așa cum v-ați așteptat.

Pașii de mai jos ar trebui să ajute la depanarea unor erori obișnuite pe care le-ați putea întâlni:

  • Ați inițializat o repo Git în folderul proiectului? Verifică dacă ai fugit git init mai devreme. Heroku se bazează pe Git pentru a implementa codul de pe mașina dvs. locală.
  • Ați creat un fișier package.json? Verifică dacă ai fugit npm init -y mai devreme. Heroku necesită un fișier package.json pentru a recunoaște că acesta este un proiect Node.js.
  • Serverul rulează? Asigurați-vă că Procfile dvs. utilizează numele fișierului corect pentru a porni serverul. Verifică dacă ai web: node app.js si nu web: node index.js.
  • Heroku știe pe ce port să asculte? Verificați dacă ați folosit app.listen(process.env.PORT || 3000) în fișierul dvs. app.js.
  • Fișierele dvs. statice au vreo eroare în ele? Verificați-le rulând local și observând dacă există erori.

Vă mulțumim pentru lectură – dacă ați reușit până aici, vă recomandăm verificați versiunea terminată a proiectului demo.