Skip to content

Developer setup

Pre-requisites

To start developing with JetQuery, it is recommended to have the following tools installed:

  • Google Chrome
    • Vue devtools (v5) - Required legacy version
    • Vue force dev
  • GIT: https://git-scm.com/
  • Visual Studio Code: https://code.visualstudio.com/ plugins:
    • Live Server (for live preview)
    • Format Selection as HTML - format html code in inline template
    • Highlight Matching Tag (highlight matching tag in HTML)
    • Vue Inline Template or Template Literals (for vs online)
    • HTML-CSS-Class-Completion
    • REST Client (for API testing)
    • SQLTools (Vs Code > Command palette > SQLTools: Format SQL)
    • XML Language Support by Red Hat (collapse XML elements)
    • CDATA SQL Highlighter (Format sql code in xml tags)
    • DRAW.IO
    • Markdownlint
    • vscode-icons-team.vscode-icons
    • adamraichu.pdf-viewer
    • adamraichu.docx-viewer
    • grapecity.gc-excelviewer

or extensions.json file

JSON
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
{
    // See https://go.microsoft.com/fwlink/?LinkId=827846
    // for the documentation about the extensions.json format
    "recommendations": [
        "ritwickdey.liveserver", //liveserver
        "adrianwilczynski.format-selection-as-html", //format selection as html
        "vincaslt.highlight-matching-tag", //highlight matching tag
        "julienetie.vscode-template-literals", //template literals
        "humao.rest-client", //rest client
        "mtxr.sqltools", //sql tools
        "marcinkotynia.cdata-sql-highlighter", //cdata sql highlighter
        "hediet.vscode-drawio", //drawio
        "zignd.html-css-class-completion", //html css class completion
        "davidanson.vscode-markdownlint", //markdownlint
        "redhat.vscode-xml", //xml
        "vscode-icons-team.vscode-icons",
        "adamraichu.pdf-viewer",
        "adamraichu.docx-viewer",
        "grapecity.gc-excelviewer"
    ]
}

Automation for local development

It's recommended to use the jq-cli script to automate the local development process. You can also generate the index.html file, using the following script:

Bash
1
2
3
4
5
# Prepare a list of local assets
find -type f -name "*.js" -o -name "*.css" > list.txt

# Send the local assets list and receive a prepared index file
curl -F "data=@list.txt" {{host}}/api/core/dev/client-index -o index.html

This script will generate an index.html file with all required files, both local and remote.

If files are duplicated in the local and remote locations, the following algorithm is applied:

  1. Verify if the file \css\site.css exists in the local development folder.
  2. Verify if the file \css\site.css exists on the server.
    • If it exists, verify if the minified version \css\site.min.css is available.
  3. Verify if the file \css\site.css exists in the application marked as UI.
    • If it exists, check if the minified version \css\site.min.css is available.