LEKCJA 08b - EXPRESS (p) - Git i Heroku

ukryj menu

SPEC

aktualizacja: 2021-11-30 12:13:54

Ocena wybranych projektów w tym roku będzie przebiegać z użyciem GitHuba i Heroku

1. Git i Heroku

Git - Git to system kontroli wersji typu open source, który został uruchomiony przez Linusa Torvaldsa. Potrzebuje aplikacji klienckiej, pozwalająca na upload plików, w dzisiejszych zajęciach pokazana jest jej integracja z VSCode

GitHub - miejsce w sieci gdzie programiści przechowują swoje projekty i współpracują z innymi

Heroku - hosting aplikacji napisanych w wielu popularnych językach/platformach

2. pobierz najnowszą wersję git-a

https://git-scm.com/downloadkopiuj

i zainstaluj w domyślnej lokalizacji (next, next, next...)

3. załóż konto na GitHubie

rejestrujemy się na GitHubie

https://github.com/kopiuj

4. załóż konto na hostingu Heroku

rejestrujemy się na Heroku
podajemy informację jakiego typu projekty będziemy tworzyć

https://www.heroku.com/kopiuj

i pozostajemy zalogowani do dalszej pracy

5. VSCode - testowy projekt

VSCode obsługuje Git-a bez żadnych dodatków, w menu po lewej stronie: Source Control

- Utwórz nowy folder na projekt node
- Dodaj plik server.js, a w nim poniższą zawartość:

var express = require("express")
var app = express()
var PORT = process.env.PORT || 3000; // bardzo istotna linijka - port zostaje przydzielony przez Heroku

app.get("/", function (req, res) {
    res.send("<h1>first app on heroku!</h1>")
})

app.listen(PORT, function () {
    console.log("start serwera na porcie " + PORT)
})kopiuj

- Za pomocą polecenia npm init utwórz w głównym katalogu aplikacji plik package.json

Plik ten potrzebny będzie podczas deployu aplikacji na hosting Heroku,
aby hosting wiedział jaki typ aplikacji ma uruchamiać, jakie moduły dodatkowe pobrać (Express)
NIE będziemy wysyłać zawartości katalogu node_modules na Githuba, a potem Heroku.
Heroku samodzielnie pobierze odpowiednie moduły na podstawie pliku package.json

plik powinien wyglądać mniej więcej tak i zawierać informacje w węźle dependencies o wszystkich użytych modułach:

{
"name": "testgithubheroku01",
"version": "1.0.0",
"description": "test999",
"main": "server.js",
"dependencies": {
    "express": "^4.17.1"
},
"devDependencies": {},
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
},
"author": "",
"license": "ISC"
}
kopiuj

6. upload aplikacji na Githuba

wchodzimy do

VSCode / Source Control / Publish to Githubkopiuj

w pasku wyszukiwania u góry VSCode podajemy nazwę nowego repozytorium na Githubie (nie wcześniej istniejącego)

program poprosi o zalogowanie w przeglądarce i przyznanie uprawnień do GitHuba dla VSCode

określamy jakie pliki mają być wysłane do repozytorium: zaznaczamy tylko:

server.jskopiuj

package.jsonkopiuj

BEZ node_modules

następuje upload do GitHuba a na koniec

logujemy sią na swoje konto na Githubie i sprawdzamy czy są nasze pliki

7. integracja heroku z githubem

- tworzymy projekt na heroku, o nazwie ImieNazwiskoGrupa, np JanKowalski3ia1
- pracujemy w zakładce deploy
- wybieramy integrację z projektem githuba
- oraz manualny deploy z githuba do heroku

jeśli nasz projekt działa lokalnie, będzie też działał na Heroku

8. funkcje gita w VSC

VSCode / Source Controlkopiuj

+ (dany plik jest brany pod uwagę przez git-a - są śledzone zmiany w nim)

commit (wysłanie do lokalnego repozytorium gita na naszym komputerze)

remote/ add remote - utworzenie linka do zdalnego repozytorium githuba

push to - wysłanie do odpowiedniego wcześniej nazwanego repozytorium na githubie

w razie problemów z pierwszym uploadem projektu, w terminalu:

git pull <remote> <branch> --rebasekopiuj