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

  1. Install the GhostText plugin for Google Chrome or Firefox
  2. Install Visual Studio Code
  3. In Visual Studio Code, go to Extensions
  4. 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
  5. Search the marketplace for GhostText, and choose the one published by Jason Tokoph
  6. If not already installed, you should Search the marketplace for Bookmarks, and choose the one published by Alessandro Fragnani
    • This is not required but is recommended
  7. Search the marketplace for Code Spell Checker, and choose the one published by Street Side Software
    • This is not required but is recommended

Using Visual Studio Code and GhostText

  1. Open up VS Code and press F1 (or Ctrl + Shift + P if you prefer to mash more more keys)
  2. Type in Enable GhostText
    • Note that in the future this will be at or near the top of the recently used list
  3. 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
  4. 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
  5. If editing a File it will auto-select the one and only text area and GhostText will open the linked file in VS Code
  6. 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
  7. Click the Ajax Save Source Code checkbox, or if editing a file click the Auto-Save checkbox
  8. 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)
  9. When you want to commit a save to the server, click in and out of the multiline textbox to trigger the auto save
  10. An Ajax prompt confirming the save will appear on the screen
    • If an error occurs on save, note that you will need to submit the form to get the detailed error report, and doing this will disassociate the file in GhostText so be sure to close the existing file and reactivate GhostText from Step 4 above
  11. When you are done editing:
    1. Uncheck the Ajax Save Source Code / Auto-Save checkbox
    2. Turn off GhostText in the browser
    3. Close the file in VS Code. If you save it first, or along the way, note you can recover these files in your user's Temp folder