Next.js 13 w Praktyce: Konfiguracja środowiska developerskiego

0:00Konfiguracja naszego środowiska deweloperskiego.

0:02Zaczniemy od zainstalowania najnowszej wersji timera w naszym projekcie.

0:07Robimy to za pomocą polecenia npm z menu Start.

0:11W Save Fighter wciskamy Enter.

0:15W tym momencie wszystko zostało zainstalowane.

0:18Teraz przejdziemy sobie do naszego

0:21naszego edytora kodu i sprawdzimy czy rzeczywiście mamy wszystko ustawione.

0:26Zróbmy sobie Juice Settings.

0:29Porzucamy Writer i teraz mamy Black and passing config.

0:34Nie musimy tego dodawać.

0:36Tak naprawdę mamy Printer enabled.

0:40To jest najważniejsza opcja, którą sobie musimy zaznaczyć w naszym projekcie.

0:46Jeżeli chodzi o to, żeby Writer fajnie

0:48pracował z klientem, to na stronie dokumentacji mówimy, że bardzo ważne, żeby

0:54zainstalować sobie z client config printer.

0:58To jest kolejna rzecz, którą będziemy musieli sobie zainstalować.

1:01Przechodzimy do naszego terminala npm Install testing Config Printer.

1:07Wciskamy Enter i na stronie Next jest jest

1:12podana informacja w jaki sposób zmienić naszą konfigurację RC.

1:17Musimy sobie dodać tutaj extends Next i printer.

1:21Przejdźmy teraz do naszego.

1:24RC i tu mam akcent Next call web Wita!

1:29Możemy sobie zostawić to co mamy tutaj.

1:33Ja sobie teraz po prostu przesunę tą wartość, tą stronę i.

1:40Zostawimy sobie to zapisujemy.

1:42Już w tym momencie mamy skonfigurowanego

1:44premiera, mamy skonfigurowanego oraz klienta w naszym projekcie.

1:48Kolejna rzecz proszę sprawdź u siebie czy

1:52masz zainstalowane paczki, szczególnie CSS.

1:57Interesujące.

1:58To jest bardzo ważna paczka, która pozwoli nam fajnie dywagować.

2:02Style, które mamy w naszym projekcie.

2:06I kolejna rzecz, którą musimy też jeżeli chodzi o CSS Development naszej aplikacji.

2:12Musimy sobie skonfigurować plugin tutorial.

2:16Przejdziemy teraz na oficjalną stronę.

2:19Writer Plugin.

2:21CSS i.

2:22Żeby zainstalować ten plugin musimy

2:25skorzystać z npm Instal minus the price price plan git css.

2:31Wklejamy to.

2:33Instalujemy nasz nasz plugin.

2:36Po chwili kiedy on zostanie zainstalowany możemy wrócić na tą stronę.

2:39Musimy dodać do Price config.

2:42Musimy stworzyć plik price config.

2:44Czy jest i dodać taką wartość w środku?

2:48Przejdźmy do naszego edytora kodu.

2:51Zrobimy sobie plik config.

2:55TS w naszym przypadku.

2:58No i możemy sobie skopiować taką wartość.

3:01Już w tym momencie powinniśmy mieć automatyczne sortowanie składni.

3:05Żeby to sprawdzić możemy przejść sobie do naszego page.

3:09I tutaj w tym momencie Class Name piszemy sobie różne klasy mix dajmy na to 4 text.

3:18Widzisz jak ładnie mi podpowiada IntelliJ Sens różne klasy dajemy Text center i px

3:240 i po naciśnięciu save te klasy powinny mi się pisze sortować.

3:30No i jak widzisz jeżeli cofnę zobacz że PX było na końcu.

3:34Jak nacisnę control save to już printer i

3:37sortowanie class ładnie zaczęło nam działać w naszym projekcie także.

3:42To tyle z takiej wstępnej konfiguracji.

3:43Teraz to zrobimy sobie jeszcze to za

3:46te zmiany przejdziemy sobie do naszego terminala.

3:50Jako że jak wezmę zrobię teraz git status

3:53to mamy tu jakieś rzeczy, które uległy zmianie.

3:56Możemy sobie teraz robić czekoladę. Minusy.

4:00Nowy brand? Oczywiście ficzer.

4:04I niech będzie init file i i git.

4:11Wszystkie zmiany i commit zatwierdzić tu projekt.

4:19No i czujemy.

4:22Nowy brand został wypuszczony.

4:24Teraz pokażę Ci dlaczego depresja daliśmy projekt zaraz na początku.

