Katalog projektu tworzymy poleceniem mkdir z argumentem będącym nazwą katalogu, np:
mkdir app
Następnie, po utworzeniu katalogu projektu przechodzimy do niego poleceniem cd:
cd ~/app
Po upewnieniu się, że znajdujemy się w katalogu projektu (polecenie pwd), w katalogu app tworzymy kolejny podkatalog o nazwie src – również poleceniem mkdir a następnie przechodzimy do nowoutworzonego katalogu:
mkdir src
cd src
Znajdując się w katalogu src poleceniem touch tworzymy wymagane pliki:
touch index.html main.js style.css
Następnie tworzymy plik .gitignore w głównym katalogu aplikacji:
touch .gitignore
Po stworzeniu pliku, możemy dodać do niego nazwy plików i katalogów, które mają być pomijane przy wersjonowaniu projektu:
echo node_modules > .gitignore
echo dist >> .gitignore
Aby upewnić się czy .gitignore zawiera wszystkie wymagane nazwy plików, możemy wiświetlić jego zawartość poleceniem cat:
cat .gitignore
Następnym krokiem będzie utworzenie repozytorium w głównym katalogu projektu:
git init
Po utworzeniu repozytorium sprawdzamy status obecnej rewizji poleceniem git status a następnie dodajemy wszystkie utworzone pliki:
git add src
git add .gitignore
Po dodaniu plików zapisujemy obecną rewizję poleceniem:
git commit -m "Initial commit"
W kolejnym zadaniu tworzymy projekt poleceniem npm init i uzupełniamy informacje o projekcie, bądź używamy ustawień domyślnych dodając flagę -y:
npm init -y
Aby sprawdzić zawartość pliku package.json możemy użyć polecenia cat package.json.
Po utworzeniu projektu uruchamiamy edytor tekstu i tworzymy prostą, statyczną stronę, jak w kodzie źródłowym.
Instalowanie zależności aplikacji odbywa się poprzez polecenie npm install.
Aby testowo wyświetlić stronę, użyjemy prostego serwera o nazwie serve, który zainstalujemy poleceniem:
npm install --save-dev serve
Następnie możemy dodać wywołanie polecenia serwowania z odpowiednimi parametrami w package.json w sekcji "scripts":
"scripts": {
"dev": "serve -n -p 8080 src"
}
Kolejnym krokiem jest instalacja i konfiguracja narzędzia o nazwie webpack.
Aby zainstalować narzędzie oraz niezbędne dodatki użyjamy po kolei poleceń:
npm install --save-dev webpack webpack-cli
npm install --save-dev webpack-dev-server
npm install --save-dev html-webpack-plugin
npm install --save-dev copy-webpack-plugin
Po zainstalowaniu niezbędnych zależności tworzymy plik konfiguracyjny:
touch webpack.config.js
Po utworzeniu pliku konfiguracyjnego możemy przejść do konfiguracji, jak w kodzie źródłowym.
Po zainstalowaniu i skonfigurowaniu webpack'a możemy również wprowadzić zmiany w skrypcie uruchamiającym aplikację, dodając skrypt o nazwie "build" oraz zmieniając skrypt "dev" na taki, który będzie wywoływał webpack-dev-server. serve nie będzie nam już potrzebny.
Aby zbudować aplikacją w trybie produkcyjnym dodamy możliwość czytania zmiennej środowiskowej w pliku konfiguracyjnym. Następnie na podstawie jej wartości zbudujemy aplikację dla środowiska produkcyjnego bądź deweloperskiego.
Gdy podstawowa wersja frontendu jest już gotowa, możemy utworzyć plik serwera aplikacji:
touch index.js
Serwer możemy napisać używając Node.js bez żadnych zależności, jak w kodzie źródłowym.
Chcąc mieć możliwość szybkiego rozwijania projektu backendowego, warto zainstalować narzędzie, które będzie uruchamiało aplikację za każdym razem, kiedy wykryta zostanie zmiana w kodzie. Możemy wykorzystać do tego narzędzie o nazwie nodemon, które zainstalujemy korzystając z npm:
npm install --save-dev nodemon
Po zainstalowaniu nodemon'a dodajemy kolejne skrypty, które będą startowały serwer w trybie produkcyjnym oraz deweloperskim.
Pomimo możliwości rozwijania aplikacji bez użycia dodatkowych zależności, jest to proces zdecydowanie mało wydajny – zamiast tego warto posłużyć się gotowym frameworkiem, który ułatwi nam definiowanie ścieżek aplikacji, etc. Wykorzystamy do tego celu bibliotekę o nazwie express wraz z dodatkiem o nazwie body-parser:
npm install --save express body-parser
W kodzie źródłowym aplikacji zmieniamy wcześniejszą wersję aplikacji na taką, która będzie korzystać z biblioteki express.
W tym momencie mamy dwie części aplikacji (frontend i backend), które są budowane oraz uruchamiane oddzielnymi skryptami. Aby mieć możliwość budowania i uruchamiania frontendu i backendu na raz potrzebujemy jeszcze jednego narzędzia, które zainstalujemy przez npm:
npm install --save-dev npm-run-all
Możemy je wykorzystać aby zrównoleglić uruchamianie serwera oraz procesu budowania frontendu poprzez skonstruowanie odpowiednich skryptów w pliku package.json.
Gdy nasze środowisko pracy jest już w pełni zautomatyzowane, możemy przejść do implementacji logiki aplikacji.
W części backendowej (plik index.js) dodajemy logikę związaną z obsługą różnego typu zapytań obsługujących zarządzanie danymi po stronie serwera, natomiast w części frontendowej interfejs użytkownika związany z wyświetlaniem, dodawaniem oraz kasowaniem ich.
Następnym krokiem jest dodanie logiki do zapisu i zarządzania tablicą notatek na backendzie oraz umożliwienie kasowania notatek na frontendzie, a także aktualizacja styli.
Po zakończeniu implementacji możemy przejść do procesu wdrażania aplikacji na środowisko produkcyjne, zgodnie z notatkami do zajęć.