Kā izvietot savu lietotni tīmeklī, izmantojot Express.js un Heroku

Ja esat jauns tīmekļa attīstības pasaulē, jūs pavadīsit daudz laika, mācoties veidot statiskas vietnes ar HTML, CSS un JavaScript.

Pēc tam jūs varat sākt mācīties, kā izmantot populārus ietvarus, piemēram, React, VueJS vai Angular.

Bet pēc dažu jaunu ideju izmēģināšanas un dažu vietņu palaišanas jūs varētu domāt, kā faktiski izvietot savu vietni vai lietotni. Un, kā izrādās, dažreiz var būt grūti uzzināt, ar ko sākt.

Personīgi es uzskatu, ka Heroku mitināta Express servera palaišana ir viens no vienkāršākajiem veidiem, kā sākt darbu. Šis raksts jums parādīs, kā to izdarīt.

Heroku ir mākoņu platforma, kas atbalsta vairākas dažādas programmēšanas valodas un ietvarus.

Šis nav sponsorēts ziņojums - protams, ir pieejami daudzi citi risinājumi, piemēram:

  • Digitālais okeāns
  • Amazon tīmekļa pakalpojumi
  • Azura
  • Google Cloud Platform
  • Netlify
  • ZEIT tagad

Pārbaudiet tos visus un noskaidrojiet, kas vislabāk atbilst jūsu vajadzībām.

Personīgi es atradu Heroku visātrāk un vienkāršāk sākt lietot “ārpus kastes”. Brīvais līmenis ir nedaudz ierobežots resursu ziņā. Tomēr es to droši varu ieteikt testēšanas vajadzībām.

Šajā piemērā tiks mitināta vienkārša vietne, izmantojot Express serveri. Šeit ir augsta līmeņa darbības:

  1. Iestatīšana ar Heroku, Git, npm
  2. Izveidojiet Express.js serveri
  3. Izveidojiet statiskus failus
  4. Izvietot uz Heroku

Kopumā vajadzētu aizņemt apmēram 25 minūtes (vai ilgāk, ja vēlaties vairāk laika veltīt statiskajiem failiem).

Šajā rakstā tiek pieņemts, ka jūs jau zināt:

  • Daži HTML, CSS un JavaScript pamati
  • Pamata komandrindas lietošana
  • Iesācēja līmeņa Git versiju kontrolei

Šajā repozitorijā varat atrast visu kodu.

Uzstādīt

Pirmais solis jebkurā projektā ir visu nepieciešamo rīku iestatīšana.

Jums būs nepieciešams:

  • Vietējais mašīnā instalētais mezgls un npm (lasiet šeit, kā to izdarīt
  • Git ir instalēts (izlasiet šo rokasgrāmatu)
  • Instalēts Heroku CLI (kā to izdarīt)

1. Izveidojiet jaunu direktoriju un inicializējiet Git repozitoriju

No komandrindas izveidojiet jaunu projekta direktoriju un pārejiet tajā.

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

Tagad jūs atrodaties projekta mapē, inicializējiet jaunu Git repozitoriju.

Step️Šis solis ir svarīgs, jo Heroku paļaujas uz Git, lai izvietotu kodu no jūsu vietējās mašīnas uz tā mākoņa serveriem ⚠️

$ git init

Kā pēdējo darbību varat izveidot failu README.md, kuru rediģēt vēlāk.

$ echo "Edit me later" > README.md

2. Piesakieties Heroku CLI un izveidojiet jaunu projektu

Varat pieteikties Heroku, izmantojot Heroku CLI (komandrindas saskarni). Lai to izdarītu, jums būs nepieciešams bezmaksas Heroku konts.

Šeit ir divas iespējas. Pēc noklusējuma Heroku ļauj jums pieteikties, izmantojot tīmekļa pārlūkprogrammu. Pievienojot -ikarodziņu, varat pieteikties, izmantojot komandrindu.

$ heroku login -i

Tagad jūs varat izveidot jaunu Heroku projektu. Es piezvanīju savējiem lorem-ipsum-demo.

$ heroku create lorem-ipsum-demo

Projekta nosaukšana:

  • Heroku ģenerēs jūsu projektam nejaušu nosaukumu, ja komandā to nenorādīsit.
  • Nosaukums būs tā URL daļa, kuru varat izmantot, lai piekļūtu savam projektam, tāpēc izvēlieties sev tīkamu.
  • Tas nozīmē arī to, ka jums jāizvēlas unikāls projekta nosaukums, kuru neviens cits nav izmantojis.
  • Vēlāk ir iespējams pārdēvēt savu projektu (tāpēc neuztraucieties par to, ka šobrīd iegūstat perfektu vārdu).

3. Inicializējiet jaunu npm projektu un instalējiet Express.js

Pēc tam jūs varat inicializēt jaunu npm projektu, izveidojot failu package.json. Lai to izdarītu, izmantojiet zemāk esošo komandu.

⚠️Šim solim ir izšķiroša nozīme. Heroku paļaujas uz to, ka jūs iesniedzat failu package.json, lai uzzinātu, ka šis ir Node.js projekts, kad tas izveido jūsu lietotni ⚠️

$ npm init -y

Pēc tam instalējiet Express. Express ir plaši izmantots NodeJS servera ietvars.

$ npm install express --save

Visbeidzot, jūs esat gatavs sākt kodēšanu!

Vienkārša Express servera rakstīšana

Nākamais solis ir izveidot failu ar nosaukumu app.js, kas palaiž Express serveri lokāli.

$ touch app.js

Šis fails būs ieejas punkts lietotnei, kad tā būs gatava. Tas nozīmē, ka komanda, kas nepieciešama lietotnes palaišanai, būs:

$ node app.js

Bet vispirms failā ir jāieraksta kods.

4. Rediģējiet app.js saturu

Atveriet app.jssavā iecienītajā redaktorā. Uzrakstiet zemāk redzamo kodu un noklikšķiniet uz Saglabāt.

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

Komentāriem vajadzētu palīdzēt norādīt, kas notiek. Bet ātri sadalīsim kodu, lai to saprastu tālāk:

  • 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.
  • Vai jūsu statiskajos failos ir kļūdas? Pārbaudiet tos, palaižot lokāli un pārbaudot, vai nav kļūdu.

Paldies, ka lasījāt - ja jūs to izdarījāt tik tālu, iespējams, vēlēsities norēķināties ar demo projekta gatavo versiju.