Get Started with Setting up the Development Environment

Developing in Moxie.Build on localhost give you the advantage of working with the template files natively. When working on procedures (MOX code) you need to access that through the Procedures page in the Admin area of a Moxie.Build system, if running the server on localhost or on a remote server. When running on a remote server, you can edit the template files via the Files page in the Admin area.

Installing Visual Studio Code and GhostText

Install the GhostText plugin for Google Chrome, the "New" Edge (Chromium based), or Firefox
1. Disable Memory Saver under the Performance tab of Chrome's settings. Otherwise, inactive tabs will loose their GhostText link. Alternatively, add all development sites, including localhost, to the Always keep these sites active list.
Install Visual Studio Code
In Visual Studio Code, go to Extensions
1. Search the marketplace for Moxie.Build, and choose the one published by Wisebox Solutions Inc.
  - This should auto-install the dependency of Show Functions, published by qrti
2. Search the marketplace for GhostText Official, and choose the one published by Federico Brigante
3. Search the marketplace for Bookmarks, and choose the one published by Alessandro Fragnani
  - This is not required but is recommended
4. Search the marketplace for Code Spell Checker, and choose the one published by Street Side Software
  - This is not required but is recommended
5. Search the marketplace for Compare Folders, and choose the one published by MoshFeu
  - This is not required but is recommended
Press F1, type "settings json" (without the quotes) and select Preferences: Open Settings (JSON)
- Replace the whole file with the example at the bottom of this page, or manually merge in the JSON data if you have preexisting preferences you'd like to keep

Using Visual Studio Code and GhostText

1. Using the Admin area of the Moxie.Build system, with DB Admin enabled on the System menu, browse to the Procedure or File you wish to edit
2. Click on the GhostText icon in the extensions area to the right of the address bar
  - Tip: You can associate custom keyboard combinations in your browser to activate extensions
3. If editing a File it will auto-select the one and only text area and GhostText will open the linked file in VS Code
4. If editing a Procedure, since there are multiple multiline textboxes on the page, you will need to click in the Source Code field first, and then GhostText will open the linked file in VS Code
  - Tip: Pressing Alt + S will select the Source Code field
5. As you edit the file in VS Code, the contents of the file in the browser will auto update character by character
  - Tip: The default autocomplete behavior for templates is on, and if you do not want to use a template press the Esc. key to cancel the template. You can change the autocomplete behavior, and any other setting, in your Settings JSON file: Press F1 in VS Code and search for Preferences: Open Settings (JSON)
  - Tip: In the current version at the time of writing, don't save the file in VS Code or it will disconnect GhostText
6. When you want to commit a save to the server, click the save button
  - An Ajax confirmation of the save with stats will appear when the save is complete
7. When you are done editing:
  1. First turn off GhostText in the browser or close that browser tab
    1. Then close the file in VS Code, optionally saving it first so that you could recover this file from your user's Temp folder if needed prior to the Temp folder being cleared by Windows

Local Files and Folders when running on localhost

Best practice is to create folders off the root of C:\ (or another data drive) named C:\Temp and C:\Work and to use those folders for running Moxie.Build on localhost. After creating these folders, set the folder security to not inherit from parent, and set the permissions to only include your account and system, both with full control.

It is safe to backup / zip / copy a running instance of Moxie.Build. However, continuous cloud sync solutions such as OneDrive, Dropbox, etc. should not be used with a running instance because they can be prone to corruption with the continuous high frequency changes and in some cases these systems lock the files they are syncing which will block access to Moxie.Build. For backup purposes, configure a backup schedule for your C:\Temp and C:\Work folders which will ideally first zip up the folders and then back those up to your cloud storage space within the corporate environment.

Spreadsheet Friendly Date Format

Moxie dates need to be formatted as YYYY-MM-DD.
If your computer's short date format doesn't match this, Excel will be unhelpful when working with date data and will display it in other formats like MM/DD/YYYY.
To change, click on the start button and immediately type "date & time settings"
Click on the date & time settings - system settings - button
Scrolling down in the Date & TIme screen there is a "Date, time & regional formatting" button
Scroll down and click the "Change data formats" button
and set the "Short Date" value to the YYYY-MM-DD setting

