Development Guide

Environment configuration

  1. Open terminal and run npm -v. Make sure that Nodejs is installed on your PC. If Nodejs is not installed on your PC Click here to download and install Nodejs.

  2. Open terminal and run composer. Make sure that Composer is installed on your PC. If not installed Click here to download and install Composer.

How to install Locally-


  1. Make sure you have met our server requirements.
    • PHP Version == 8.0 or 8.1
    • MySql Version >= 5.6+
    • Maria DB Version >= 10.2+
    • Node Version = 14.x to 16.x
    • npm Version >= 6.12
    • Composer
    • Symlink/storage permission
  2. Make sure that node.js and composer are installed in your local environment.
  3. Now, download the zipped file from CodeCanyon.
  4. Unzip the zipped file. Inside the unzipped folder you will get two folders "Documentation" and "upload"
  5. Move all the items from the "upload" folder to local directory from where you want to run the application
  6. Open the folder in the Editor (phpstorm, vscode etc.)

  7. Go to src folder and open .env file: update APP_INSTALLED=true

  8. Move the src/webpack.mix.js and src\package.json files one folder up (to the root).
  9. Update the src/webpack.mix.js file as:
    
const mix = require("laravel-mix");

/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/

mix.setPublicPath("./")
.setResourceRoot("../") // Turns assets paths in css relative to css file
    // .options({
    //     processCssUrls: false,
    // })
    .sass("src/resources/sass/payslip.scss", "css/payslip.css")
    .sass("src/resources/sass/core/core.scss", "css/core.css")
    .sass("node_modules/dropzone/src/dropzone.scss", "css/dropzone.css")
    .sass("src/resources/sass/_global.scss", "css/fontawesome.css")
    .js("src/resources/js/mainApp.js", "js/core.js")
.extract([
    // Extract packages from node_modules to vendor.js
    "jquery",
    "bootstrap",
    "popper.js",
    "axios",
    "sweetalert2",
    "lodash"
])

if (mix.inProduction()) {
    mix.version().options({
        // Optimize JS minification process
        terser: {
        cache: true,
        parallel: true,
        sourceMap: true
    }
});}
else {
    // Uses inline source-maps on development
    mix.webpackConfig({
    devtool: "inline-source-map",
    });
}

  10. Replace line No. 11 and 12 of the src\resources\sass\core\core.scss file with these lines

    @import url("../../../../node_modules/nouislider/distribute/nouislider.min.css");
    @import url("../../../../node_modules/animate.css/animate.min.css");
    @import url('../../../../node_modules/mapbox-gl/dist/mapbox-gl.css');;

  11. Open a terminal on the application root folder and run bellow commands
    • npm install
    • npm run dev or npm run watch

  12. Now navigate to src folder in command line and run the below commands
    • composer install
    • php artisan storage:link

  13. Create a local database from your local machine.

  14. Update the database credentials in the .env file.

    DB_CONNECTION=mysql
    DB_HOST=127.0.0.1/localhost
    DB_PORT=3306
    DB_DATABASE=your_database_name
    DB_USERNAME=your_database_user_name
    DB_PASSWORD=your_database_password

  15. After configure your database credentials. You have to run
    php artisan optimize:clear
    php artisan migrate:fresh --seed

  16. If you want some demo data in the application, please run
    php artisan db:demo

  17. In this src folder open another terminal and run the below command in order to complete all the queued jobs generated in the application
    php artisan schedule:work

  18. Run the below command on a terminal of the root directory of your application
    php -S localhost:8000 -t ./

  19. Then you will get a URL in terminal: ex (http://127.0.0.1:8000)

  20. Copy and paste the url on a browser.

  21. After that, your application should be ready to use locally.

Prepare local changes for server

  1. Go to src folder and open .env file: update APP_INSTALLED=false

  2. Zip all project files without node_modules folder.

  3. Upload this zip on the server and extract

    N.B: If you change anything and we change or improve to that specific area you might not able to get our future release. Because once you update then your changes will be gone.

Language Setting

  • If you would like to change any language, please copy the text from default.php to custom.php.
  • Please note, we may replace all other files except the custom.php in future updates.
  • This video shows you the steps on how to add/translate language in the Application.
  • Set Settings

    1. Go to "src/resources/lang" directory of the project.

    2. Add a new directory named on your new language's code name. Like, for Spanish language your directory name would be es, for Portuguese pt etc.

      For getting more language's code name you can go to "config/language.php" of the project. Here you can find all the possible language name and their code.

      N:B: Make sure the directory name is same as the valid code of your language.

    3. Copy all the files from "src/resources/lang/en" directory to your new language directory.

    4. Change "src/resources/lang/your-new-language-name/default.php" file. Just make the changes to the right sided text in your language.

      Suppose, you are adding a new language "Portuguese" in this app. So add a new directory named "pt" in "src/resources/lang".
      Copy all files from "src/resources/lang/en" directory to "src/resources/lang/pt".

      Then change the "default.php" file in this directory. Just make the changes to the right sided text in your selected language.
      There can be translations from English (such as, "add"=>"Add"). You should change this to portuguese (such as, "add" => "Adicionar").

      N:B: Do not change the word with clone(:) and curly bracket({}) like, :name or {name}. keep those word same and change the other word.
  • Update language

    1. Go to "Settings">"Application Settings".

    2. Select your preferred language from "Language Settings" section. Save the changes.

    3. If you would like to change any language, please copy the text from default.php to custom.php.

    4. Please note, we may replace all other files except the custom.php in future updates.

    5. After changing any text, please remember to clear cache from the Settings > Application settings by login as admin.

Add New Page

  1. Go to "src/resources/views/tenant/" directory of the project.

  2. Create a directory and name it similar to your feature.

  3. Add a new blade file with the following code. Make sure to change "default .preferred_title_of_this_page" to your page title which is added in default.php of your language file and change the "app-component-name" to your component name related to feature. (component create process described below) for app level use @extends('layout.app'), for brand level use@extends('layout.brand')

  4. Go to "app/Http/Controllers/Tenant" make a directory similar to your feature name. Create a controller class like "YourFeatureNameController", which is extends "App\Http\Controllers\Controller". create a function that returns view of the page you created before. Like for example:

  5. Go to "routes/" directory, check route files and subdirectories. You can create a .php file or you also can add in existing file which is similar to your feature. and create a route for your page like that-

  6. After successfully installed node_modules, To change something in vue component you need to go through the following steps -

  7. Go to "src/resources/js/tenant/Components/View" directory. make a directory related to your feature.

  8. Add a new .vue file. Like for example-

    Write your desired HTML code inside the component.

  9. Go to "src/resources/js/tenant/tenantComponent.js" file and register your vue component

    Save your changes. Make sure that your component is compiling successfully.

  10. Now hit your route in the browser and see the new page.

Change Color & Design

After installing the application locally you can modify and change any design by changing the files from resources/sass folder.
Change Brand Color
  1. Install the app locally.
  2. Go to resources/sass/core/_variables.scss file.
  3. On line 22 you can see $brand-color: #019AFF;
  4. Change the color code with your new color code.
  5. Build the css with npm
  6. And your application should appear with new brand color.