Kickstart uw Deno-webproject met de Opine CLI

In dit derde Opine-artikel zullen we bekijken hoe u door de opzet van uw websiteproject schiet met behulp van de Opine CLI.

Overzicht

In dit artikel wordt beschreven hoe u een basissjabloon voor een website kunt maken met behulp van de Opine CLI voor Deno.

In feite zal de gemaakte sjabloon opmerkelijk veel lijken op wat we in het vorige artikel in deze serie hebben behandeld! We raden je aan dat te bekijken als je ervaring wilt hebben met het helemaal opnieuw opbouwen van een project.

Omdat we de projectstructuur al hebben behandeld en concepten zoals weergaven hebben uitgelegd, zullen we ons hier voornamelijk concentreren op het opstarten van uw project en de verschillende beschikbare opties.

De Opine CLI gebruiken

U kunt de Opine CLI installeren met behulp van Deno's scriptinstallatiecommando:

deno install -f -q --allow-read --allow-write --allow-net --unstable https://deno.land/x/[email protected]/opine-cli.ts

Deze installatieopdracht maakt een kleine uitvoerbare shellscript-wrapper die Deno uitvoert met behulp van de opgegeven CLI-vlaggen en hoofdmodule. Het gegenereerde script wordt vervolgens in de bin-map van de installatieroot geplaatst. De exacte hoofdmap die wordt gebruikt, wordt bepaald door:

  1. De --root vlag, indien opgegeven;
  2. De DENO_INSTALL_ROOT omgevingsvariabele, indien ingesteld;
  3. $HOME/.deno .

U zou nu de Opine CLI vanuit elke shell moeten kunnen uitvoeren! 🎉

De Opine CLI heeft verschillende opties, de gemakkelijkste manier om ze allemaal te bekijken is met behulp van de --help of -h vlag:

> opine-cli --help

  Usage:   opine-cli [option] [dir]
  Version: v1.0.2                  

  Description:

    Opine's application generator.

  Options:

    -h, --help                      - Show this help.                            
    -V, --version                   - Show the version number for this program.  
    -v, --view     <engine:string>  - add view <engine> support (ejs|eta)        
    -g, --git                       - add .gitignore                             
    -f, --force                     - force on non-empty directory   

U kunt een Opine-project opzetten in de huidige map je zit zonder enige view-engine, gewoon oude CSS, HTML en JS, door simpelweg de CLI uit te voeren zonder opties of vlaggen:

> opine-cli

   create : public/
   create : public/js/
   create : public/images/
   create : public/css/
   create : routes/
   create : public/index.html
   create : public/css/style.css
   create : routes/index.ts
   create : mod.ts
   create : routes/users.ts
   create : app.ts
   create : deps.ts

   run the app:
     $ deno run --allow-net --allow-read --allow-env mod.ts

De CLI zal een lijst maken van alle bestanden en mappen die het maakt, en aan het einde van de uitvoer wordt uitgelegd hoe u de toepassing kunt uitvoeren.

U kunt ook een map specificeren die u wilt gebruiken door deze als argument aan de CLI te verstrekken (deze wordt gemaakt als deze niet bestaat):

> opine-cli hello-opine

   create : hello-opine/
   create : hello-opine/public/
   create : hello-opine/public/js/
   create : hello-opine/public/images/
   create : hello-opine/public/css/
   create : hello-opine/routes/
   create : hello-opine/public/index.html
   create : hello-opine/public/css/style.css
   create : hello-opine/routes/index.ts
   create : hello-opine/mod.ts
   create : hello-opine/routes/users.ts
   create : hello-opine/app.ts
   create : hello-opine/deps.ts

   change directory:
     $ cd hello-opine

   run the app:
     $ deno run --allow-net --allow-read --allow-env mod.ts

De Opine CLI biedt ook de mogelijkheid om een ​​view/template engine op te zetten binnen uw project. Om weergavelogica toe te voegen, geeft u eenvoudig een --view . op of -v vlag gevolgd door een ondersteunde weergave-engine.

We kunnen er bijvoorbeeld voor kiezen om de eta view-engine te gebruiken in ons Opine-webproject door het volgende uit te voeren:

> opine-cli opine-eta-example --view eta

   create : opine-eta-example/
   create : opine-eta-example/public/
   create : opine-eta-example/public/js/
   create : opine-eta-example/public/images/
   create : opine-eta-example/public/css/
   create : opine-eta-example/routes/
   create : opine-eta-example/views/
   create : opine-eta-example/routes/users.ts
   create : opine-eta-example/public/css/style.css
   create : opine-eta-example/mod.ts
   create : opine-eta-example/routes/index.ts
   create : opine-eta-example/views/error.eta
   create : opine-eta-example/app.ts
   create : opine-eta-example/views/index.eta
   create : opine-eta-example/deps.ts

   change directory:
     $ cd opine-eta-example

   run the app:
     $ deno run --allow-net --allow-read --allow-env --unstable mod.ts

Merk op hoe door het toevoegen van de --view vlag de CLI heeft nu een views . geïntroduceerd directory met onze sjablonen, en de app.ts wordt automatisch ingesteld om de meegeleverde engine te gebruiken.

De applicatie uitvoeren

Laten we de CLI gebruiken om een ​​Opine-webtoepassing te bouwen die ejs-weergavesjablonen gebruikt via de dejs Deno-module, en een nieuwe ./opine-ejs-example invoeren map:

> opine-cli opine-ejs-example --view ejs

   create : opine-ejs-example/
   create : opine-ejs-example/public/
   create : opine-ejs-example/public/js/
   create : opine-ejs-example/public/images/
   create : opine-ejs-example/public/css/
   create : opine-ejs-example/public/css/style.css
   create : opine-ejs-example/routes/
   create : opine-ejs-example/routes/index.ts
   create : opine-ejs-example/routes/users.ts
   create : opine-ejs-example/views/
   create : opine-ejs-example/views/error.ejs
   create : opine-ejs-example/views/index.ejs
   create : opine-ejs-example/mod.ts
   create : opine-ejs-example/app.ts
   create : opine-ejs-example/deps.ts

   change directory:
     $ cd opine-ejs-example

   run the app:
     $ deno run --allow-net --allow-read --allow-env mod.ts

Vervolgens navigeren we naar de nieuwe projectdirectory:

> cd opine-ejs-example

En nu kunnen we onze Opine-webtoepassing uitvoeren met de opgegeven opdracht:

> deno run --allow-net --allow-read --allow-env mod.ts

Laten we http://localhost:3000/ in uw browser laden om de app te bekijken. Je zou zoiets moeten zien als:

Geweldig! 🎉 🎉 U hebt nu een werkende en actieve Opine-toepassing. Geweldig gedaan!

Inspiratie: Dit artikel haalt enkele aanwijzingen uit de serie Express webframework.