Visual Studio Code settings.json

Press F1, type "settings json" (without the quotes) and select Preferences: Open Settings (JSON). Replace the whole file with the below or manually merge in the JSON data if you have preexisting preferences you'd like to keep.

Note: workbench.colorTheme options include mox-classic (white background) and mox-dark

{
    "workbench.startupEditor": "none",
    "workbench.colorTheme": "mox-classic",
    "workbench.editor.tabSizing": "shrink",
    "files.associations": {
        "*.tmp": "mox",
        "*.ghosttext": "mox"
    },
    "[mox]": {
        "editor.tabCompletion": "off",
        "editor.insertSpaces": false,
        "editor.trimAutoWhitespace": false,
        "editor.wordBasedSuggestions": true,
        "editor.quickSuggestions": {
            "other": true,
            "comments": false,
            "strings": false
        }
    },
    "editor.multiCursorModifier": "ctrlCmd",
    "editor.insertSpaces": false,
    "editor.trimAutoWhitespace": false,
    "cSpell.language": "en,en-GB,en-US",
    "cSpell.enabledLanguageIds": [
        "asciidoc",
        "c",
        "cpp",
        "csharp",
        "css",
        "go",
        "handlebars",
        "html",
        "jade",
        "javascript",
        "javascriptreact",
        "json",
        "latex",
        "less",
        "markdown",
        "mox",
        "php",
        "plaintext",
        "pub",
        "python",
        "restructuredtext",
        "rust",
        "scss",
        "text",
        "typescript",
        "typescriptreact",
        "yml"
    ],
    "funcList": {
        "doubleSpacing": false,
        "filters": [
            {
                "extensions": [
                  ".mox",
                  ".tmp",
                  ".ghosttext"
                ],
                "native": "/^\\s*(Function|Method|Macro)\\s+[a-zA-Z0-9.+(){}\\/\\\\[\\],_\\-=:;!@#$%^&*|,.<>? ]*\\).*$/mg",
                "display": "/\\s*((Function|Method|Macro)\\s+[a-zA-Z0-9.+(){}\\/\\\\[\\],_\\-=:;!@#$%^&*|,.<>? ]+)/1",
                "sort": 0
            },
            {
                "extensions": [
                    ".c",
                    ".h"
                ],
                "native": "/^[a-z]+\\s+\\w+\\(/mgi",
                "display": "/\\S* +(\\w+)/1",
                "sort": 0
            },
            {
                "extensions": [
                    ".cpp",
                    ".hpp"
                ],
                "native": "/(?:^\\w+\\s+|^)\\w+[:]*\\w+\\(/mgi",
                "display": "/[\\S ]+(\\w+)/",
                "sort": 0
            },
            {
                "extensions": [
                    ".ts",
                    ".php"
                ],
                "native": "/(?:^|\\s)function\\s+\\w+\\(/mg",
                "display": "/\\s*function\\s+(\\w+)/1",
                "sort": 0
            },
            {
                "extensions": [
                    ".asm"
                ],
                "native": "/^\\w+:\\s*$/mg",
                "display": "/\\w+/",
                "sort": 0
            },
            {
                "extensions": [
                    ".ps1"
                ],
                "native": "/function\\s+\\w+-?\\w*\\s*{/img",
                "display": "/function\\s+(\\w+-?\\w*)/1i",
                "sort": 0
            }
        ]
    },
    "breadcrumbs.enabled": false,
    "cSpell.userWords": [
        "CUID",
        "Wisebox",
        "Zynim"
    ],
    "editor.fontSize": 12,
    "diffEditor.ignoreTrimWhitespace": true,
    "editor.columnSelection": false,
    "editor.minimap.enabled": false,
    "editor.wordBasedSuggestionsMode": "matchingDocuments",
    "files.autoSave": "afterDelay",
    "bookmarks.navigateThroughAllFiles": false,
    "security.workspace.trust.untrustedFiles": "open"
}

Installing Visual Studio Code and GhostText

Using Visual Studio Code and GhostText

Local Files and Folders when running on localhost

Spreadsheet Friendly Date Format

Visual Studio Code settings.json

Contact

Legal