Projektin luominen

Projektin käynnistäminen ensimmäisellä kerralla

Jokainen projekti aloitetaan sen luomisella. Ennen kuin luomme projektia, niin siirrytään ensin siihen kansioon, johon projekti luodaan. Tämä materiaali oletaan, että projekti luodaan Documents-kansion alle luotuun projektit-kansioon. Siirrytään ensin Documents-kansioon.

cd Documents

Tämä materiaali olettaa, että komentorivi käynnistyy käyttäjän profiilikansioon (kotikansioon), josta löytyy Documents-niminen kansio.

Jos sinulla ei ole Documents-kansiota, niin voit hyvin hypätä cd Documents-komennon yli.

Luodaan projektit-kansio seuraavalla komennolla.

mkdir projektit

Huomaa, että projektit-kansio tarvitsee luoda ainoastaan kerran. Jos se on jo olemassa, niin voit siirtyä seuraavaan vaiheeseen.

Siirrytään projektit-kansioon komennolla:

cd projektit

Seuraavaksi kopioimme GitHubista projektirungon tähän kansioon. Käytämme valmista pohjaa siksi, että tällä tavalla projektissa käytettävien pakettien uudet versiot eivät riko toiminnallisuutta.

Lataa projektin zip-paketti osoitteesta https://github.com/pekkatapio/lemon-clicker-pohja ja pura se projektit-kansioon.

Zip-paketin lataus löytyy Code-napin alla olevasta Download ZIP-vaihtoehdosta.

Muuta kansion nimeksi lemon-clicker komennolla.

mv lemon-clicker-pohja-main lemon-clicker

Normaalisti alustaisimme projektirungon kutsumalla Viten luontiskriptiä. Materiaalissa oleva projektirunko on alunperin luotu komennolla:

npm create vite@latest lemon-clicker -- --template react

Kopioidusta projektirungosta on muutettu seuraavat asiat alkuperäiseen verrattuna:

  • public-kansio on poistettu
  • src/assets-kansio on tyhjennetty
  • src/App.css-tiedosto on tyhjennetty
  • src/App.jsx-tiedostosta on poistettu ylimääräinen sisältö
  • src/index.css-tiedosto on poistettu
  • src/main.jsx-tiedostosta on poistettu linkitys index.css-tiedostoon
  • index.html-tiedoston title-elementti on päivitetty

Viimeisenä vaiheena on vielä npm-pakettien asentaminen, Visual Studio Coden käynnistäminen projektikansiossa ja kehitysympäristön käynnistäminen. Siirrytään ensin projektikansioon.

cd lemon-clicker

Asennetaan projektin käyttämät npm-paketit komennolla:

npm install

Tämä komento asentelee paketteja jonkin aikaa riippuen työaseman tehokkuudesta ja nettiliittymän nopeudesta. Komento tulostaa lopulta seuraavan kaltaisen tulostuksen:

added 240 packages, and audited 241 packages in 1m

81 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Jos sinulle tulee hieman eri luvut, niin siitä ei kannata säikähtää. Erityisesti viimeisellä rivillä ilmoitettujen haavoittuvuuksien määrä voi olla eri. Tämän materiaalin kirjoittamisen jälkeen asennettavista paketeista on todennäköisesti löytynyt haavoittuvuuksia.

Emme tässä vaiheessa lähde korjaamaan näitä mahdollisia haavoittuvuuksia.

Seuraavaksi käynnistämme Visual Studio Coden niin, että projektikansiona on edellä kopioimamme kansio. Tämä tapahtuu antamalla seuraava komento komentorivillä:

code .

Lopuksi voimme käynnistää kehitysympäristön komennolla:

npm run dev

Tämä komento "jumittaa" komentorivin eli kehitysympäristö jää taustalle tarkkailemaan projektikansiossa tapahtuvia muutoksia. Kun johonkin tiedostoon tulee muutos, niin kehitysympäristö tekee automaagisesti tarvittavat käännökset ja päivittää selainsivun. Komentoriville tulee seuraavankaltainen teksti:

  VITE v4.3.7  ready in 1585 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

Avaa selaimella tuo komentorivin tulosteessa mainittu osoite. Oletuksena osoite on http://localhost:5173/, jos portti ei ole varattu. Selainsivun pitäisi näyttää seuraavalta:

Projektipohja selainikkunassa

Projektin käynnistäminen myöhemmin

Seuraavilla kerroilla projektia ei tarvitse enää luoda, riittää että tarvittavat ohjelmat käynnistetään. Tämä onnistuu seuraavilla komennoilla:

cd Documents
cd projektit
code .
npm run dev