[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"technology-pl-vite":3,"technology-projects-pl-vite":28,"mdc-jqxiii-key":75},{"id":4,"title":5,"category":6,"content":7,"description":8,"extension":9,"faq":10,"icon":11,"links":12,"meta":21,"projects":22,"since":24,"stem":25,"updated":26,"__hash__":27},"technologies_pl\u002Fpl\u002Ftechnologies\u002Fvite.yml","Vite","frontend","Vite to narzędzie do tworzenia i budowania frontendu. Korzystam z niego przez Nuxt w VetCard i tym portfolio, a także przez integrację z Laravel w DigiSpace.\n\n## Podczas pracy nad kodem\n\nSerwer deweloperski obsługuje wymianę modułów bez pełnego przeładowania strony, czyli HMR. Wiele zmian można więc zobaczyć od razu w otwartej aplikacji. Rzeczywisty czas reakcji zależy jednak od projektu, wtyczek i komputera — nie jest bezwarunkową obietnicą natychmiastowej aktualizacji.\n\n## Przygotowanie do wdrożenia\n\nBudowanie przygotowuje pliki frontendu, w tym nazwy z hashem i podział kodu na części przy odpowiedniej konfiguracji. Nuxt i Laravel dodają własną integrację wokół wyniku. Wewnętrzny bundler zależy od wersji Vite, dlatego przy zmianie konfiguracji sprawdzam zainstalowane wersje narzędzi.\n\n## Co sprawdzam po zbudowaniu aplikacji\n\nUdane budowanie nie dowodzi, że każda strona działa. Adresy plików, zmienne środowiskowe, renderowanie na serwerze i zachowanie przeglądarki trzeba sprawdzić w docelowym środowisku. Vite jest częścią procesu wydania; testy przeglądarkowe i kontrola uruchomionej strony obejmują to, czego kompilacja nie weryfikuje.\n","Vite w Vue, Nuxt i Laravel: wygodna praca lokalna, przygotowanie plików do publikacji i weryfikacja wersji produkcyjnej.","yml",null,"i-simple-icons-vite",[13,18],{"label":14,"to":15,"color":16,"icon":17},"vite.dev","https:\u002F\u002Fvite.dev","neutral","i-heroicons-arrow-top-right-on-square",{"label":19,"to":20,"color":16,"icon":17},"Dokumentacja techniczna","https:\u002F\u002Fvite.dev\u002Fguide\u002F",{},[23],"digispace","2021","pl\u002Ftechnologies\u002Fvite","2026-09-20","I1OO3WwqeA4bVBUNHe3PVfWEqiJAhrW6-_TpKKs1XMo",[29],{"id":30,"title":31,"content":32,"date":33,"description":34,"extension":9,"featured":35,"image":36,"links":37,"meta":46,"stack":47,"stem":70,"tags":71,"url":40,"__hash__":74},"projects_pl\u002Fpl\u002Fprojects\u002Fdigispace.yml","DigiSpace","Produkcyjna strona digispace.pro — publiczny serwis agencji, panel administracyjny i autorski CMS w jednej aplikacji Laravel, teraz w pełni wielojęzyczna (EN\u002FUK\u002FPL), z panelem Filament obok starego panelu na Inertia + Vue. Ten sam kod, który obsługuje żywą stronę, jest dostępny na GitHub.\n\n## Kluczowe funkcje\n\n- **Panel administracyjny Filament** - równoległy panel `\u002Fcontrol` (24 zasoby) z edytorem TipTap, przesyłaniem obrazów bezpośrednio do MinIO i nawigacją zorientowaną na treść, wdrażany zasób po zasobie obok istniejącego panelu Inertia\n- **Wielojęzyczność od podstaw** - tłumaczone są nie tylko strony, ale i strukturalne teksty UI (menu, stopka, przyciski) dla każdej lokalizacji, z routingiem opartym na hreflang\n- **SEO wbudowane** - dane strukturalne JSON-LD, zlokalizowane sitemapy i poprawna obsługa 404 dla każdej lokalizacji\n- **Monolit zrobiony dobrze** - publiczna strona i oba panele administracyjne w jednej aplikacji Laravel, bez osobnego API\n- **Treść pod kontrolą** - strony, usługi i portfolio edytuje się w CMS — bez deploymentu dla zmiany tekstu czy tłumaczenia\n- **Bramy jakości** - testy PHPUnit i analiza statyczna PHPStan w CI\n- **Otwarty kod** - dokładnie ten kod, który obsługuje digispace.pro, jest publiczny na GitHub\n\n## Stos technologiczny\n\n- **Backend**: Laravel\n- **Panel admina**: Filament 5 (`\u002Fcontrol`) + stary panel na Inertia.js + Vue\n- **Frontend**: Vue.js, Vite\n- **Lokalizacja**: tłumaczenia treści i struktury EN\u002FUK\u002FPL\n- **Architektura**: Niestandardowy CMS\n","2022-10-05","Wielojęzyczna (EN\u002FUK\u002FPL) produkcyjna strona agencji z autorskim CMS — panel Filament z rozbudowanym edytorem treści, tłumaczenia, JSON-LD i zlokalizowane sitemapy wbudowane obok starego panelu na Inertia + Vue",true,"\u002Fhero\u002Fdigispace.avif",[38,42],{"label":39,"to":40,"color":41,"icon":17},"Live Demo","https:\u002F\u002Fdigispace.pro","primary",{"label":43,"to":44,"color":16,"icon":45},"GitHub","https:\u002F\u002Fgithub.com\u002FYurij2015\u002FDigiSpace","i-simple-icons-github",{},[48,51,54,57,58,61,64,67],{"name":49,"icon":50},"Laravel","i-simple-icons-laravel",{"name":52,"icon":53},"Inertia","i-simple-icons-inertia",{"name":55,"icon":56},"Vue","i-simple-icons-vuedotjs",{"name":5,"icon":11},{"name":59,"icon":60},"MySQL","i-simple-icons-mysql",{"name":62,"icon":63},"Tailwind CSS","i-simple-icons-tailwindcss",{"name":65,"icon":66},"Filament","i-simple-icons-filament",{"name":68,"icon":69},"CMS","i-heroicons-document-text","pl\u002Fprojects\u002Fdigispace",[49,65,52,55,72,73],"i18n","SEO","Fk6DSrh4wV9UrvlIWm6anLNeGfF5gl4G-jy8qzYVLUM",{"data":76,"body":77},{},{"type":78,"children":79},"root",[80,88,95,100,106,111,117],{"type":81,"tag":82,"props":83,"children":84},"element","p",{},[85],{"type":86,"value":87},"text","Vite to narzędzie do tworzenia i budowania frontendu. Korzystam z niego przez Nuxt w VetCard i tym portfolio, a także przez integrację z Laravel w DigiSpace.",{"type":81,"tag":89,"props":90,"children":92},"h2",{"id":91},"podczas-pracy-nad-kodem",[93],{"type":86,"value":94},"Podczas pracy nad kodem",{"type":81,"tag":82,"props":96,"children":97},{},[98],{"type":86,"value":99},"Serwer deweloperski obsługuje wymianę modułów bez pełnego przeładowania strony, czyli HMR. Wiele zmian można więc zobaczyć od razu w otwartej aplikacji. Rzeczywisty czas reakcji zależy jednak od projektu, wtyczek i komputera — nie jest bezwarunkową obietnicą natychmiastowej aktualizacji.",{"type":81,"tag":89,"props":101,"children":103},{"id":102},"przygotowanie-do-wdrożenia",[104],{"type":86,"value":105},"Przygotowanie do wdrożenia",{"type":81,"tag":82,"props":107,"children":108},{},[109],{"type":86,"value":110},"Budowanie przygotowuje pliki frontendu, w tym nazwy z hashem i podział kodu na części przy odpowiedniej konfiguracji. Nuxt i Laravel dodają własną integrację wokół wyniku. Wewnętrzny bundler zależy od wersji Vite, dlatego przy zmianie konfiguracji sprawdzam zainstalowane wersje narzędzi.",{"type":81,"tag":89,"props":112,"children":114},{"id":113},"co-sprawdzam-po-zbudowaniu-aplikacji",[115],{"type":86,"value":116},"Co sprawdzam po zbudowaniu aplikacji",{"type":81,"tag":82,"props":118,"children":119},{},[120],{"type":86,"value":121},"Udane budowanie nie dowodzi, że każda strona działa. Adresy plików, zmienne środowiskowe, renderowanie na serwerze i zachowanie przeglądarki trzeba sprawdzić w docelowym środowisku. Vite jest częścią procesu wydania; testy przeglądarkowe i kontrola uruchomionej strony obejmują to, czego kompilacja nie weryfikuje."]