Još jedan dan još jedan javascript framework. Remix run su napravili Rajan Florens i Majkl Džekson kreatori React Router biblioteke. Nedavno im se kao DevRel direktor pridružio i Kent C Dods. Ovo je full stack framework u rangu sa Next.js.

S obzirom da sam sa Next.js imao prilike da se poigram na poslu, a da je ovaj blog urađen u GatsbyJs, za sređivanje jednog prašnjavog domena, sajta moje supruge koji je urađen davno sa Angular Universal, sam se odlučio za Remix.

Radio sam sa verzijom Node-a 16.13 LTS i verzijom npm 8.1. Ovo je bitno napomenuti jer je deo dokumentacije na sajtu Remixa i dalje Node 14. Neki od paketa koje bih očekivao da postoje u starter-u nisu instalirani, poput eslint i prettier, pa ih bolje odmah instalirajte sami.

Moguće je da će vam se buniti linteri jer kroz celu dokumentaciju se koristi let umesto const ključne reči za deklarisanje promenljivih.

Krenite od /remix/arhitekta-net/app/root.tsx tu se nalazi navigacija, a ja sam header izdvojio u posebnu komponentu. Tutorijal koji sam pratio je developer blog.

Ako znate gde ćete raditi deploy vašeg bloga, tj. aplikacije, prilikom pokretanja npx create-remix@latest izaberite to odmah.

Ja sam pratio tutorijal i kada sam hteo da prebacim deploy na Netlify, ispostavilo se da treba ponovo da generišem ceo projekat, zatim kopiram app folder, a zatim je prestao blog da mi radi jer su putanje drugačije za Netlify.

Ono što morate ispraviti u slučaju da pratite ovaj tutorijal je da su importi drugačiji za Node 16

import * as fs from "fs/promises";

Ja sam koristio Tailwind CSS pa ukoliko i vi želite da radite isto preskočite deo kako se namešta Tailwind u Remix-u, već odmah konfigurišite Post CSS

postcss.config.js

module.exports = {
  plugins: {
    autoprefixer: {},
    tailwindcss: {config: './tailwind.config.js'}
  }
};

pa nastavite sa Tailwind configom.

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  mode: "jit",
  purge: [
    "./app/**/*.ts",
    "./app/**/*.tsx",
    "./app/**/*.mdx",
    "./app/**/*.md",
    "./remix.config.js"
  ],
  darkMode: "media", // or 'media' or 'class'
  theme: {
    extend: {
      fontFamily: {
sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [
    require("@tailwindcss/forms"),
    require("@tailwindcss/typography"),
    require("@tailwindcss/aspect-ratio"),
  ],
};

S obzirom na probleme na koje sam naišao prilikom prebacivanja tutorijala sa Remix App Server na Netlify, predložio bih da odmah odaberete CMS po vašoj želji na kojem ćete držati vaš sadržaj.

Ja sam se odlučio za GraphCMS jer se činio lakšim za podešavanje od Contenful i NetlifyCMS-a. Jednostavan je, besplatan i tutorial koji je napisan radi.

Otvaranje naloga na Netlify i GraphCMS je jednostavno, brzo i besplatno te ga preporučujem za lične blog sajtove.

Postoji dva načina postavljanja Remix aplikacije na Netlify. Ukoliko linkujete vašu aplikaciju tj. njen repozitorijum na Netlify automatski ćete postavljati novu verziju svaki put kada spojite kod na glavnu granu, a ukoliko napravite PR na glavnu granu dobićete privremeni link, na kojem možete pregledati da li sve radi kako treba. Takođe možete i ručno postaviti komandama iz README.md fajla:

$ npm run build
# preview deployment
$ netlify deploy

# production deployment
$ netlify deploy --prod

Dobavljanje vaših blog postova sa GraphCMS je jednostavno i dostupno u par linija koda:

const graphcms = new GraphQLClient(
  process.env.GRAPH_CMS_URL!
);

export const getProjects = async (
): Promise<{ projects: Project[] }> =>
  graphcms.request(GetProjectsQuery);

GRAPH_CMS_URL je varijabla koju dobijate od GraphCMS a treba da je postavite u podešavanjima na Netlify.

Da biste ove podatke učinili dostupnim na vašoj ruti, koristite loader funkciju:

// Loaders provide data to components and are only ever called on the server, so
// you can connect to a database or run any server side code you want right next
// to the component that renders it.
// https://remix.run/api/conventions#loader
export let loader: LoaderFunction = async () => {
  let projects = await getProjects();

  // https://remix.run/api/remix#json
  return json({
    projects
  });
};

a zatim u samoj komponenti na sledeći način:

export default function Projects() {
  let { projects } = useLoaderData<Project[]>()
  ...

Sve u svemu ovo je mlad framework koji obećava, možda blog i nije ono za šta je namenjen, ali svakako vredi probati naročito ako imate iskustva sa sličnim okvirima rada. Međutim ako pravite prvi put nešto slično, bolje probajte Next.js jer je stariji - što znači da je dokumentacija zrelija, zajednica veća, a tutorijali brojniji.