Introduction

Basic tips and quick guide that will help you to build this project.

For utilizing this Template, you would require fundamental comprehension of HTML, CSS and Javascript, if you don't mind give your inquiry a brisk Google or visit W3Schools as topic issues get top need.

Installation

Template build with advanced development tools such as Angular, Node.js and SCSS which provide automate painful or time-consuming tasks in your development workflow.

Basically this template made using Angular so you can get a dist/ folder after ng build. Use this folder to upload on your server.

Quick install

For utilizing this template you have do some basic steps that is mention below:

Node.js

For influencing utilization of this template to genuine power you'll require Angular, and for Angular you'll require Node.js to be installed on your system. Download the most recent rendition of Node.js from here.

Recommend Node 14 latest version.

Angular CLI

After installing Node.js, you need to install Angular on your system. Run this below command in Terminal/CMD of your system.

npm install -g @angular/cli

Installing dependencies

Open Terminal/CMD and run this command: npm install. This command will install the dependencies required for this template, for example build tools like SASS Compiler, Autoprefixer etc.

npm install

Running the environment

To start working with the template, just open Terminal/CMD in the template folder and run ng serve. This will start the work environment for you. Now you can edit the template in the Code Editor of your choice.

ng serve

Distribution folder

To make deployable template, just open Terminal/CMD in the template folder and run this command: ng build or ng build --prod. This will generate dist/ folder in your template directory.

ng build

Structure

Take a look common structure of this template.

File structure

Please see below a arrangement of files for this project. You can discover this project by this folders

theme/
├── e2e/
├── src/
|   ├── app/
|   |   ├── core/
|   |   ├── view/
|   |   ├── app-routing.module.ts
|   |   ├── app.component.html
|   |   ├── app.component.ts
|   |   └── app.module.ts
|   ├── assets/
|   |   ├── audio/
|   |   ├── images/
|   |   ├── scss/
|   |   └── vendors/
|   ├── environments/
|   ├── .htaccess
|   ├── favicon.ico
|   ├── index.html
|   ├── main.ts
|   ├── polyfills.ts
|   └── ...
├── .browserslistrc
├── .editorconfig
├── angular.json
├── karma.conf.js
├── package.json
├── tsconfig.app.json
├── tsconfig.json
└── tsconfig.spec.json

Their are two main folders in the src/ one is core/ and second one is view/. In core/ we are included all the core source like constant, services, directive, etc.. and view/ represent all pages and template layout components.