Hej och välkommen till repot för frontenden av Fysiksektionens hemsida! Med ett gränssnitt mot vårt API definierat i Hemsida-Docs och Hemsida-Backend är målet att bygga en snygg och välfungerade hemsida för allt möjligt som sektionen vill ha.
Det finns många olika sätt att jobba med frontend-projektet. Vad som passar just dig går inte att säga, utan det beror på din environment, vad du är van vid och helt enkelt egen preferens. Nedan listar vi två sätt som du kan jobba med projektet, men se till att hitta det sätt som paassar dig bäst!
Docker är ett system för att skapa små väldefinierade kontainrar på din dator. I dessa går det att köra program utan att de påverkas av dina egna inställningar eller annat som kan störa. Det är ett bra sätt att lösa problemet "men det funkar ju på min dator...". Känner du inte till docker sen tidigare rekommenderar vi att du läser på lite först. Se info under Docker.
Nedan följer instruktioenr för att använda Docker tillsammans med VSCode.
- Installera Docker Engine och Docker Compose på din dator.
- Windows: Install Docker Desktop on Windows (inkluderar alla paket)
- Mac: Install Docker Desktop on Mac (inkluderar alla paket)
- Linux: Install Docker Engine och Install Docker Compose (båda behöver installeras)
- Klona repot till en mapp på din dator.
- Öppna mappen i VSCode.
- Installera Docker-stöd samt stöd för kontainrar. Det görs under Extentions och paketen som ska installeras heter
ms-vscode-remote.remote-containersochms-azuretools.vscode-docker. - Klicka på den gröna knappen längst ned till vänster och välj "Reopen folder in container". (OBS detta kan ta lång tid första gången det ska göras. Därefter kommer det gå snabbare tack vare cachening).
- Nu finns en server som kör projektet på localhost:3000 :D
För att lära dig hur du ska jobba med Docker tillsammans med VSCode, se resureserna under Docker.
För att installera lokalt behöver du göra följande:
- Installera NodeJS v.16. (Install NodeJS)
- Clona repot och kör
npm installfrån repots root för att hämta alla paket. - Kör
npm startför att start starta en server som du kommer åt från browsern.
Detta finns det stöd för i både VSCode och WebStorm (Pro-edition från KTH). Vad du väljer att jobba med är upp till dig. Utforksa gärna vad din IDE kan hjälpa dig med när det kommer till automatisk Lint-fix, paketinstallation, etc.
Här har vi samlat viktiga koncept och länkar som relaterar till projektet. Dessa kan användas för att komma igång med att skriva kod till projektet eller bara för att enkelt kunna navigera till vanliga resurser.
Varje avsnitt har en kort introduktion, en lista på saker som du måste känna till för att skriva kod till hemsidan samt relaterade länkar.
- Nya hemsidan - Hur funkar det? - Ger övergripande introduktion till projektet samt en något mer ingående förklaring till de stora koncepten inom projektet.
- Hur funkar en hemsida? - Ger en introduktion till att bygga en hemsida. Vad behöver göras?
- Hemsidan-Docs - Documentation av det gemensamma API som delas mellan front- och backenden.
- Hemsidan-Frontend/docs - Innehåller noggrann och specifik dokumentationtion av koncept och implementaioner begränsade till frontenden.
React är det framework som ligger till grund för hela frontenden.
- Vad är JSX (eller TSX när det är typescript)?
- Hur används Functional components? Hur används components i JSX/TSX?
- Vad är ett state och ett context? Skillnader?
- Hör görs API-anrop från React? Vad är en promise?
- Avancerat: Vad är en reducer?
Bootstrap är ett CSS- och Javascript-bibiliotek som används för att designa och styla vårt projekt. Bootstrap innehåller både metoder för positionering och styling av komponenter och kan även användas direkt i React tack vare andra bibiliotek. Vi försöker använda Bootstrap som styling så mycket som möjligt.
- Layout med Bootstrap-klasser. Hur funkar Grid, breakpoints och Flex?
- Vilka grundläggande komponenter finns i Bootstrap? Hur används CSS-klasser för Bootsraps komponenter?
- Vad är React-Boostrap?
- Sass/Scss och att skriva över Bootstrap defaults.
Docker är industristandarden för att jobba med kontainer-utveckling. Det är ett sätt att tydligt kunna definiera och distribuera en hel projektstruktur, vilket gör utveckling och lansering supersmidigt.
- Vad är en Container, Image, Host-machine?
- Grundläggande kunskap om Docker CLI. Vad innebär build, run, stop kommandona?
- Vad är en Dockerfile och en docker-compose.yml fil?
- Vad är port-forwarding och varför behövs det?
- Vad är Volumes och Bind-mounts. Hur används det och varför?
- Docker - Getting started
- VSCode - Developing inside a Container
- VSCode - Remote development in Containers
Detta projekt lyder under standardformatet av MIT License. Du finner licensen här: LICENSE.
Vill du veta mer om projektet, har frågor eller av annan anledning nå den ansvariga? Kontakta webmaster(at)f.kth.se.