Kickstart Your Deno Web Project With The Opine CLI
Tags: deno, javascript, webdev, tutorial
Published: 2021-01-09 12:35:16

In this third [Opine](https://github.com/asos-craigmorten/opine) article we will be looking at how you blast through your website project setup by using the [Opine CLI](https://github.com/cmorten/opine-cli).

> **Prerequisites:** [Opine Tutorial Part 2: Creating A Website In Deno](https://dev.to/craigmorten/opine-tutorial-part-2-creating-a-website-in-deno-37o3)
>
> **Objective:** Start your own new website projects using the [Opine CLI](https://github.com/cmorten/opine-cli).

---

# Overview

This article will cover how you can create a basic template for a website using the [Opine CLI](https://github.com/cmorten/opine-cli) for Deno.

In fact, the template created will be remarkably similar to what we covered in the [previous article](https://dev.to/craigmorten/opine-tutorial-part-2-creating-a-website-in-deno-37o3) in this series! We recommend checking that out if you want experience building a project from scratch.

Because we have already covered project structure, and explained concepts such as views, we will focus primarily here on just how to bootstrap your project and the different options available.

# Using the Opine CLI

You can install the Opine CLI using Deno's [script installer commandlet](https://deno.land/manual/tools/script_installer):

```console
deno install -f -q --allow-read --allow-write --allow-net --unstable https://deno.land/x/opinecli@1.0.2/opine-cli.ts
```

This install command creates a small executable shell script wrapper which runs Deno using the specified CLI flags and main module. The generated script is then placed into the installation root's bin directory. The exact root directory used is determined by:

1. The `--root` flag, if provided;
1. The `DENO_INSTALL_ROOT` environment variable, if set;
1. `$HOME/.deno`.

> Note you will need to add the installation directory to your path in order to invoke the CLI with providing a full directory path.
>
> For example, add `export PATH="$HOME/.deno/bin:$PATH"` to your `$HOME/.bashrc`. Remember you will need to source this file or restart your shell / terminal for it to take effect!

You should now be able to execute the Opine CLI from any shell! :tada: :tada:

The Opine CLI has several options, the easiest way to view them all is using the `--help` or `-h` flag:

```console
> 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   
```

![Terminal window displaying the output of running the opine-cli --help command](https://dev-to-uploads.s3.amazonaws.com/i/05qclunuzjcloxta0sjq.png)
 
You can set up an Opine project in the _current directory_ you are in without any view engine, just plain old CSS, HTML and JS, by simply running the CLI without any options or flags:

```console
> 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

```

![Terminal window displaying the output of running the opine-cli command](https://dev-to-uploads.s3.amazonaws.com/i/7hswl97m5oty6cnwr31j.png) 

The CLI will list all of the files and directories that it creates, and at the end of the output explains how you can run the application.

You can also specify a directory to use by providing it to the CLI as an argument (it will be created if it does not exist):

```console
> 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

```

![Terminal window displaying the output of running the opine-cli command with a single argument of hello-opine to specify the directory to use](https://dev-to-uploads.s3.amazonaws.com/i/8b8f6o67eb7bggzeduec.png)

The Opine CLI also offers the ability to set up a view / template engine within your project. To add view logic, simply provide a `--view` or `-v` flag followed by a supported view engine.

For example, we can opt to use the [eta](https://github.com/eta-dev/eta) view engine in our Opine web project by running:

```console
> 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

```

![Terminal window displaying the output of running the commnd opine-cli opine-eta-example --view eta](https://dev-to-uploads.s3.amazonaws.com/i/dueanadq7xaa1hwdtma8.png)

Notice how by adding the `--view` flag the CLI has now introduced a `views` directory with our templates, and the `app.ts` is automatically set up to use the provided engine.

# Running the application

Let's use the CLI to build an Opine web application that uses [ejs](https://ejs.co/) view templates via the [dejs](https://github.com/syumai/dejs) Deno module, and put in a new `./opine-ejs-example` directory:

```console
> 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

```

Then we navigate to the new project directory:

```console
> cd opine-ejs-example
```

And now we can run our Opine web application using the provided command:

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

Let's load <http://localhost:3000/> in your browser to check out the app. You should see something like:

![Chrome browser opened on http://localhost:3000/ with a title of "Opine" followed by text saying "Welcome to Opine!"](https://dev-to-uploads.s3.amazonaws.com/i/wo6r8n7lqaxota8srhu3.png)

Amazing! :tada: :tada: You now have a working and running Opine application. Great Job!

---

_Inspiration:_ This article draws some pointers from the [Express web framework](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website) series.