Bygg en snabb reaktiv blogg med svelte och sapper

Sapper är en ram byggd ovanpå Svelte. Det fokuserar på hastighet ut ur lådan med serveråtergivning, länkförspänning och möjligheten att skapa servicearbetare. Kombinerat med svelte är slutresultatet en mycket anpassningsbar, blixtnedslag med ett litet fotavtryck.

I den här handledningen använder vi Sappper för att bygga en lätt bloggningsplats med Svelte-komponenter (se vår Hur man startar en blogg inlägg för några mindre tekniska tips om bloggar). Svelte är en ram med en skillnad. Det analyserar koden vid sammanställningstid och skapar en uppsättning moduler i Vanilla Javascript, som undviker behovet av en körtid. Om du behöver ytterligare hjälp med layouter, kolla in vårt inlägg om hur du får det perfekta Webbplatslayout . Eller för andra alternativ, se dessa topp Webbplatsbyggare och kom ihåg, du måste också få din webbhotell Service på punkt.

Ladda ner de handledningsfiler på Filsilo här

01. Installera beroenden

För det första måste vi hämta och installera beroenden. Det är beroende av att Svelte ska fungera och kräver en annan ram att bygga servern, men resten beror på att programmet byggs. I det här fallet behöver vi några paket som hjälper till att extrahera markdown-filer senare.

Ladda ner tutorialfilerna (ovan), hitta dem på kommandoraden och installera beroenden.

> npm install

02. Bygg ut servern

Sapper är byggt i två delar - klientsidan och serverns återgivning av den ramen. Detta hjälper till att få den extra hastigheten för dem på långsammare nätverk. Den är byggd med nod, vilket gör det möjligt för Sappper Middleware att göra all den tunga lyftningen för oss.

Öppna server.js och skapa servern med Express. Med hjälp av sina rekommendationer inkluderar vi kompression att krympa de filer vi skickar och sirv att betjäna statiska filer.

 Express ()
  .använda sig av(
    kompression ({tröskel: 0}),
    Sirv ("statisk", {dev}),
    sapper.middleware ()
  )
  .Listen (hamn); 

03. Montera programmet

På klientsidan måste vi berätta för Sappper där man ska montera programmet. Detta liknar reaktion dom framställa eller vue $ mount metoder. Inuti client.js, börja sappper och montera den till roten & lt; div & gt; element. Det här elementet ingår i mallfilen, som vi kommer senare.

 Import * som SAPPER från "@ sappper / app";
sapper.start ({
  Mål: Document.getElementByID (
   "rot")
}); 

04. Starta utvecklingsservern

Med den grundläggande servern och klientfilerna kan vi starta utvecklingsservern. Detta sparkar av en byggnad av servern, klient- och servicearbetare, och den startar på port 3000 som standard. När en fil ändras kommer den att bygga upp den del av den ansökan som ändrats.

Kör servern på kommandoraden. Håll det här fönstret öppet medan du utvecklar webbplatsen.

 & gt; npm kör dev 

05. Skapa en serverrutt

Allting i katalogen "Rutter" kommer att bli en rutt för applikationen. Filer med .js Förlängning blir vad som kallas serverrutter. Dessa rutter har ingen UI, men begär istället av ansökan att hämta data. I vårt fall använder vi dem för att ladda upp blogginlägg.

De Rutter / Blog / index.json.js filen kommer att skapa /Blog.json slutpunkt på vår server. Importera blogginlägg och skapa några JSON från dem.

 Importera inlägg från "./_posts.js";
CONST INNEHÅLL = JSON.StRingFIFY (
  posts.map (post = & gt; ({
    Författare: Post.author,
    Bild: Post.image,
    Titel: Post.title,
    Slug: post.slug
  }))
); 

06. Återställ blogginlägget

Serverrutter Exportfunktioner som motsvarar HTTP-metoder. Till exempel, för att svara på en get-förfrågan, skulle vi exportera en funktion som heter skaffa sig från serverns rutefil. Skapa en skaffa sig Funktion som svarar med de data som vi samlade i föregående steg i ett JSON-format. Öppen http: // localhost: 3000 / blog.json i webbläsaren och kontrollera inläggen kommer igenom.

 Exportfunktion Få (Req, Res) {
  res.writehead (200, {
    "Innehållstyp": "Application / JSON"
  });

  res.end (innehåll);
} 

07. Skapa indexsida

Sidor i Sapper är vanliga Svelte-komponenter. Varje komponent är en enda fil med a .svelte Förlängning och innehåller all logik och styling för hantering av sig själv. Någon javascript den här komponenten behöver springa kommer att leva inuti a & lt; script & gt; Tag - precis som någon HTML-sida.

Inuti Rutter / Index.svelte , importera ett par andra Svelte-komponenter som vi kan använda för att bygga den här sidan. Exportera en inlägg variabel som vi kommer att fylla i senare.

 & lt; script & gt;
  Importera behållare från
   "../Components/container.svelte";
  Importera postsummary från
   "../Components/postsummary.svelte";
  export låt inlägg
