When the scenario starts, additional commands can be executed in the foreground or background.

Steps
Scenario with Editor Terminal UI
The Katacoda editor-terminal
UI Layout combines an Editor with a Terminal.
When changes are made to files using the editor, they are automatically sync'ed
to the user's home directory.
Index.json
The editor will display and interact with files relative to the uieditorpath
you set in the index.json
file for your scenario.
"environment": { "uilayout": "editor-terminal", "uieditorpath": "/root/example" }
If not specified, the uieditorpath
will default to the /root
directory.
You can pre-open a set of files in the editor by defining a files
array in the root
of the index.json
file.
"files": [ "app.js", "index.js" ]
Files open in the editor window are updated as you make changes in the editor. If the files do not already exist, the tabs will still open for them, but they will not be created until you have updated the content in the editor window.
You can include a path with these filenames. Paths should be given
relative to the uieditorpath
. Only files under that path will be
diplayed in the editor's directory tree.
The syntax highlighting for the editor is automatically inferred from the file
extension. This can be enforced by adding a uisettings
to your environment.
"environment": { "uilayout": "editor-terminal", "uieditorpath": "/root/example", "uisettings": "javascript" },
Helper Functionality
You can replace, prepend, append, and insert text into an open editor file.
Copy file to editor:
var http = require('http'); var requestListener = function (req, res) { res.writeHead(200); res.end('Hello, World!'); } var server = http.createServer(requestListener); server.listen(3000, function() { console.log("Listening on port 3000")});
The following snippet will prepend the contents of the editor:
console.log("Starting...")
Within the Markdown, include:
<pre class="file" data-filename="app.js" data-target="prepend">console.log("Starting...") </pre>
The following snippet will append the contents of the editor:
console.log("Finishing...")
Within the Markdown, include:
<pre class="file" data-filename="app.js" data-target="append">console.log("Finishing...") </pre>
The editor can copy to particular files based on the data-filename attribute:
console.log("Index.js here...")
Within the Markdown, include:
<pre class="file" data-filename="index.js" data-target="replace">console.log("Index.js here...") </pre>
Using the data-target="insert"
attribute you can instruct the editor to insert the text in a particular position marked by data-marker
attribute.
#TODO-insert
<pre class="file" data-filename="app.js" data-target="insert" data-marker="#TODO-insert"> console.log("Inserted value using the data-marker attribute...") </pre>
console.log("Inserted value using the data-marker attribute...")
New Files
Added files in the uieditorpath
will automatically be added to the tree in the
editor. A markdown extension also makes it easy to open new files in the editor.
Create a new file via the CLI:
touch newFile.js
The Markdown is:
`touch newFile.js`{{execute}}
This can then be opened:
newFile.js
The Markdown is:
`newFile.js`{{open}}
You’ll love Katacoda

Guided Path
Knowing what you need to know is the hardest part. Our guided pathways help build your knowledge around real-world scenarios.

Learn By Doing
The best way to learn is by doing. All our tutorials are interactive with pre-configured live environments ready for you to use.

Stay up-to-date
It's a competitive industry. Your skills need to keep up with the latest approaches. Katacoda keeps your skills up-to-date.
You’ll love Katacoda

Guided Path
Knowing what you need to know is the hardest part. Our guided pathways help build your knowledge around real-world scenarios.

Learn By Doing
The best way to learn is by doing. All our tutorials are interactive with pre-configured live environments ready for you to use.

Stay up-to-date
It's a competitive industry. Your skills need to keep up with the latest approaches. Katacoda keeps your skills up-to-date.