Document Sidebar

Overview

Welcome to Localhost! This guide provides everything you need to get started, including details on the file structure, build tools, components, credits, licensing, and frequently asked questions (FAQ). Dive in to learn more!

If you have any questions that are beyond the scope of this help documentation, please feel free to contact us with the links below and please don't forget to provide your website URL.

Contact Us Please note:
  • Support requests submitted on weekends or holidays will be addressed on the next business day.
  • Our support covers issues related to the features included in the template. However, assistance with debugging or custom modifications falls outside the scope of our support.
Thank you for your understanding.

File Structure

  • dist - All files are here compiled from src folder using Node.js / Vite . dist files are ready to edit as you intend or upload live to the server. Inside dist folder you'll find:
    • assets - folder contains all necessary files except the HTML files. Here are the files below:
      • css - contains all css files necessary for the template style.
      • fonts - contains self hosted fonts for Bootstrap icons.
      • img - contains all images for the template.
      • js - contains all script files used in the template.
    • All HTML files
  • src - Contains all template source files like HTML / SCSS / CSS / JS that are then processed (compiled) to dist folder. Inside src folder you'll find:
    • assets - folder contains all necessary files except the HTML files. Here are the files below:
      • src/assets/fonts - contains self hosted fonts for Bootstrap icons.
      • src/assets/img - contains all images for the template.
      • src/assets/js - contains main app.js and JS vendor files in vendor folder. If you don't wish to use all included plugins and scripts, just remove unwanted vendor JS files from src/assets/js/vendor then remove unwanted functions from src/assets/js/app.js and recompile.
      • src/assets/scss/vendor - Contains CSS vendor files. If you don't wish to use all included plugins, just remove unwanted vendor CSS from src/assets/scss/vendor and recompile.
      • src/assets/scss - Contains all project SCSS files that are compiled and minified in dist/assets/css folder.
    • templates - Contains All HTML files, partials and layouts.
      • layouts - is a common HTML layout that every page shares.
      • partials - Partials are a feature of Handlebars which allow you to inject HTML anywhere in a page or layout.
      • HTML - All HTML files
  • package.json - Includes the list of dependencies to install from npm.
  • postcss.config.js - Automatically adding vendor prefixes for CSS properties to ensure cross-browser compatibility.
  • vite.config.cjs - Configuration file for Vite forntend build tool. It contains all tasks to perform with vite. Learn more about it from official Vite Documentation

Working With Template

There are two ways to work with template.

  1. Direct Editing
  2. Adnvanced Editing

Direct Editing

For direct editing and less hassle just go to dist folder and edit HTML, CSS and Scripts or changes image as you required and your template is ready to live.

Adnvanced Editing

If you'd like to speed up development process with Node.js / Vite / SASS , then follow these steps:

  • Install Node.js if you don't have it yet.
  • Unzip the template package file named main and in the root project folder you'll get documentation & localhost , go to your command line tool and change directory to the localhost folder and run npm install OR you can open localhost folder in vscode editor and open terminal from vscode editor, now run npm install . This will install the npm packages listed in the package.json file.
  • You should now have the project files set up and all the npm packages installed.

Vite Commands

  • npm run build This command will fire build task which includes: creating dist folder, compiling and merging vendor libraries, JS task, SCSS and HTML.
  • npm run dev This command will launch dev server in localhost. It will watch changes of your HTML / SCSS / CSS / JS files and automatically compile them.
  • When you want to kill the server just hit Control + C

Quick Installation

  • Installing npm packages (Terminal command: npm install )
  • Running dev server (Terminal command: npm run dev )
  • Compiling and merging vendor libraries, JS task, SASS and HTML (Terminal command at the begining or end of the project once (Optional): npm run build )