& lt; / script & gt; 

08. Hämta blogg postdata

Med sidan kan vi börja ta med blogginlägg (du kanske vill backa upp dem molnlagring ). Vi måste göra detta så snart sidan är laddad. För att servern ska vara medveten om detta och sedan begära dessa data när det gör sidan, måste den gå i en separat & lt; script context = "modul" & gt; märka.

På servern kommer Sapper att leta efter en preload Funktion och vänta på att den ska slutföras innan du visar sidan. Här fyller vi på inlägg variabel från föregående steg.

 & lt; script context = "modul" & gt;
  Exportera Async Funktion Preload () {
    const res = väntar
     this.fetch ("blog.json");
    Const Data = Await Res.json ();
    returnera {inlägg: data};
  }
& lt; / script & gt; 

09. Visa inläggssammanfattning

I svelte är variabler som är reaktiva. Det innebär att våra komponenter också kommer att uppdateras. Som den inlägg Variabeln håller nu en rad blogginlägg, vi kan slinga över dessa och visa dem.

Vi kan göra det med hjälp av en #varje blockera. Dessa kommer att upprepa vad som är inne i fästena för varje objekt i en array. På botten av komponenten, utanför alla taggar, lägg till HTML för att visa inläggen.

 & lt; container & gt;
  & lt; ul & gt;
    {#each inlägg som post}
      & lt; li & gt;
        & lt; postsummary {... inlägg} / & gt;
      & lt; / li & gt;
    {/varje}
  & lt; / ul & gt;
& LT; / Container & GT; 

10. Stil behållaren

Vi kan använda komponenter för att innehålla någon upprepad logik och använda dem var de behövs - Styles ingår. De & LT; Container & GT; Komponent gör det för närvarande inte, men vi kan använda det för att ge en maximal bredd till innehållet inuti det.

Öppna Komponenter / Container.svelte , och lägg till några stilar inuti a & lt; stil & gt; märka. Vilka stilar som vi ansöker inuti en komponent är scoped till den komponenten, vilket innebär att vi kan använda en generisk väljare.

 & lt; stil & gt;
  div {
    Marginal: 0 Auto;
    Padding: 0 1rem;
    MAX-Bredd: 50REM;
  }
& LT; / Style & GT; 

11. Definiera A & LT; Slot & GT;

Om en komponent är utformad för att vara föräldern till andra komponenter, behöver vi ett sätt att skicka dessa komponenter. De & lt; Slot & GT; Element gör det bara, och kan placeras var som helst som är meningsfullt inuti en komponents markering.

Med & LT; Container & GT; , vi förpackar innehållet i en stilad & lt; div & gt; . Använda sig av & lt; Slot & GT; inuti & lt; div & gt; att låta allt annat genom.

 & lt; div & gt;
  & lt; Slot / & GT;
& lt; / div & gt; 

12. Expose Postsummary Props

Inte alla komponent kommer att hämta vissa data. När vi laddar in stolparna från huvudsidan kan den vidarebefordras till de komponenter som det gör genom sina attribut.

Öppen Komponenter / Postsummary.svelte och definiera några attribut på toppen av filen. Dessa fylls i av spridningsoperatören som vi lagt till i steg 09.

 & lt; script & gt;
  export låt författaren
  Exportera låt bilden;
  Exportera låt slug
  Exportera låt titeln;
& lt; / script & gt; 

13. Visa blogg efter sammanfattning

När attributen är befolkade, nås sedan som någon annan variabel. Genom att ha separata attribut för varje del av postsammanfattningen gör vi markeringen enklare att läsa.

På botten av komponenten lägger du till en html för att skapa sammanfattningen. Klasserna relaterar till de fördefinierade stilarna.

& lt; artikel & gt;
& lt; div class = "post-image" style = "
 Bakgrund-Bild: URL ({Bild}) "/ & GT;
& lt; Div Class = "Body" & GT;
  & lt; Div Class = "Författarbild" & GT;
    & lt; img src = {author.image}
     alt = {author.name} / & gt;
  & lt; / div & gt;
  & lt; div class = "om" & gt;
    & lt; h1 & gt; {titel} & lt; / h1 & gt;
    & LT; Span Class = "Byline" & GT; av
     {author.name} & lt; / span & gt;
  & lt; / div & gt;
& lt; / div & gt;
& lt; / Artikel & GT; 

14. Länk till blogginlägg

Till skillnad från liknande ramar som Next.js arbetar Sapper med vanliga förankringslänkar. På byggtiden kan det upptäcka interna länkar, och också att göra egna optimeringar.

Uppdatera markeringen från föregående steg genom att förpacka det i en länk. Det finns inget behov av att du skapar mallsträngar för att komponera den sluggade webbadressen.

 & lt; a rel = "prefetch" href = "/ blog / {slug}" & gt;
  & lt; artikel & gt; ... & lt; / artikel & gt;
& lt; / a & gt; 

15. Hämta ett inlägg av slug

Sapper kan skapa sidor baserat på URL-parametrar. I vårt fall länkar vi till / blogg / slug, vilket innebär att det gör komponenten på /routes/blog/[sLug].svelte .

Inuti den komponenten, hämta bloggdata som vi gjorde för indexsidan. De parametrar Objektet innehåller parametrarna från webbadressen, som i det här fallet är slug.

 & lt; script context = "modul" & gt;
  Exportera Async-funktion
   Preload ({Params}) {
    const res = väntar på det här.
     `Blog / $ {Params.slug} .json`);
    Const Data = Await Res.json ();
  }
