Q1Which one reads the line you type into the terminal, finds the program named at the front, and starts it?
What a Development Environment Is — Editor, Terminal, and Runtime
This article is part of the IT Foundations course, which builds up from scratch the practical IT knowledge you need at a minimum for programming and vibe coding.
You write in the editor, hand it over from the terminal, and the runtime runs it. Diagrams show these three roles, how the shell reads the line you type, and where it looks for the file.
This article covers the development environment.
A development environment is a collective name for three pieces of software: the editor, the terminal, and the runtime.
Putting all three into one screen gives you an integrated development environment (IDE), and Visual Studio Code, IntelliJ IDEA, and Xcode are well-known examples.
- What the three — the editor, the terminal, and the runtime — each do
- How the terminal's name differs from OS to OS, and how to read its screen
- How the shell reads the line you type, and which file it looks for
- How the runtime runs the app.js it is handed, one line at a time from the top
What a development environment is — the editor, the terminal, and the runtime
A development environment — the combination of software for writing source code and running it by giving commands — is a collective name for three things, not one piece of software with that name.
Your computer
Development environment (prepared once, then reused)
Editor
- You type the contents of app.js and save it
- Software such as Visual Studio Code
Terminal
- The screen where you type a line such as node app.js
- Installed with the OS from the start
Runtime
- Software named node or python
- You install it from the official site
my-app (the folder of the booking app you are building)
- app.js — the source code you wrote
- Image and configuration files go here too
- You create a separate folder when you build a different app
The three in the upper box can be reused once you install them.
The only thing you create anew each time is a folder like my-app in the lower box.
An editor is not just a screen for writing text; it can show the file list and the terminal side by side on the same screen.
When instructions say "code editor" or "IDE," you can take it as the same thing.
The editor screen
Left — the file list
- The files inside my-app are listed
- Clicking app.js opens it on the right
Center — where you type the text
- The contents of app.js appear here
- The file does not change until you save
Bottom — the terminal
- You can type node app.js here
- The same thing as a terminal opened separately
The three pieces of software are connected and run inside one computer.
The whole box is one computer, and the three divide the roles inside it.
The editor goes as far as creating the file; the runtime is what runs it.
The terminal is the entry point that tells the runtime to run this file, and the result comes out in that same terminal.
A development environment is a set of three pieces of software
A development environment is a name for three things together: writing, typing, and running.
The editor is where you write, the terminal is where you type, and the runtime is what runs it, and once you install these three you can reuse them for your next app as well.
The terminal — "Terminal" on Mac, "Command Prompt" on Windows
The terminal — the screen software where you type commands as text and receive results as text — comes installed with the OS from the start.
Its name, though, differs from OS to OS.
The names differ, but they all look the same.
You type one line into a screen of nothing but text, press Enter, and the result appears on the line right below.
The terminal screen
The prompt at the start of the line
- Symbols such as $, #, and >
- The name of the folder you are in often appears before it
The one line you type
- You type the text to the right of the prompt
- Nothing happens until you press Enter
The text that comes back
- Results and errors both appear as text on the lines below
- Once it has finished, the next prompt appears again
On a real screen you type one line to the right of the symbol at the start of the line, as below, and the result comes back underneath it.
pwd returns the location of the folder you are in, and ls returns what is inside that folder.
$ pwd
/home/you/my-app
$ ls
app.js package.json
The terminal is a screen for typing text and showing results.
What actually reads the line you type and decides which program to run is the shell running inside that screen — the program that reads the line you typed, finds the program named at the front, and starts it.
bash and zsh, which show up in instructions, are the names of such shells.
The shell treats the line you typed as two parts: the front and what follows.
The shell looks for a program using the node at the front, and hands the app.js that follows to that program.
It looks for app.js only inside the folder the shell currently has open, and that folder is the current directory.
Its name often appears just before the prompt at the start of the line — the symbol that shows input is being accepted.
Your computer
my-app (the folder the shell currently has open)
- my-app is shown at the start of the line in the terminal
- app.js is here, so node app.js runs
Downloads (a different folder)
- Even if app.js is here, node app.js does not run
- Typing cd my-app makes the upper box the folder you are in
The same node app.js gives a different result when the folder you are in differs.
app.js is kept inside my-app.
| The folder the shell is in | Where app.js is looked for | The result of node app.js |
|---|---|---|
| my-app | Inside my-app → found | app.js runs |
| Downloads | Inside Downloads → not found | Cannot find module |
| After cd my-app | Inside my-app → found | app.js runs |
Instructions put cd before a command in order to change where it looks.
When you write a destination after cd, the line that follows runs in the folder you moved to.
$ cd my-app
$ pwd
/home/you/my-app
What happens with the line you type is determined by what you wrote at the front.
What has been covered so far is the minimum for reading the commands that appear in instructions.
If you want to learn more deeply, the Linux Basics course has exercises where you type commands into a terminal in the browser.
If you start from Paths and moving between directories, the cd discussion in this article continues directly from there.
The shell is what reads the line you type
What reads the line you type is not the screen but the shell running inside it.
When something does not work, read the two cases apart: command not found means the name at the front was not located, and Cannot find module means the file that follows is not in the folder you are in.
The runtime — it runs the contents of app.js from the top
The runtime that the shell hands app.js to reads its contents one line at a time from the top and runs them in the order they are written.
When you run the next three lines with node app.js, only two lines appear on screen.
console.log("Hello");
const price = 1200;
console.log(price + " yen");
Only the lines that instruct it to display something appear on screen.
The runtime only reads one line at a time from the top
All the runtime does is read app.js one line at a time from the top and do what is written there.
Only the lines that instruct it to display something put text on screen, and the only thing it reads is the app.js the shell handed it.
QUIZ
Knowledge Check
Answer each question one by one.
Q2You typed node app.js but got a message that app.js cannot be found. What do you check first?
Q3When you type node app.js in the terminal, which one runs the contents of app.js from the top?