![\"\"](\"https://gladiatorzy.api.localhost-group.com/wp-content/uploads/2020/08/image.png\")
TL;DR 馃槈
\n\n\n\nI w ten spos贸b bardzo, bardzo dawno temu postawi艂em pierwszego WordPressa dla firmy. Bez znajomo艣ci php, mysqla, wiedzy serwerowej. I przy pomocy internet贸w
\n\n\n\nTeraz, po tylu latach nie jestem fanem tej metody – wrzucania na g艂臋bok膮 wod臋 – poniewa偶 w ten spos贸b, kto艣 uczy si臋 jak co艣 wykona膰, ale cz臋sto kosztem standard贸w lub jako艣ci
\n\n\n\nDlatego nauczony do艣wiadczeniem stworzy艂em Zbiory zada艅 Gladiator贸w Javascriptu, aby ka偶dy kto chce si臋 w miar臋 szybko rozwija膰, m贸g艂 tam znale藕膰 problemy na swoim poziomie, z kt贸rymi mo偶e si臋 zmierzy膰 i b臋d膮 one dla niego ambitne oraz rozwojowe
\n\n\n\nTutaj znajdziesz link, aby poczyta膰 wi臋cej:
\n\n\n\nhttps://gladiators-of-javascript.com/shop/categories/zbiory-zadan/
\n\n\n\nA teraz opowiem o tym jaki cel ja sobie postawi艂em ostatnio jako programista 馃榾
\n\n\n\nNiby si臋 nie da, bo produkt Gatsbiego to statyczna strona, wi臋c mo偶na niby fixowa膰 htmle i cssy, ale przy przebudowaniu jest problem, bo fixy znikaj膮 馃檪
\n\n\n\nZ uwagi na to, 偶e pracuj臋 z WordPressem uzna艂em, 偶e fajnie by艂oby mie膰 w adminie edytor Gatsbiego i kodu React 馃檪 ale nie taki drewniany, tylko co艣 jak VSCode. wydaje si臋 trudne do zrobienia ? ot贸偶 nie 馃榾
\n\n\n\nZacz膮艂em tworzy膰 „wtyczk臋 do WordPressa”, kt贸r膮 roboczo nazwa艂em Edytor Gatsbiego Live. Za艂o偶y艂em sobie, 偶e chcia艂bym mie膰 IDE oraz podgl膮d live zmian
\n\n\n\nPo kr贸tkim researchu i odnalezieniu obrazu dockera theia IDE, mia艂em iframe z IDE z po艂膮czeniem do admina聽![\":smile:\"](\"https://a.slack-edge.com/production-standard-emoji-assets/10.2/google-medium/1f604.png\")
聽finalnie zrobi艂em tak, aby IDE odpala艂o si臋 w innym okienku. Co zaskakuj膮ce dla mnie theia IDE to po prostu VSCode w 艂ebie 馃檪
![\"\"](\"https://gladiatorzy.api.localhost-group.com/wp-content/uploads/2020/08/image-1-1024x681.png\")
Czyli kiedy zmieni臋 cokolwiek i zapisz臋 w webowym IDE. To okaza艂o si臋 te偶 ma艂o skomplikowane, bo wystarczy艂o zbudowa膰 prosty obraz dockera z Gatsbym w docker-compose
\n\n\n\n![\"\"](\"https://gladiatorzy.api.localhost-group.com/wp-content/uploads/2020/08/image-2.png\")
Po odpaleniu instancji Linuxa na AWS i przypisaniu do niej Elastic IP, w 5 min mia艂em odpalonego develop Gatsbiego na porcie 8000
\n\n\n\nTrzecim problemem, z kt贸rym musia艂em si臋 zmierzy膰 by艂o:
\n\n\n\nTo akurat by艂o bardzo proste, bo docker-compose ma volumes, wi臋c wystarczy艂o spi膮膰 wolumen app z apk膮 Gatsbiego do IDE, w miejsce /home/project:
\n\n\n\n![\"\"](\"https://gladiatorzy.api.localhost-group.com/wp-content/uploads/2020/08/image-3.png\")
Dzi臋ki czemu w IDE znalaz艂y pliki, kt贸re by艂y podpi臋te do serwera developerskiego Gatsbiego serwowane z kontenera app
\n\n\n\nZ poziomu IDE mo偶emy zrobi膰 pusha z fixem do repo i jedyne co zosta艂o do zrobienia to przebudowanie strony produkcyjnej – czyli w tym wypadku:
\n\n\n\nhttps://gladiators-of-javascript.com/
\n\n\n\nDo tego mamy ju偶 specjaln膮 wtyczk臋, kt贸r膮 kiedy艣 sobie zrobili艣my – nazwali艣my j膮 Rebuilder i z ty艂u niej jest ma艂y mikroserwis, kt贸ry odpowiada za budowanie apki na podstawie ostatniego commita:
\n\n\n\n![\"\"](\"https://gladiatorzy.api.localhost-group.com/wp-content/uploads/2020/08/image-4-1024x541.png\")
Po klikni臋ciu w „Przebuduj stron臋 g艂贸wn膮” z repo s膮 zaci膮gane ostatnie pliki, Gatsby jest budowany i przerzucany na odpowiedni膮 cz臋艣膰 FTP w spos贸b niezauwa偶alny dla u偶ytkownika
\n\n\n\nMam nadziej臋, 偶e mi艂o si臋 czyta艂o i zainteresowa艂em Ci臋 technologi膮 Gatsbiego, AWS, dockerem oraz my艣leniem jak rozwi膮za膰 problem 馃檪
\n\n\n\nJe艣li uwa偶asz, 偶e to co robi臋 jest warto艣ciowe, b臋dzie mi niezmiernie mi艂o je艣li postawisz mi kaw臋 馃檪
https://gladiators-of-javascript.com/shop/products/postaw-mocna-kawe-tylko-dla-programistow/
Do nast臋pnego commita!
\n","featuredImage":{"altText":"","sizes":"(max-width: 300px) 100vw, 300px","sourceUrl":"https://gladiatorzy.api.localhost-group.com/wp-content/uploads/2020/08/tim-gouw-1K9T5YiZ2WU-unsplash.jpg","srcSet":"https://gladiatorzy.api.localhost-group.com/wp-content/uploads/2020/08/tim-gouw-1K9T5YiZ2WU-unsplash-300x201.jpg 300w, https://gladiatorzy.api.localhost-group.com/wp-content/uploads/2020/08/tim-gouw-1K9T5YiZ2WU-unsplash-1024x685.jpg 1024w, https://gladiatorzy.api.localhost-group.com/wp-content/uploads/2020/08/tim-gouw-1K9T5YiZ2WU-unsplash-768x513.jpg 768w, https://gladiatorzy.api.localhost-group.com/wp-content/uploads/2020/08/tim-gouw-1K9T5YiZ2WU-unsplash-1536x1027.jpg 1536w, https://gladiatorzy.api.localhost-group.com/wp-content/uploads/2020/08/tim-gouw-1K9T5YiZ2WU-unsplash-600x401.jpg 600w, https://gladiatorzy.api.localhost-group.com/wp-content/uploads/2020/08/tim-gouw-1K9T5YiZ2WU-unsplash.jpg 2048w"},"categories":{"nodes":[{"slug":"gdybania-seniora","id":"Y2F0ZWdvcnk6NDg=","name":"Gdybania Seniora"}]},"tags":{"nodes":[{"slug":"ecommerce","name":"ecommerce","count":1},{"slug":"gatsby","name":"gatsby","count":1},{"slug":"programowanie","name":"programowanie","count":42},{"slug":"wordpress","name":"wordpress","count":1}]},"comments":{"nodes":[]},"seo":{"title":"B臋d膮c programist膮 stawiaj sobie TYLKO ambitne cele rozwojowe - Gladiatorzy JavaScriptu","opengraphTitle":"B臋d膮c programist膮 stawiaj sobie TYLKO ambitne cele rozwojowe - Gladiatorzy JavaScriptu","metaKeywords":"","metaDesc":"Podobno programista uczy si臋 najlepiej jak wrzuca si臋 go na g艂臋bok膮 wod臋 i sprawdza czy wyp艂ynie. Tak by艂em uczony w swojej pierwszej firmie - masz i r贸b!","metaRobotsNofollow":"","metaRobotsNoindex":"","opengraphDescription":"Podobno programista uczy si臋 najlepiej jak wrzuca si臋 go na g艂臋bok膮 wod臋 i sprawdza czy wyp艂ynie. Tak by艂em uczony w swojej pierwszej firmie - masz i r贸b!","opengraphImage":{"sourceUrl":"https://gladiatorzy.api.localhost-group.com/wp-content/uploads/2020/08/tim-gouw-1K9T5YiZ2WU-unsplash.jpg"}},"siteMetaData":{"description":"Gladiatorzy JavaScriptu","language":"pl_PL","title":"Gladiatorzy JavaScriptu","url":"http://gladiatorzy.api.localhost-group.com"}}]}},"staticQueryHashes":[]}