& lt; / script & gt; 

16. Fel om posten inte hittas

Till skillnad från indexsidan finns det en chans att det inte finns ett bloggpost på webbadressen. I så fall bör vi visa ett fel. Tillsammans med hämta , den preload Metoden innefattar också fel som ändrar svaret på en fel sida istället.

I slutet av preload-metoden, visa ett fel om det inte finns något inlägg. Annars ställ in posta variabel för sidan.

 om (res.status === 200) {
  returnera {post: data};
} annars {
  This.Error (res.status,
    data.message);
} 

17. Visa blogginlägget

Med de data som hämtats kan vi nu visa inlägget på sidan. På samma sätt som den postsummariska komponenten visar vi varje del av postens innehåll inuti lockiga fästen. På botten av komponenten lägger du till några markeringar som visas på sidan.

 & lt; artikel & gt;
  & LT; Container & GT;
    & lt; Div Class = "Titel" & GT;
      & lt; h1 & gt; {post.title} & lt; / h1 & gt;
      & lt; Div Class = "Byline" & GT; av
       {post.author.name} & lt; / div & gt;
    & lt; / div & gt;
    & lt; img class = "post-image" src = {post.image} alt = "" / & gt;
     {post.html}
  & LT; / Container & GT;
& lt; / Artikel & GT; 

18. Visa istället för HTML

Titta på sidan nu, allt visas korrekt bortsett från det faktiska inlägget. Markddown-omvandlingen genererar HTML, men vi ser det som skrivs ut som text på posten själv. Sapper har en HTML-parser som är inbyggd för det här fallet. Placering @html Framifrån kommer den att använda denna parser.

 {@ html post.html} 

19. Ange sida & lt; titel & gt; värde

Vår blogg fungerar korrekt, men det finns ett par förändringar som behövs för att avsluta det. En av dem är att uppdatera & lt; titel & gt; På sidan för att relatera den flik som den visas i.

Svelte stöder a & lt; Svelte: Head & GT; element, som injicerar något inuti det i & lt; huvud & gt; av sidan. Använd detta för att ställa in titeln på posten som & lt; titel & gt; .

 & lt; Svelte: Head & GT;
  & lt; titel & gt; {post.title} |
   SAPPER BLOG & LT; / Titel & GT;
& LT; / Svelte: Head & GT; 

20. Uppdatering av & LT; Titel & GT;

Varje sida går igenom en mall för att stämpla ut html för resten av sidan. Det är här någon inställning som teckensnittsimport och metataggar skulle anges. Öppna upp template.html, och lägg till i en krok för innehållet i & lt; Svelte: Head & GT; element från föregående steg. Lägg till det här strax före stängningen & LT; / Head & GT; märka.

 & lt; Head & GT;
  [...]% sappper.head%
& LT; / Head & GT; Det sista vi behöver lägga till är en layout för bloggen. I stället för att förpacka varje sida i en komponent, kommer Sapper att leta efter en "_layout.svelte" -fil för att göra det här jobbet för oss.
Inuti _layout.svelte, importera & lt; header & gt; Komponent och visa det på toppen av varje sida. Det ger en bekväm länk tillbaka till hemsidan. 

21. Lägg till permanent rubrik

Det sista vi behöver lägga till är en layout för bloggen. I stället för att förpacka varje sida i en komponent, kommer Sapper att leta efter en _layout.svelte fil för att göra detta jobb för oss. Inuti _layout.svelte , importera & lt; header & gt; Komponent och visa det på toppen av varje sida. Det ger en bekväm länk tillbaka till hemsidan.

 & lt; script & gt;
  Importera rubrik från
   "../Components/header.svelte";
& lt; / script & gt;
& lt; Main & GT;
  & lt; rubrik / & gt;
  & lt; Slot / & GT;
& LT; / Main & GT; 

Detta innehåll uppträdde ursprungligen i webbdesigner.

• Webkomponenter: Den ultimata guiden
• 30 Chrome Extensions för webbdesigners och devs
• 52 Webbdesignverktyg som hjälper dig att arbeta smartare 2019