#### Setup HTML

##### Introduction

We are using gulp which allows having complete automation for build flow. In case if you don't know Gulp then it's easy to use it. Gulp is a toolkit for automating painful or time-consuming tasks in the development workflow, so you can stop messing around while building any project. You can read it more about it here. Please follow below steps to install and setup all prerequisites:

##### Prerequisites

Please follow below steps to install and setup all prerequisites:

- Yarn

  Make sure to have the Yarn installed & running in your computer. If you already have installed Yarn on your computer, you can skip this step. We suggest you to use Yarn instead of NPM.

- Nodejs

  Make sure to have the Node.js installed & running in your computer. If you already have installed Node on your computer, you can skip this step if your existing node version is greater than 18.

- Gulp

  Make sure to have the Gulp installed & running in your computer. If you already have installed gulp on run command `npm install -g gulp` from your terminal.

- Git

  Make sure to have the Git installed globally & running on your computer. If you already have installed git on your computer, you can skip this step.

##### Installation

To setup the admin theme, follow below-mentioned steps:

- Install Prerequisites

  Make sure to have all above prerequisites installed & running on your computer

After you finished with the above steps, you can run the following commands into the terminal / command prompt from the root directory of the project to run the project locally or build for production use:

Command | Description
--- | ---
`yarn install` | This would install all the required dependencies in the `node_modules` folder.
`gulp` | Runs the project locally, starts the development server and watches for any changes in your code, including your HTML, javascript, sass, etc. The development server is accessible at http://localhost:3000.
`gulp build` | Generates a `/dist` directory with all the production files.

##### Multi Language Settings

Lets add french language.

- Create new file fr.json in the fr folder in the `src/assets/lang` folder and copy the en.json file code in this file.
- Now you need to add the language in the `src/assets/js/lang/jquery.multiLanguage.js` file. In the function setLanguage add the "else if" condition as below and make sure to add french.jpg file.

          else if(lang=='fr') {
              document.getElementById("header-lang-img").src = "assets/images/flags/french.jpg";
          }

- You can simply use in the HTML file to convert the language text just add the attribute "key" to the parent div or any HTML tag. Example: <div key="t-title">This is title.</div>

##### Tips

SCSS: We suggest you to do not change any scss files from the assets/scss/custom folders because to get new updates will might be break your SCSS changes if any you have made. We strongly suggest you to create new custom.scss file and use that instead of overwrite any theme's custom scss files.