4/4/2022 ∙ 4 minuty czytania

banner

Osobista strona internetowa — start projektu 🚀

To będzie seria postów poświęconych tworzeniu tej strony. Przedstawię w niej po kolei wszystkie kroki wykonane podczas jej tworzenia.

Wybór narzędzi - Remix framework

Coraz większą popularność zyskują tzw. frameworki / meta-frameworki / repozytoria (jak zwał tak zwał) Reakta, których zadaniem jest wspomaganie pracy z tą biblioteką. W tym temacie na pewno napiszę jeszcze jakiegoś posta, ale póki co skupmy się na postawieniu strony. Do zbudowania swojej witryny użyłem stosunkowo nowego meta-frameworka jakim jest Remix, który powstał z inicjatywy twórców takich rozwiązań jak React Router, Reach Router oraz Reach UI.

W momencie pisania posta Remix miał do dyspozycji kilka starterów, które ułatwiają początkowy proces tworzenia aplikacji. Ja skorzystałem z podstawowej konfiguracji, bez dodatkowych narzędzi. Chciałbym przez cały proces przejść samodzielnie i przy okazji czegoś się nauczyć.

Uruchomienie kreatora:

> npx create-remix@latest kacgrzes.io

Moje odpowiedzi na pytania zadane przez kreatora:

R E M I X

💿 Welcome to Remix! Let\'s get you set up with a new project.

? Where would you like to create your app? ./kacgrzes.io
? Where do you want to deploy? Fly.io
? TypeScript or JavaScript? TypeScript
? Do you want me to run `npm install`? Yes
...

Platforma fly.io

Po konfiguracji i wybraniu metody wdrożenia, w pliku README.md znajduje się dokładny opis, w jaki sposób wystawiamy aplikację do internetu. Ja wybrałem serwis fly.io, który uruchamia aplikacje w różnych rejonach świata blisko końcowych użytkowników.

Dla każdej platformy sposób instalacji narzędzia fly.io jest nieco inny. Więcej informacji można znaleźć tutaj.

Dla platformy macOS, z której korzystam na co dzień, będzie to:

> brew install flyctl

Kolejnym krokiem jest rejestracja na platformie fly.io. Najlepiej zrobić to za pomocą komendy:

> flyctl auth signup

Jeżeli mamy konto na GitHubie (a zakładam, ze tak jest) to wybieramy tę metodę autoryzacji. W przeciwnym wypadku rejestrujemy konto standardowym sposobem (e-mail i hasło)

W celu utworzenia aplikacji na fly.io

> flyctl launch

fly.io zapyta nas o nazwę projektu, jeśli nie podamy nazwy, to zostanie ona wybrana za nas automatycznie. Zalecam wybór konkretnej nazwy, dzięki czemu link do aplikacji będzie łatwiejszy do zapamiętania. To samo tyczy się nazwy organizacji, która dla nowo założonego konta będzie po prostu organizacja prywatną. W kolejnym kroku skrypt poprosi nas o wybranie regionu. Na sam początek, najlepiej wybrać region najbliższy pod względem lokalizacji dla naszych docelowych użytkowników. Ja wybrałem Frankfurt.

Przy pytaniu o wystawianie aplikacji wybierzmy opcję nie. Upewnijmy się najpierw, ze nasz projekt działa.

? App Name (leave blank to use an auto-generated name): kacgrzes.io
? Select organization: flyio (flyio)
? Select region: fra (Frankfurt, Germany)
? Would you like to deploy now? No

W celu upewnienia się, ze nasza strona działa poprawnie najpierw uruchamiamy ja lokalnie w trybie developerskim za pomocą polecenia:

> npm run dev

jeśli wszystko jest okej, możemy przerwać proces za pomocą:

> ctrl + c

a następnie za pomocą polecenia:

> npm run build

Budujemy naszą aplikację w trybie produkcyjnym. W następnym kroku możemy uruchomić aplikację produkcyjną lokalnie, żeby zobaczyć, jak będzie prezentować się wystawiana przez nas aplikacja:

> npm run start

Jeżeli wszystko działa poprawnie, możemy rozpocząć właściwe wdrożenie aplikacji:

> fly deploy

Polecenie to, uruchomi wdrożenie aplikacji na serwerach fly.io.

==> Validating app configuration
--> Validating app configuration done
Services
TCP 80/443 ⇢ 8080
Remote builder fly-builder-little-glitter-8329 ready
...
1 desired, 1 placed, 1 healthy, 0 unhealthy [health checks: 2 total, 2 passing]
--> v0 deployed successfully

Po zakończeniu procesu możemy wejść na stronę naszej aplikacji: https://kacgrzes.fly.dev/.

Ostatnim krokiem będzie utworzenie repozytorium na GitHubie i wypchnięcie kodu naszej strony.

> git init
> git add .
> git commit -m "Init repo with fly.io configuration"
> git remote add origin <tutaj link do repozytorium na githubie>
> git branch -M main
> git push -u origin main
exit

Poniżej znajdziesz więcej postów, które mogą Cię zainteresować.