Almindelige stencil CLI faldgruber og hvordan man undgår dem

Stencil-kommandolinjegrænsefladen er et kraftfuldt værktøj, der giver dig mulighed for at forhåndsvise BigCommerce-temaændringer i realtid og sammenlægge dine filer i et zippet tema, du kan uploade til din butik. Det kan virke lidt afskrækkende at dykke ned i denne type udvikling, hvis du er ny til Stencil.

Som moderator i vores udviklerfællesskab har jeg bemærket, at brugere kan hænge på almindelige fejl under installationsprocessen. Det er let at integrere stencil-udvikling med din lokale opsætning og processer, når vi går over et par fælles faldgruber. Dette indlæg vil guide dig gennem at hoppe til at udvikle dig på stencil, og forhåbentlig hjælpe med at reducere den friktion, du måtte opleve under nogle af de vanskelige dele.

Har jeg brug for stencil CLI?

Først og måske vigtigst, skal du bestemme, om du faktisk har brug for at installere Stencil CLI for at foretage de designændringer, du ønsker i din butik. Arbejd smart, ikke hårdt!

Her er et par scenarier, der hjælper dig med at gøre denne beslutsomhed.

Spørgsmål: Jeg vil gerne vise kunderne et par flere produktdetaljer på mine produktsider - som garantioplysningerne - og mit nuværende tema viser ikke det oprindeligt. Skal jeg installere Stencil CLI?

A: Nej! Du kan tilføje referencer til yderligere Stencil-objektegenskaber som {{product.warranty}} i en skabelonfil uden at bruge CLI. BigCommerce har en indbygget temafileditor, som du kan bruge til at foretage de ændringer, du har brug for. Se vores guide til at få adgang til dine temafiler og foretage ændringer direkte i dit Dashboard her.

Se vores dokumentation for en liste over tilgængelige objekter og de dele, hvor de kan henvises. (Glem ikke at erklære nye objekter i en skabelon med frontmateriale.)

Spørgsmål: Skal jeg installere Stencil CLI for at oversætte min butik til yderligere sprog?

A: Ja, dette er en situation, hvor du bliver nødt til at installere CLI, fordi du tilføjer en ny json-oversættelsesfil, og disse skal samles i temaet.

Spørgsmål: Jeg vil gerne oprette et tilpasset sidelayout for visse produkter. Har jeg brug for CLI for at gøre dette?

A: Ja, oprettelse af en brugerdefineret skabelonfil kræver installation af Stencil CLI. Du har brug for CLI for at få vist den tilpassede skabelon med din produktside, mens du arbejder, og for at samle den nye fil med dit tema.

Installation af CLI

Vi har en ligetil guide til installation af CLI her i BigCommerce Dev Center, men jeg vil adressere et par punkter under installationsprocessen, hvor folk har en tendens til at sidde fast.

Installation af afhængigheder vha. Git og npm

Jeg har bemærket, at Windows-brugere undertiden vil nå et forbilledet, når det er tid til at trække stencil og dets afhængighed ned fra npm. For at gøre dette har du brug for et shell-kommandolinjeværktøj, der kan køre Unix-kommandoer. I vores dokumentation anbefaler vi Git Bash, men du kan bruge Powershell eller anden software.

Når du installerer Node med de afhængigheder, der kræves for at køre Stencil, vil du være i stand til at bruge kommandoen npm.

Tilpasning af et eksisterende tema

I vores dokumentation anbefaler vi, at du trækker den seneste version af Cornerstone ned fra GitHub, men det er ikke nødvendigt, hvis du allerede har et tema, som du vil ændre.

I dette scenarie skal du bare hente dit tema fra BigCommerce-betjeningspanelet. Under Storefront> Mine temaer skal du klikke på Download aktuelt tema for at downloade en zip-fil med dit tema.

(Bemærk: For Pixel Union-temaer skal du indstille BitBucket SSH-nøgler inden dette trin.)

