Kun tehdään FullStack tyyppistä web-app kehitystä, käytetään paljon GitHub:ia lähdekoodien tallennuspaikkana. Yleensä projektit tallennetaan Github:iin talteen omiksi “repoiksi” eli repositoryiksi. Repositoryt voivat olla joko “Privaatteja” eli yksityisiä, tai “Public” eli julkisia, kaikkien muidenkin kehittäjien luettavissa. Itse voi päättää, mitä repositoryjä haluaa julkaista muille. Yleensä koodia kehitetäänkin ensin “Privatena”. Sitten voi myöhemmin päättää julkaista sen, jotta saa muilta kehittäjiltä kommentteja ja kehitysideoita.
Cyclic.sh on pilvipalvelu, jonka avulla voi julkaista, FullStack sovelluksen suoraan Github-repository:stä nettiin tarjolle toimivana applikaationa. Tämä on kätevää, esimerkiksi kun tehdään web-kehitystä. Saa nopeasti “palvelun pystyyn” ja testattavaksi.
Luodaan Githubiin uusi repo, jonne voidaan laittaa esimerkisi meidän Node.js, Express ja MongoDB-sovellus, Todo-app. Yksinkertainen tehtävälista web-applikaatio.
GitHub Desktop on näppärä apuväline ohjelma, omalle koneelle. Jolla voi helposti yhdistää oman koneen Github:iin ja luoda repoja ja siirtää sinne tiedostoja. (Commit ja Push)
Luodaan uusi repositorio:
“Show in Explorer” avaa juuri luodun repository:n, oman koneen kansion esille.
Kirjoittamalla cmd ja painamalla Enter osoiterivillä, voidaan avata komentokehote kyseiseen kansioon. Ja kirjoittamalla code . ja painamalla Enter, voidaan avata Visual Studio Code helposti samaan kansioon auki.
Huomataan, että GitHub Desktop loi meille automaattisesti LICENSE ja README.md tiedostot. Näitä voidaan lähteä nyt editoimaan, ja luomaan myös uusia tiedostoja. Kehittämään uutta Web-sovellusta, Visual Studio Code editorilla.
Ensin meidän kannattaa luoda “.gitignore” tiedosto, jossa voidaan määrittää, tiedostot joita ei kannata GitHub:iin siirtää. Esimerkiksi, kannattaa laittaa “/node_modules” rivi, jotta näitä ei kopioida.
Seuraavaksi luodaan “index.js” tiedosto.
Tämä on web-applikaation “tärkein” tiedosto, tässä esitellään Express ja MongoDB- tietokanta yhteys. Luodaan web-server kuuntelija ja määritellään web-sovelluksen tarjoamat reitit. (Routes)
Seuraavaksi luodaan uusi kansio “kayttoliittyma”, jonne luodaan uudet tiedostot, index.html ja code.js, sekä styles.css.
Näistä rakentuu meidän “Todo-sovellus” käyttöliittymä.
Nyt voidaan kokeilla tehdä ensimäinen “Commit”, eli lähettää nämä juuri luodut tiedostot, koko projekti GitHub:n pilveen talteen, käyttämällä GitHub Desktop sovellusta.
Painetaan “Commit to main”. Ja “Publish repository”.
“Open the repository page on Github”, “View on GitHub” nappia painamalla voi vielä tarkastaa, että pääsee katsastelemaan tiedostoja myös GitHub:n oman web-palvelun kautta.
Luodaan vielä package.json tiedosto, jossa määritellään mitä riippuvuuksia täytyy olla asennettuna serverillä, joka tulee tätä meidän web-sovellusta suorittamaan ja jakamaan internetiin.
(Jos testataan koodia ensin omalla koneella node.js:n avulla paikallisesti, localhost:lla, “npm init” ja “npm dev” run komennoilla, tuo tiedosto luodaan automaattisesti. Tätä käytiin läpi jo aikaisemmissa Blog-posteissa. )
{
"name": "todo-sovellus",
"version": "1.0.0",
"description": "This is a Node.js project.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "koodinkutoja.com",
"license": "MIT",
"dependencies": {
"cors": "^2.8.5",
"express": "^4.18.2",
"mongoose": "^7.0.0"
}
}Tehdään tästä vielä uusi kommitti ja publish, jotta tämäkin tiedosto siirtyy GitHub:iin talteen.
Lähdetään kokeilemaan, miten cyclic.sh:n avulla voidaan julkaista yksinkertainen Todo-sovellus. Github:sta Internettiin, toimivaksi palveluksi testausta varten.
Ensin täytyy tietenkin mennä “Sign up”:n kautta, ja antaa cyclic:lle lupa yhdistää palveluun, omilla github tunnuksilla.
Link Your Own, tabi:n alta, Connect a repo to Cyclic, nyt pitäisi pystyä valitsemaan omia repoja Githubista. Jos repoa ei heti löydy listasta (Julkisista repoista), kun kirjoittaa jotain haku kenttään, avautuu uusi linkki “Add a private repo…” Siitä painamalla, voi antaa luvan etsiä myös omista GitHub:n yksityisistä repositorioista.
Nyt voidaan yhdistää, Cyclic.sh palvelu meidän yksityiseen GitHub-repositorioon, jonka me juuri loimme.
Cyclic.sh pilvipalvelu lähtee nyt lataamaan meidän repoa cyclic:n palvelimelle, jossa sen vaatimat “Depencies”, eli ne tarvittavat javascript kirjastot asennetaan automaattisesti node.js ympäristöön. Nämä voidaan määrittää siinä Githubin repo:n “package.json” tiedostossa.
Jos kaikki onnistuu, tulee ilmoitus “You’re Live!”.
Nyt voidaan kokeilla, selaimella yhdistää tähän juuri luotuun web-osoitteeseen.
Cyclic.sh:n websivun “Logs” välilehdellä, voidaan seurata web-applikaation Node.js:n konsolia, eli jos meillä on omassa koodissa niitä console.log(“Debug-tietoa konsoliin tulostuksia.” ) ne näkyvät täällä.
Overview välilehdellä voidaan katsella, kuinka paljon web-sovellus sivulla on käyttäjiä ja liikennettä. Tästä on hyvä jatkaa eteenpäin, luoda uusia repositoryjä ja julkaista näistä uusia web-sovelluksia!
