Gatsby.js

• Quick start
• Installera Gatsby cli globalt
• Skapa ett nytt projekt
• Starta Gatsby servern samt GraphiQL servern
• Starta Gatsby för produktion

Gatsby är en react baserad, GraphQL-driven, statisk webbplatsgenerator. Vad betyder det egentline? Det väver samman de bästa delarna av React, webpack, react-router, GraphQL och andra front-end-verktyg i en mycket trevlig utvecklarupplevelse. Gatsby är mer än enbart en "statisk webbplatsgenerator". Den termen har funnits ett tag, men Gatsby är mycket mer som ett modernt ramverk än en gammal statisk webbplatsgenerator.

Gatsby använder GraphQL för att bygga sitt dataskikt. Vad menar vi med det? Gatsby är gjord för att samla in dina data oavsett var det är: Markdown, JSON, din favorit CMS som tex i mitt fall Strapi, tredjeparts API: er, vad som helst! Och vid "build" ögoblicket skapar det en intern GraphQL-server med all denna data. Så i dina react komponenter körs alla data förfrågningar vid byggtid från samma plats, på samma sätt genom GraphQL.

Det andra skälet är det rika ekosystemet i Gatsby. Gatsby har stor dokumentation och ett antal start projekt som hjälper dig att få en upp webbplats snabbt och massa nyttiga plugins. GraphQL-datainsamlingen genom plugin som GraphiQl ger dig genererade datamallar och filer som enkelt underlag för dina react komponenter.

Ett annat viktig skäl för just dig att välja Gatsby är att det är just skapar statiska sidor, alltså så behöver du inget server för produktion och kan lägga ut din site på tex Netlify

(Dokumentation om Gatsby.js hittar du här

Quick start

Se till att ha node installerad på din maskin innan denna installation.

Installera Gatsby cli globalt

npm install -g gatsby-cli

Ovanstående kommando installerar Gatsby CLI globalt på din maskin.

Skapa ett nytt projekt

gatsby new gatsby-site && cd gatsby-site

Ovanstående kommando installerar ett nytt Gatsby projekt med namnet gatsby-site och tar dig in i den nya foldern. Givetvis så döker du din projekt till det du vill.

Starta Gatsby servern samt GraphiQL servern

gatsby develop

Gatsby kommer att starta en "hot reload" av utvecklingsmiljö som är tillgänglig som standard på http: // localhost: 8000. Den kommer dessutom också starta GraphiQL på http://localhost:8000/___graphql som är din gränsnitt mot din databaskälla

Prova att redigera dina react sidor i foldern src/pages . Sparade ändringar kommer automatisk att ladda om i webbläsaren.

Starta Gatsby för produktion

gatsby build

Gatsby kommer att utföra en optimerad "build" för produktions för din webbplats och genererar statisk HTML och paket med JavaScript-kod för varje "route".