Fra ProcessWire til React og Sanity for Filmdagbok

Fra ProcessWire til React og Sanity for Filmdagbok

Filmdagbok er mitt evigvarende hobbyprosjekt, som nå har byttet ut publiseringsløsningen ProcessWire til fordel for en React-app med Sanity i bunn.

ProcessWire (processwire.com) har vært min foretrukne publiseringsløsning siden 2015. Det er bygget på PHP og MySQL. Det er lett å ta i bruk og tar få valg for deg, noe som gjør det til en fleksibel plattform med tanke på front end-koden.

Etter å ha fullført et lengre JavaScript-kurs og begynt på et like langt React-kurs, var det på sin plass å ta i bruk lærdommen.

Ønsket løsning

Opprinnelig skulle nye Filmdagbok (filmdagbok.no) være en enkel app som hentet alt av mine rangeringer og anmeldelser fra TMDB (themoviedb.org) via deres API (themoviedb.org). Og fungere uten noen form for publiseringsløsning i mellom. ProcessWire-løsningen fungerte sånn, og hadde seg selv i mellom.

Skjermbilde av dokumentasjonen til TMDB API.

Men det viste seg å være et styr å kombinere de ulike endepunktene fra TMDB API-et for å få data både fra mine rangeringer og generelt om filmene og seriene. I tillegg var det ikke noe valgmulighet i API-et for å søke etter titler blant rangerte filmer og serier.

Løsning

Løsningen ble å opprette et Sanity-prosjekt (sanity.io) som appen kunne hente data fra. Kontrollpanelet til Sanity kjører på Netlify (netlify.com), som gjorde det mulig å bruke planlagte funksjoner hos Netlify til å synkronisere mine TMDB-rangeringer med oppføringer i Sanity.

Skjermbilde av Sanity-kontrollpanelet

For å lage React-appen (react.dev) brukte jeg Vite (vitejs.dev). Filmdagbok er en enkel side både i oppbygging og funksjonalitet. I praksis er det bare to typer sider i appen. Oversiktsvisning av flere filmer og serier, og visning av enkelttittel.

Koding i Visual Studio Code

Med Sanity i bunn var det lett å få til et søk ved et enkelt API-kall.

Fordeler

Ved å gjøre om Filmdagbok fra en PHP og MySQL-løsningen til å bli en JavaScript-basert app som bruker React, så blir det lett å flytte rundt på appen til ønsket sted i fremtiden. Enten det er Netlify, Vercel (vercel.com), en annen tjeneste eller på en egen server.

Utrulling av kodeendringer fra GitHub (github.com) er helautomatisert. Det er mye enklere enn hva webhotelløsningen til PRO ISP (proisp.no) la opp til.

Utrullingslogg hos Netlify

Selv om ProcessWire fint kunne ha fungert som en hodeløs publiseringsløsning, er steget tatt for fullt med kombinasjonen av React-app og Sanity. Det vil gjøre det lettere å prøve ut nye front end-løsninger eller flytte dataene i fremtiden.

Både Netlify og Sanity har prismodeller som gjør at mindre hobbyprosjekt kan bruke gratisversjoner. Farvel til det tradisjonelle webhotellet.

Ulemper

En app som gjengir innholdet på klientsiden, det vil si en app som ikke har forhåndslagede nettsider, er ubrukelig for søkemotoroptimalisering. Selv med et tillegg som Helmet (npmjs.com).

Ingen visning i testing hos Social Share Previews.

Det går mye tid med til å sette opp en ny løsning. En som gjerne ikke er like fullkommen som sin forgjenger. Men det gjør at jeg må tenke på enklere løsninger, og satse på det som kan bli et minimum levedyktig produkt.

Gjenstår

Som alltid med et hobbyprosjekt så er det mye som gjenstår. Per nå har ikke nettstedet noen form for paginering. Så du vil kun se de siste 30 rangerte titlene under fanene Film og Serie på toppen av siden. På grunn av et knakende godt søk ble det ikke prioritert i første versjon.

Søkemotoroptimalisering må på plass. Det er mulig at hele appen skal bli skrevet om til å bruke serversidegjengivelse, for eksempel med Next.js (nextjs.org). Det er en litt større jobb.

Per nå blir ikke anmeldelsene mine hentet automatisk fra TMDB, men det vil forhåpentligvis en ekstra planlagt funksjon i Netlify ordne. Det haster ikke, da tidligere skrevne anmeldelser ble med i første importering av data til Sanity. Og nye anmeldelser har ikke blitt skrevet på en stund uansett.

Filmdagboks historie

En oversikt over hvordan Filmdagbok har utviklet seg, kort fortalt:

2004

Filmdagbok oppstod på filmdagbok.blogspot.com.

2006

WordPress ble tatt i bruk, og Filmdagbok flyttet til et webhotell.

2015

ProcessWire kommer på banen. UIkit (getuitkit.com) blir foretrukkent front end-rammeverk.

2023

Filmdagbok tar i bruk det godt voksne React-biblioteket og flytter ut av webhotellet. Tar i bruk Netlify og Sanity.