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 letest version 18.12.1.

• 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.

• Python

  Make sure to have the Python installed & running in your computer. If you already have installed Python on your computer, you can skip this step. Please use Python version 3 or if you are using python version 2 then make sure to run all the below commands with python insted of python3.

  For windows

  • Download python from windows store
  • Select the Python's version to download.
  • Click on the Install Now
  • Installation in Process

  For Linux

  • sudo apt update
  • sudo apt install python3

• Check Pip version

  py -m pip --version
upgread pip
py -m pip install --upgrade pip
  

• Virtualenv

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

  Virtualenv installation command for linux & mac os
  python3 -m pip install --user virtualenv
  Virtualenv installation command for Windows
  py -m pip install --user virtualenv
  

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.
python -m venv environment_name	Create Virtual Environment on linux & mac OS
py -m venv environment_name	Create Virtual Environment on Windows OS
source environment_name/bin/activate	Activate Environment on Linux & mac OS
environment_name\Scripts\activate.bat	Activate Environment on Windows OS
python -m pip install Django	Install Django on linux & mac OS
py -m pip install Django	Install Django on Windows OS

Note: Depending on your installation, you may need to use either pip3 or pip and for python you may need to use either python3 or python.

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:

Install few libraries
pip install django-allauth
pip3 install django-embed-video
pip install django-crispy-forms

Database Connectivity
Goto settings.py of main directory and update below settings.

DATABASES = {
    'default': {
    'ENGINE': 'django.db.backends.#databaseservername#',
    'NAME': 'Your Database Name',
    'USER' : 'Database User Name',
    'PASSWORD' : 'Your Password',
    'HOST' : 'Write down Host',
    'PORT' : 'Write down port',
    }
}

Run below command for database migration
For Windows: python manage.py migrate
For Linux: python3 manage.py migrate

To create a superuser run the below command
python manage.py createsuperuser
enter username Your Username
enter your Email Address
enter your Password
enter your Password again

To load static files
Go to Axetic/settings.py and add following command:-
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR,'static')]

python manage.py collectstatic

SMTP CONFIGURATION
EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
EMAIL_HOST = 'smtp.gmail.com'
EMAIL_PORT = 587
EMAIL_USE_TLS = True
EMAIL_HOST_USER = 'YOUR EMAIL ADDRESS'
EMAIL_HOST_PASSWORD = 'YOUR HOST Password'
DEFAULT_FROM_EMAIL = 'YOUR EMAIL ADDRESS'

Run below command for run your project
For Windows: python manage.py runserver
For Linux: python3 manage.py runserver

You can change or customize the left side navigation very easily.

How to add new menu items/change menu items?

In order to add, change or remove menu items from the left side navigation, simply edit in file templates/partials/sidebar.html. The change would reflect in all the html files automatically. We are using gulp-file-include which would actually take care of including the sidebar.html file content in the all html pages.

How to change width?

In order to change the width of left side navigation bar, open a file src/scss/_variables.scss and change the value of variable $sidebar-width. The default value is set to 240px.

Light Version

Keep your body element with data attribute data-layout-mode="light" E.g. <body data-layout-mode="light"> to have light layout.

Dark Version

Keep your body element with data attribute data-layout-mode="dark" E.g. <body data-layout-mode="dark"> to have dark layout.

RTL Version

To have rtl layout enabled, replace the reference of app.min.css to app-rtl.min.css and bootstrap.min.css to bootstrap-rtl.min.css and in the templates/partials/base.html file update the html tag like <html lang="en" dir="rtl">.

Multi Language Settings

Lets add french language.

• Create new file fr.json in the fr folder in the src/lang folder and copy the en.json file code in this file.
• Now you need to add the language in the src/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 = "static/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>