4:30Otóż jak przejdziemy teraz do serwisu GitHub.

4:34To zobaczysz, że jeżeli przyjedzie sobie na serwis ketchup

4:40zobacz, że jeżeli chodzi o nasz nasz projekt, który wytypowaliśmy sobie na

4:45wersję zobacz, że mam build Preview robiony automatycznie za każdym

4:51razem zobacz znakomitość Dałem jakąś zmianę do naszego repo.

4:55Pojawił się nowy branch, Jest automatycznie budowana ta aplikacja i

4:59mam automatycznie podgląd jest sprawdzany czy ten build przejdzie czy nie.

5:05Odnosiliśmy niczego po drodze, prawda?

5:07Także jeżeli przejdziemy sobie do githuba

5:09i przejdziemy na nasze repo Pocket cap, no to przechodzę na te repozytorium.

5:16Jeżeli chodzi o teraz o pull request, który chcielibyśmy

5:19sobie zrobić Pull request naszego Fletchera do Develop Developer do maina.

5:24To teraz przejdźmy na nasz pull.

5:25Oczywiście wizualnie jeżeli chodzi o naszą aplikację ten nic nie zrobię.

5:29Natomiast chcę Ci pokazać fajną jajca i

5:31pipeline, który już jest tak naprawdę zaimplementowany wraz z celem.

5:37Jeżeli sobie teraz zrobię pull request, zróbmy label Develop,

5:41a później przeskoczymy z developer do maina.

5:45Chcę Ci pokazać w jaki sposób przygotowane są buildy na na wersję.

5:49Jak sobie zrobię pull request to w tym momencie automatycznie Ci i

5:54pipeline wersja sprawdza mi czy ten czy to wszystko.

5:58Zobacz tutaj, czy to wszystko

6:01zostanie zbudowane czy nie mam żadnych konfliktów, mogę sobie zwariować.

6:04Ten pull request.

6:05Config merge.

6:07I w tym momencie zameldowaliśmy to do Ranczo Develop.

6:12I w tym momencie jak przejdziemy na wersję zobacz pojawił się kolejny build.

6:16Kolejny preview Wild z Branch, a tym razem Develop, bo jakieś

6:20zmiany na brandu Develop i już tutaj serwis.

6:23Wiec mi czy moja aplikacja

6:26będzie poprawnie zbudowana, czy nic nie skoczyliśmy po drodze?

6:30Teraz przejdziemy sobie jeszcze raz dla

6:32próby zrobimy sobie kolejny pull request, tym razem z branch develop do maina.

6:38I w tym momencie główny build produkcyjny zostanie wywołany na naszym.

6:42Na naszym koncie na Wersalu także zrobimy sobie pull request.

6:46To są te zmiany, które wprowadziliśmy

6:47związane z etapem z dodaniem Config Printer striker i plugin in CSS.

6:54W tym momencie klient pull request zrobimy Ja sobie zrobię client pull request

6:59I tutaj znowu vertical sprawdzi mi czy ten branch sukcesywnie może być dyplomowany.

7:06Jeżeli by coś nie grało to już dostalibyśmy jakieś powiadomienie.

7:11W tym momencie mogę sobie zrobić Merge

7:12Pull request z Blanche Develop do maina, czyli na nasz główny produkcyjny branch.

7:18Jeżeli sobie zrobię config meczu to tutaj na Wersalu też odpali mi się

7:23kolejny build, natomiast zamiast różnica automatycznie paplanina.

7:28Na weselu mamy to, że branch main jest branch produkcyjnym.

7:33Jest to build produkcyjny, teraz trigger.

7:35Możemy sobie go podejrzeć

7:37jak to wszystko się buduje i czy wszystko zostanie zbudowane sukcesywnie.

7:43Jeżeli tak to za chwilkę pewnie uzyskamy taką informację.

7:46Tutaj pojawią się po prostu check boxy i

7:49będzie informacja, że udało się zbudować naszą aplikację.

7:52Będziemy ją sobie mogli odwiedzić pod odpowiednim adresem.

7:57Build udało się przeprowadzić, Mamy adres

7:59do naszej aplikacji, także teraz klikając to powinno się normalnie nam odpalić.

8:03Jest to wszystko odpalone.

8:05Zobacz, że Poke cap pojawił się na środku z tego względu, że zrobiliśmy text center.

8:12Dlatego wyższy od kowala to nasz sex.

8:14Dlatego Hello from Pocket cap.

8:16Teraz na naszej stronie jest dokładnie na środku.