Configuring and Familiarising CLI

In this section I'm looking forward for everyone to begin using the command line (or otherwise referred to as terminal) and getting comfortable with executing commands, later moving onto utilising NPM and Sass in the next section. All skills picked up at this stage will be essential later on. (The term CLI used throughout this guide refers to Command Line Interface, i.e. the terminal.)

For the command line/terminal on Windows, we'll be using Git Bash which we installed that emulates the unix CLI. We utilise the unix CLI as most of the web's servers are unix based and almost all (if not all) development tools make use of unix commands.

1. Configuring PHP and Composer

Firstly we'll need to configure your CLI to have PHP accessible within its' PATH; we also need to install Composer which is a package manager for PHP. During my experimentation on Windows I found that you can install Composer using a Windows .exe file and it handles all of this configuration for you. So please visit the Composer Download page, and select your specific Operating System (OS, e.g. Windows, macOS) and complete the installation.

2. Testing Git Bash Setup

We can now begin working within the CLI using Git Bash (for Windows) after Composer has been setup, so please now open Git Bash. (You may want to optionally resize your command line window larger.)

Firstly let's test that all our configuration is working. Please run the following commands:

php -v
npm -v
node -v
composer --version

All the above commands should print out the version of each tool, which confirms that your environment is correctly setup. If you receive a response such as 'bash command not found', this indicates that one or more of your tools/programs is not installed or configured correctly. If you find this is the case for you, then please go over the Software Requirements section and ensure you have installed all the necessary applications (including Composer provided on this page).

3. Understanding Git Bash/Terminal

The Git Bash terminal has highlighted in green the username and machine name firstly, followed in purple with the name of the unix emulator, then finally in yellow the current directory you're working in (i.e. the current folder you are in or have open via CLI). Only the last part is important for us now, your current working directory. When you open terminal for the first time, your current working directory will be ~ which is your home directory. You will be moving around directories often when using the CLI.

4. Unix Terminal Commands

Here are a few common handy unix commands. As they are common and when you become comfortable with the CLI, you'll be able to remember all of these from memory.

Command	Example	Description
cd	`cd /c/xampp/htdocs` `cd ../` `cd "/c/Program Files (x86)"`	Change the current working directory. In the first example, change to XAMPP's htdocs folder. In the second example, go up a directory. TIP: When you've already typed in some of the directory name, hitting the tab key can sometimes complete the entire command, saving you time. TIP: You may need to place your directory in apostrophes if the directory you want to go into has spaces within its name. See third example.
mkdir	`mkdir hello-world` `mkdir "My Folder"`	Make a directory/folder. Within the first example, we create a folder called 'hello-world'. The second example creates a folder which name contains spaces, enclosed within apostrophes.
rm	`rm hello.txt` `rm -r hello-world` `rm -rf hello-world`	Remove a file or directory/folder. Within the first example we remove a text file, whereas in the second example we remove a folder. When removing a folder we add the `-r` option to denote that the removal should be recursive (i.e. delete all the contents of the folder too). When deleting using the rm command, the terminal requires you to confirm the deletion. By adding the options `-rf` together, we force a recursive deletion; deleting all contents without a confirmation.
ls	`ls` `ls -la` `ls -la \| grep hello`	This shows all the files and folders within the current directory. Running `ls -la` will show you in a list format with more details, e.g. permissions, owner, file size and etc. TIP: You can search the results for a specific word or name using the grep command. See the third example.
nano	`nano hello.txt`	Use the nano editor to edit the hello.txt file. If the file does not exist, then on save it will create the file. Nano is the preferred editor within CLI but it is not always installed on a server and sometimes needs to be manually installed before use.
cat	`cat hello.txt`	Print the contents of the hello.txt file within the terminal.

5. Taking Nano for a Spin

Let's start by creating an example text file in nano just to get a feel for the CLI (make sure you have Git Bash open). First cd to your XAMPP htdocs directory, if you used the default installation location then it should be in C:/xampp/htdocs on Windows. You can cd here by running:

cd /c/xampp/htdocs

Now create a new directory and let's call it phpinfo (use the Unix Terminal Commands above on how to do this). Now cd into the newly created directory. As paths are relative, you can just run cd phpinfo from your current path rather than having to type in the full path.

Now run nano hello.txt which will load the text editor which will be empty. Type in "Hello World!" and then to exit nano press CTRL + X. You will be asked if you want to 'save modified buffer': the 'Y' key is for yes and the 'N' key is for no. Hit the y key then press enter. This will save the file. You will then be exited out the nano editor. If you now do ls, you will see your hello.txt file.

And that's how we basically use nano inside the command line, you've created a new file with contents; the same commands apply when editing an existing file (you may need to use your arrows keys to navigate through a text file in CLI). It may not seem potent yet, but it is a powerful tool when we manage servers over the command line as there is no GUI. Using nano we can setup cron jobs (systematically scheduled tasks), setup virtual hosts, TLS certificates and much more.

6. Creating a PHP Info Output

Whilst in the phpinfo directory and using nano again, this time create a new file called index.php and add the following code and save the file:

<?php phpinfo(); ?>

This will print out the current environment's PHP configuration and modules loaded. Ensure Apache is running in XAMPP and you will be able to access this in your web-browser by visiting localhost/phpinfo in your address bar.

7. Deleting the Directory

Once you've done all the above, we no longer need the phpinfo directory. Using the CLI, exit out of the directory and delete the phpinfo directory. Be careful not to delete any other XAMPP files or configuration.

We will now move back onto our previous work completed in the last section where we used Git to setup a basic index.php file which embeds a CSS and JS file. We will be taking this a step further by using NPM and Sass via the CLI, so please move onto the next section when you're ready.

Author(s)

Arif Ullah

Developer & CEO