Unzip the Downloaded File

After downloading the ZIP file of the template, follow these steps to get started:

Unzip the file: Extract the contents of the ZIP file to your preferred location. Upon extraction, you will see the following folder structure:

alpine: Includes the complete version of the HTML template with all pages and features.
nunjucks: Includes the complete version of the nunjucks template engine with all pages for quick development and customization.
documentation.html: A standalone file containing detailed documentation and usage instructions for the template.

In the nunjucks folder:

Upon opening the nunjucks folder, you will see the following folder structure:
- DashTail Alpine-nunjucks-full-version: Includes the complete version of the nunjucks template with all pages and features.
- DashTail Alpine-nunjucks-starter-kit: A minimal setup with essential files for quick development and customization.

In the alpine folder:

Upon opening the alpine folder, you will see the following folder structure:
- DashTail Alpine-full-version: Includes the complete version of the Alpine template with all pages and features.
- DashTail Alpine-starter-kit: A minimal setup with essential files for quick development and customization.
- DashTail Alpine-email-template: Contains Alpine templates specifically designed for email use.

If you would like to make minimal changes to the template, choose the Alpine folder. If you want to make significant changes to the template, choose the Nunjucks folder.

Prerequisites for Alpine Folder

Install Node.js to use http-server.

Get Started with DashTail Alpine

Follow these simple steps to set up and view the template:

Navigate to the Folder:
Open the DashTail Alpine-full-version directory in your terminal.
or for minimal setup open DashTail Alpine-starter-kit directory
Run the Server:
Use the following command to start the server:
```
npx http-server
```
View Your Project:
```
http://127.0.0.1:8080
```

Prerequisites for Nunjucks Installation

Nunjucks (opens in a new tab) is a powerful, fast, and extensible JavaScript templating engine inspired by Jinja2. It offers block inheritance, autoescaping, macros, and async control. With an 8KB gzipped runtime, it supports precompiled templates for high performance. It’s highly customizable with custom filters and extensions and works in Node.js and modern browsers.

Before diving into development with DashTail, ensure your development setup is equipped with Node.js and either npm or Yarn.

1. Node.js (>= 20.0.0)

To install Node.js, go to Node.js (opens in a new tab) and install the latest version.

2. npm (>= 5.5.1) or Yarn (>=1.5.1)

For downloading and installing packages, a package manager is required. You have the option to use npm (opens in a new tab) or Yarn (opens in a new tab) as your package manager. Our preference leans towards Yarn over npm. To verify the installation of npm or Yarn on your system, execute npm -v or yarn -v in a terminal or console window.

//npm
npm -v
 
//yarn
yarn -v

Start Installation:

Step 1

Open a console/terminal window and go to your workspace directory. Make sure you're in the same folder as the package.json file to run the commands.

Step 2

npm install or yarn install

Note: This command will take a while to execute and will install all the necessary libraries into the node_modules directory, enabling you to start developing.

Step 3

npm install -g gulp

Step 4

To start the project on your computer, set up the development server, and watch for any code changes, and type to watch for view of any css changes

///npm
npm run dev
 
///npm
npm run watch

This will start the development server and open your default browser to view the site. keep both running in separate terminal.

You can view the project at http://localhost:3000.

Getting Support Quick start