Als webontwikkelaar geeft niets meer voldoening dan in staat zijn om je werk aan het woord te laten zien (en te laten zien). Niet alleen door de afbeeldingen of video's op Twitter, maar laat ze er ook echt mee communiceren - vooral als je aan een aantal coole zijprojecten werkt of solliciteert naar een functie.

En gelukkig is het delen van uw werk nu bij alle cloudproviders een must en een basisstap op uw reis.

In deze demo zullen we bekijken hoe je je coole NodeJS-app kunt implementeren op Heroku. Aan het einde van deze demo hebben we een standaard Hello World-app die draait op een openbaar domein waartoe iedereen toegang heeft.

Voor deze demo ga ik ervan uit dat u Node op uw computer heeft geïnstalleerd. Als dit niet het geval is, kunt u downloaden vanaf de Nodejs.org-website. De stappen zijn eenvoudig en kunnen gemakkelijk online worden gevonden.

Je hebt ook een GitHub-account nodig om onze code online te hosten. Als je geen account hebt, kun je er gratis een aanmaken op Github.com. Met een gratis account kunt u onbeperkte openbare repositories maken. We zullen het Git-versiebeheersysteem gebruiken om onze wijzigingen naar Github te pushen

STAP 1: Maak die coole app

Laten we nu die Cool Node-app maken waar je aan hebt gedacht.

Maak een map op uw lokale computer en geef deze een naam (naar keuze), bijvoorbeeld MyCoolApp.

Voeg een bestand toe met de naam package.json en plak de onderstaande inhoud. Dit bestand is basisinformatie van ons pakket. (Dit kan ook worden gemaakt door het commando npm init te typen en alle standaardinstellingen te accepteren.)

{ "name": "coolnodeapp", "version": "1.0.0", "description": "node app ", "main": "app.js", "scripts": { "start": "node app.js" }, "repository": { "type": "git", "url": "" }, "author": "", "license": "ISC", "bugs": { "url": "" }, "homepage": "" }

Een zeer belangrijke verandering om op te merken is deze regel:

"start": "node app.js"

Na de implementatie voert Heroku deze opdracht uit om uw applicatie te starten.

Voeg een bestand toe, app.js, en plak de onderstaande code. Dit wordt het startpunt van onze app.

const http = require('http'); const port = process.env.PORT || 3000 const server = http.createServer((req, res) => { res.statusCode = 200; res.setHeader('Content-Type', 'text/html'); res.end('
Hello World
'); }); server.listen(port,() => { console.log(`Server running at port `+port); });

Deze code opent in feite een poort op de lokale server en levert wat HTML.

Let hier op het belangrijkste codeblok:

const port = process.env.PORT || 3000

Dit is uiterst belangrijk wanneer u uw applicatie in de cloud wilt implementeren. De applicatieserver wordt gestart op een willekeurige poort in de cloud. Als u een poortnummer hard codeert, zoals in alle Aan de slag-handleidingen, en u implementeert in de cloud, is het specifieke poortnummer mogelijk niet beschikbaar. De applicatie zal nooit starten. Het is dus beter om het poortnummer te krijgen dat is toegewezen door de cloudinstantie en de HTTP-server te starten.

Sla het bestand op en voer de onderstaande opdracht uit in het opdrachtpromptvenster (dat is geopend in de map):

node app.js

Hiermee start Node de server en toont het onderstaande bericht:

Als we nu // localhost: 3000 / in de browser openen, zullen we dit zien:

Stoer! We hebben zojuist een eenvoudige NodeJs-app gemaakt.

STAP 2: Push naar GitHub

Nu willen we onze code uploaden naar GitHub. Op deze manier kunnen we onze code vanaf elke locatie bewerken en de doorgevoerde wijzigingen direct in de cloud implementeren.

Laten we een repository op GitHub maken door op New Repository te klikken.

Geef het een naam, een beschrijving, en klik op Opslagplaats maken:

GitHub maakt een repository en geeft je een aantal opdrachten die je lokaal kunt uitvoeren, zodat je je lokale map kunt klonen met je GitHub-repository.

Voer in de opdrachtprompt onderstaande opdrachten in deze volgorde uit.

1. Initialiseer de Git-repository op rootniveau:

git init

2. Voeg alle bestanden toe aan je lokale Git (staging). Let op de laatste punt:

git add . 

3. Leg je wijzigingen vast in je lokale Git:

git commit -m “first commit”

4. Link naar je GitHub-repository. (Wijzig de URL zodat deze naar uw repository verwijst.)

git remote add origin //github.com/rramname/MyCoolNodeApp.git

5. En push uw verandering:

git push — set-upstream origin master

U zou berichten zoals hieronder moeten zien bij de opdrachtpromp.

Als je nu GitHub opent en de repository vernieuwt, zou je de code moeten kunnen zien.

STAP 3: Implementeer in Heroku

Nu komt het plezier, de reden waarom je dit allemaal hebt overleefd: implementatie.

Als je geen account bij Heroku hebt, kun je een gratis account openen door dit eenvoudige formulier in te vullen. (En hier hoeft u geen creditcardgegevens op te geven :))

Zodra u uw account gereed heeft, logt u in met uw inloggegevens.

Klik op Nieuw in de rechterbovenhoek en selecteer "Nieuwe app maken".

Geef uw app een naam (deze wordt opgenomen in de openbare URL van uw app) en klik op App maken.

This step will take you to the dashboard of your app. Open Deploy tab and scroll to the “Deployment method” section.

Select GitHub as the method.

It will show a “Connect to GitHub” option where we can provide our GitHub repository. If you are doing it for the first time, Heroku will ask permission to access your GitHub account.

Here, you can search for your GitHub repository and click connect:

If it’s able to find and connect to the GitHub repository, the Deployment section will show up where you can select if you want Automatic Deployment (as soon as the changes are pushed to GitHub, Heroku will pick them up and deploy) or Manual Deployment.

Click Enable Automatic Deploys (because it’s less overhead for demo apps :) ). You can also select the GitHub branch if you need to, but for this demo we will deploy from the master branch.

Now we need to tell Heroku that our app is a NodeJs app. For that, we will need the NodeJs build back.

Open the Settings tab and locate Buildpacks and click “Add buildpack”.

Select nodejs from the options and click Save changes.

Now, go back to the Deploy tab, and click Deploy Branch at the bottom.

Heroku will take the code and host it. Open the Activity tab and there you can see the progress:

And that’s it!

Open the settings tab and scroll down to the Domains and certificates section. Here, you can see the URL of your app that was just deployed. Copy and paste that URL in the browser and… Hoooorah!!

We just created our own web application that can be accessed over the internet.

Great!

Please go ahead and share with others!

Happy Hosting :)