Dernæst skal du pakke den ud og navigere til temabiblioteket i din shell

cd / files / my_theme

Kør derefter

npm installation

Vær opmærksom på afhængighedsversioner

Det nummer et, som jeg har observeret, at brugere løber ind ved installation af Stencil CLI er, at de ikke bruger den anbefalede version af Node eller Python, eller bruger ikke den seneste version af CLI i sig selv.

Hvis du downloadede CLI for et stykke tid siden, ville det nu være et godt tidspunkt at installere den nyeste version. For at sikre, at dette går glat, skal du køre

npm afinstallation -g @ bigcommerce / stencil-cli

derefter

npm installere -g @ bigcommerce / stencil-cli

Dette afinstallerer og geninstallerer CLI globalt.

Med Node har vi testet version 6.10.3 til 8.12.0. Hvis du bruger en tidligere eller senere version, kan du se en fejl som denne, når du kører stencil init - ud over en bådbelastning med sjove advarsler.

dødelig fejl: filen 'sass / context.h' ikke fundet

Okay, hvad nu? Først skal du nude din mappe til Node-moduler.

rm -rf node_moduler

Kør nu nvm install 7.6.0

Når den understøttede version er installeret, skal du køre nvm brug 7.60og dobbeltkontrol, at du bruger den ved at køre node -v. Du skal nu se, at du bruger den understøttede version

Brug nu node v7.6.0 (npm v6.8.0)

Endelig skal du køre npm installere dit temakatalog, og du skal være i stand til at installere alle Node-moduler, og når du kører stencil init, skulle du ikke se nogen fejl. Når du er klar til at begynde at udvikle, skal du køre stencil start!

Ofte stillede spørgsmål

Spørgsmål: Jeg ser en fejl, når jeg kører npm installation: npm ERR! Prøv at køre denne kommando igen som root / administrator.

A: Du vil prøve at tvinge en npm-cache ren som administrator:

sudo cache ren -f

Kør derefter npm installagain.

Spørgsmål: Jeg ser en 500-fejl, når jeg kører stencil init. Skyldes dette en fejl i slutningen af ​​BigCommerce?

A: Der er et par ting at kontrollere, når dette sker:

  • Sørg for, at du bruger en anbefalet version af Node
  • Du vil se denne fejl, hvis du ikke har et stencil-tema anvendt i din BigCommerce Store.
  • Dette kan være en bivirkning af at fremsætte en anmodning til en butik ved hjælp af en proxy-baseret domænetjeneste som Cloudflare eller Amazon Cloudfront. Hvis du har mistanke om, at dette er den skyldige, skal du redigere værtsfilen på din maskine for at kortlægge din localhost til BigCommerce IP i din butik.

Spørgsmål: Jeg var i stand til at installere og konfigurere Stencil, men jeg ser en 404-fejl, når jeg prøvede at forhåndsvise en brugerdefineret skabelonfil!

A: Årsagen til, at du får denne fejl, er, at du først skal oprette en tilsvarende side i din live-butik med den samme URL, som du kortlagte den tilpassede skabelon til i din .stencil-fil. Lad os for eksempel sige, at du allerede har redigeret .stencil-filen til at indeholde en nøgle til en brugerdefineret produktskabelon:

"produkt": {
”Alternativ-product.html”:”/ test-url /”
}

Du skal logge ind på kontrolpanelet i din BigCommerce-butik og oprette et produkt med URL / test-url /.

Afsluttende tanker

Når du nedbryder installationsprocessen, bliver det meget lettere at fejlfinde hvert trin. Hvis du stadig er tabt, har en bestemt opsætning eller bare vil chatte med andre udviklere om avanceret stencil-udvikling, skal du gå videre til Developer Community. Har du et interessant stencilprojekt, du arbejder på? Tweet @BigcommerceDevs - vi vil gerne høre om det!