-
-
Notifications
You must be signed in to change notification settings - Fork 8
Advanced Development Modes
When using the KTL, there are two development modes of operation: Production and Local.
We will refer to this as Prod for short.
Traditionally, all your app code lives in the Builder's JavaScript and CSS panes. This is the default method we all know, where editing is done either directly in the built-in editor, or copy/pasted back and forth to/from your favorite workstation’s editor, like Visual Studio Code or Notepad++.
In Local mode, it is now possible to load your JavaScript and CSS code at run-time directly from your hard drive instead of from the Builder. This applies only to you, the developer, and no one else sees your changes. You can now relax and take your time to test anything new, without the fear of disrupting the system.
This was initially created for coders. But with the advent of AI tools, if you don’t have coding experience but would like to give it a try, this is for you.
- Instant changes: You can now edit your code with your favorite editor, save it and refresh the browser to see the changes immediately. Writing and testing code simply can’t get any faster
- Simultaneous codebases: While you work on experimental code in Local mode, the Prod code from the Builder keeps running in the field. Yes, two different code revisions running at the same time without conflicting! Your users will not be affected and will not see your changes until you manually copy/paste/save your new code back to the Builder.
- Teamwork: In Prod mode, only one developer at a time can edit the code. Local mode is designed to eliminate any potential conflicts because each developer works with his own local "sandbox" copy and only pulls external changes when desired
- No more app copies: Creating copies of an app as a backup to develop and test new code is not required anymore. This can also cause your record limit to be exceeded.
The Local mode requires the installation of free, open-source Node.JS runtime environment. It’s used to create a basic local file server that the Loader uses to fetch the KTL files and your app's code.
The Builder's JavaScript pane only needs to contain the 5 lines of the Loader code. You can also leave your existing code there without conflict.
Be sure to place your code after the line:
//Your App-specific code goes here...
And before the last curly bracket.
See this section for details: Customizing Features · cortexrd/Knack-Toolkit-Library Wiki
Install Node.JS (https://nodejs.org) on your workstation. Just the basic installation, do not include Chocolatey.
Validate installation by typing node -v in a command prompt or terminal window. You should see the version number displayed.
The following folder structure is required to use Local mode:
“Your root” can be anything. For example, we use C:\code.
<Your root>
├── KnackApps
│ ├── YourApp1
│ │ ├── YourApp1.js
│ │ └── YourApp1.css
│ └── YourApp2
│ ├── YourApp2.js
│ └── YourApp2.css
└── Lib
├── KTL
│ ├── KTL.js *
│ ├── KTL.css *
│ ├── KTL_Defaults.js *
│ ├── FileServer.bat *
│ ├── KTL_Loader.js
│ ├── KTL_Start.js
│ ├── Docs
│ └── NodeJS
│ └── NodeJS_FileServer.js *
└── SomeOtherCoolLib
└── CoolLibCode.js
The files marked by an asterisk are those that are minimally required to use the Local mode.
A helper script is provided to create the folders and download those files for you automatically.
Download it to your root folder: Knack-Toolkit-Library/NodeJS/initLocalMode.js at dev · cortexrd/Knack-Toolkit-Library
Open a terminal (cmd.exe) and navigate to your root folder, then run this:
node initLocalMode.js
The required folders and files should show up as above.
If you take a few seconds to analyze the folder structure, you will notice the KnackApp folder. This is where you’ll add your own app files.
Each subfolder will contain a copy your app’s code: the JS file (required) and the CSS file (optional). If the CSS file is not found, the Builder’s code will be used.
The folder name and the 2 filenames it contains must match.
Create the 2 files and copy the code from the Builder to them.
For the JS file, DO NOT include the loader, otherwise you’ll end up with two conflicting running instances.
Upon startup, the KTL will check out the App Name as found in the Builder’s Settings page and try to load the JS and CSS files with the same name.
By default, the name of each folder and its 2 files are expected to match the App Name, but this is not mandatory. If you prefer to use a different (ex: shorter) filename, you can type it in the popup that will ask you to provide an alternate name for the unfound file. The only important criteria are that all folder and file names match.
If ever you eventually need to modify that name, it is possible to do it by deleting this key in the local storage and hit refresh:
xxxxxxx_yyyy_fileName: current_name
The x and y values will vary and are generated based on your app. It’s the _filename token that should be searched for.
- Run the FileServer.bat utility. You will see a black screen with white text. This is a terminal (command prompt) showing the script’s console output.
- As an alternative to the batch file, you can also open a command prompt or a shell, go to the code folder (assuming default folder structure) and launch node NodeJS_FileServer.js.
- Each time you refresh your app's page, you will see logs showing the path and file name requested.
- Open a browser to your Knack app.
- Check console logs to see if all is looking good.
Once you’ve mastered both modes, you’ll typically spend 95% of the time in Local Dev mode for its efficiency and speed, and 5% in Prod mode to show updates to your client.
To switch modes, see this page: Troubleshooting KTL and Switching Modes
Ignore the Dev and Beta buttons, as these are only used by the maintainers to debug the KTL code.
If you want to customize the KTL’s behavior or disable some features, go see this page: Customizing Features
Our collaborator Carl Holmes has created a series of great video tutorials that will walk you through the setup: CH Project - KTL Tutorials
Feel free to “borrow” all the functions and tricks you can find in the KTL! You can copy chunks of it to your favorite AI tool and ask it to explain it to you or create a modified copy that you will use in your code to match your needs.
If you’re interested in collaborating with the KTL project, let us know and we’ll add you to our collaborator’s list. You can then submit your fixes and updates.
Send your request at [email protected]
Normand Defayette