Lately the opportunity arose to demonstrate how the Windows (10) Command Prompt (aka CMD, acronym for Windows Command Processor) works and how to get around one’s Windows computer. CMD is a command line interface, and a way of interacting with a computer directly using text commands.

Early PC operating systems, like MS-DOS, operated only through command-line interfaces. There was no mouse, window management, or graphical user interface (GUI) elements like we take for granted today.

CMD is also a shell. A shell allows the user to give commands to the computer. Early versions of Windows ran commands through the MS-DOS Prompt, which was the name for Command Prompt then.

Starting with Windows XP, Windows broke away from MS-DOS. However, as is even indicated here, we can still use the Command Prompt to interface with our computers directly instead of clicking through various menus. The Command Prompt can also run batch files, which are a great way to automate tasks. We control both our Windows and Mac computers via the Command Prompt/Terminal.

What is great about using the Command Prompt (or Terminal on a Mac) is that it cuts down the steps/time it takes to complete a task. The Command Prompt can complete a task with a few key strokes, whereas it would take quite a few clicks in the GUI (Graphical User Interface).

If you are the only user on your computer, you probably are the Admin (Administrator) of that computer. Administrator accounts are privileged, meaning they can perform any action on the system, with minimal restriction (usually requiring a password for confirmation).

A Windows user does not have Administrator rights inside the VS Code Integrated Terminal. So they are restricted in what content they can modify in the current project folder they are in. But this can be fixed. In order give yourself Administrator rights in the VS Code Integrated Terminal, follow these steps:

Right-click on the VS Code shortcut on your desktop and select Properties ub the dropdown that appears.

Next, select the Compatibility tab.

Next, check the Run this program as an administrator box.

Next, click Ok.

Then, when you open up VS Code the next time, you will be asked if you allow VS Code to make changes to content on your computer. Select Yes. This will enable you to become an administrator inside the VS Code Integrated Terminal. When I set this up, I was able to start deleting folders inside VS Code’s Integrated Terminal with my local clean script inside my package.json. However, one should note that when I run the clean script which entails deleting a folder inside my project called dist, I am prompted the following in the Integrated Terminal:

rmdir /s dist && mkdir distdist, Are your sure (Y/N)?

Make sure that you type a capital Y and not a lowercase y. You won’t throw an error, but you also won’t delete the contents of the dist folder. Only when you press the Shift key + Y key will the folder(s) be ***deleted***. My clean script` consists of the following:

“script”: “rmdir /s dist && mkdir dist”

To remove the step dist, Are your sure (Y/N)?, you can add /q after /s. So:

“script”: “rmdir /s /q dist && mkdir dist”

Adding /s (for Windows XP and later) after rmdir removes all directories and files in the specified directory in addition to the directory itself. Adding /q after /s (for Windows XP and later) enables Quiet mode, so you are not asked if it is ok to remove a directory tree with /s.

The mkdir dist command that follows simply creates an empty dist folder. The && in between simply enables the execution of two commands instead of just one. More than one instance of && is possible, as will be demonstrated in my createDirs and build scripts.

After the clean script in package.json comes the createDirs script:

“createDirs”: “cd dist && mkdir \”styles/css\” && mkdir  \”scripts/js\””

Because I can’t create the styles/css and scripts/js directory trees at the same time that I delete and re-create the dist folder, I create a separate createDirs script. The first command in the script is to cd into (change directories) the dist folder, followed by the && (double and), then the mkdir command followed by \”styles/css\”, which results in the creation of a styles folder and then a css subfolder. The reason why I wrap styles/css with back slashes (\) followed by double quotes (“) is because I need to write the path for the styles/css with a forward slash (/) in package.json, but the Command Prompt only recognizes \. This way, we are regexing styles/css by wrapping it in two backslashes. This results in the replacement of styles\css with styles/css. One \ at the beginning of the regex, and one \ at the end. This makes it possible to use a value that CMD normally would not recognize and throw an error as a result. Same with scripts/js when creating the \”scripts/js\” directory tree.

Next comes the build script. It looks like the following:

"build": "xcopy \"styles/css\" \"dist/styles/css\" && xcopy \"scripts/js\" \"dist/scripts/js\" && copy index.html dist"

Here, I am using the xcopy command to copy the contents of the \"styles/css\" directory tree inside the root of the project into \"dist/styles/css\”, which was created with the createDirs command. This is followed by a double and (&&), then another xcopy command followed by \"scripts/js\”. This command copies the scripts/js directory tree inside the root of the project into \"dist/scripts/js\”, which also was created with the createDirs script. Finally we are left with the command that copies the index.html at the root of the project into the dist folder. Here we simply use the copy command followed by the name of the file we want to copy, and then the destination directory (where we want to copy the file into), which is the dist folder. And here, as well as in the createDirs script, we have more than one double and (&&) going on. This simply means that the script should only run if all the commands chained by double ands (&&) are executed.

Finally, I have a deploy script for my gh-pages npm package:

“deploy”: “gh-pages -d dist”

This is the same command I use either on Unix (Mac OS) Terminal or Windows Command Prompt. This simply deploys the dist folder, which we first have to push to our origin master (remote master) branch, and then run the npm run deploy local script in the Command prompt/Integrated Terminal so that the dist folder and its contents are pushed to a remote branch on origin called gh-pages, creating the gh-pages branch for us at the same time. Once the local commit has been pushed to Github, where gh-pages resides, we can visit our new gh-pages site there. This is free static hosting that Github provides for our static (front end) repositories hosted there.

There are definitely certain things that the Windows Command Prompt shares with Terminal on Mac (Unix). For example, when one opens it from the search bar to the right of the Windows icon in the lower left corner of the computer screen, it points to the computer’s home directory, which is the Windows user top directory. On a Mac, when one first opens Terminal, it also takes you to the user's home directory.

For example, on my Mac, when I open a new instance of Terminal (iTerm2 for me), The following is printed out in the Terminal window:

Last login: Sat Sep  4 23:17:34 on ttys000
Marias-MacBook-Pro ॐ  ~:

If I run the pwd (print working directory) command to get the actual path of the current directory, I get the following:

/Users/mariacam

When I initially open a new instance of the Command Prompt on Windows, the following is returned:

Microsoft Windows [Version 10.0.15063]
(c) 2017 Microsoft Corporation. All Rights reserved.

C:\Users\inter>

Unix (OS X) uses forward slashes (/) for paths. Windows uses backslashes (\). But both point to the equivalent place on the computer.

When I open up a directory in VS Code from the Command Line using the code . command, and then execute various commands such as creating directories (mkdir newfoldername) or deleting directories (rm -rf folder name) from within the VS Code Integrated Terminal, I have no problems.

However, when I try to delete directories or make other modifications to content on my Windows computer from within the VS Code Integrated Terminal, by default, I am restricted as to what I can do. These restrictions are removed when I make myself Administrator from within the VS Code Integrated Terminal, as I explained earlier.

For me, in the past, the Windows Command Prompt seemed confusing and un-masterable. But these days, there is more and better documentation than before. I believe it has to do with Windows improving its OS user interface, more people who used to be on Mac switching over, and the fact that the pandemic transformed us into more of a DIY (Do It Yourself) society. I also came to realize that I should not only be mistress of my Mac computer, but my Windows computer as well. Especially since I teach others who may either be on Mac OR on Windows.

To view the package.json of the project I refer to in this post, please visit the package.json on Github. To view the entire project repository, please visit the Arithmetic Forms repository on Github.

Related Resources

• configuring package.json on windows

• MS-DOS and Windows command line rd and rmdir commands

• Shx npm package