-
-
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 (“Prod”)
- Development (“Local Dev”)
Traditionally, all your app code resides in the Builder's JavaScript pane. This is what we refer to as the Prod mode and is the default.
But with the KTL, it is now possible to switch to Local Dev mode instantly to load your JavaScript and CSS code at run-time directly from your hard drive. This means you can now code and save on your workstation, without having to copy/paste the code to the Builder every time you want to test a change.
This mode enables you to work more efficiently by using your favorite code editor with all its bells and whistles, instead of the basic Builder's JavaScript pane editor. You must install Node.JS (https://nodejs.org) on your computer and run the NodeJS_FileServer.js script provided. Then, each time you save your code, all you have to do is refresh the browser to see the changes take effect immediately. In this mode, writing and testing code simply won’t ever get any faster, especially with an AI coding agent installed.
Another great advantage is that it opens the possibility of teamwork. Currently, only one developer at a time can edit the code. With the Loader and Node.JS file server, there is no conflict because each developer works with his own "sandboxed" local copy and pulls external changes whenever he/she chooses to do so.
Furthermore, and most importantly, you can simultaneously work on a production app, running officially released and tested code, while you run development code locally – yes, two different code revisions at the same time, without conflicting! This means that the classic method of going in Knack’s Builder to create a sandbox copy of your app to develop and experiment with new code is virtually not required anymore. When your app becomes huge, creating a copy can take a long time and may bust your record limit.
If you’re interested in peeking under the hood and understanding how the Dev/Prod mode is selected, see the file KTL_Start.js.
This is the traditional mode that we're all used to, i.e. when all the code resides in the Builder's JavaScript and CSS panes.
- Easier and faster setup, no need to install anything to use the KTL, except the 5 lines of the Loader
- Other users can always see your changes
- You can evaluate your code on any device, not limited to your workstation
- Slower than Local Dev mode and more tedious to work, due to the redundant merge/copy/paste/save sequence required each time you make a change.
- Can be risky if used in production (when the app is being used in a live and consequential context) since your development code always takes effect immediately.
To use this mode, you have two options:
- Use the default, basic, ready-to-use KTL setup
- 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
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.
This mode provides much faster code-save-test cycles and is typically used when you want to experiment with new code, with frequent code changes, and where you don't need to show your results to others until a milestone is reached. It also enables collaborative coding on the same app.
But the biggest advantage is that only you will see your code changes, since the app now fetches its code from your workstation instead of the Builder’s pane. All other users keep running the production code from the Builder.
The Local Dev mode requires the installation of Node.JS as 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 the full Prod code there without conflict.
It also requires that you download 5 KTL files from GitHub to your workstation. The procedure will be explained in a few sections down.
- Relieves from any stress related to experimental code
- Allows very fast "code-save-test" cycles
- Allows multi-developer coding collaboration without conflict
- Allows for both development and production code running at same time
- Requires a one-time Node.JS installation and setup and downloading 5 KTL files
- Other users or clients cannot see the updates until you merge all code and switch to Prod mode.
- You cannot evaluate your code on devices other than your workstation, running the file server.
With the Local Dev mode, it is now possible to have many developers write code independently on the same app since they are working on a “sandboxed” copy of their code. Of course, for other developers to see your changes, they need to pull/merge your new code with theirs, and vice-versa for you to see their changes. GitHub is excellent at that.
Install Node.JS (https://nodejs.org) on your workstation. Just the basic installation, no optional component is needed (Chocolatey).
Validate installation by typing node -v in a command prompt or terminal window. You should see the version number displayed.
To download the KTL files from GitHub to your workstation, you will first need to create the following folder structure in a drive and folder of your choice:
<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
“Your root” can be anything. For example, we use C:\code.
Next, you’ll need to go to GitHub’s KTL repo and download the 5 files that are in bold and followed by an asterisk.
There are a few ways to achieve this, but the best way to do so is to install GitHub and “clone” the repository locally. You will find this under the green “< > Code” button at top right of this page.
But if you don’t want to learn GitHub now and prefer a simpler, faster approach, you can just download each file individually by clicking on the file and “Download raw file” to it proper location. It’s a good idea to create the folder structure in advance.
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 computed based on your app. It’s the _filename token that should be searched for.
- 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
- Run the FileServer.bat utility. You will see a black screen with white text. This is a command prompt (or terminal) 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
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 nd@ctrnd.com
Normand Defayette