In this article, you will learn the basics of terminal commands then we’ll go over installing git & NVM, and finally installing node and creating a test.js file.
This content is part of an ongoing educational series and based off content originally taught to high school coding students to teach them full stack JavaScript in a semester. It is now being turned into an open source book and therefore is considered a "living article" subject to change, new articles are published on github first, then on medium, then on here.
Pre-Assessments
Before you continue reading, consider taking the pre-assessment to test your knowledge of basic terminal commands. The knowledge assessments are intended to only take 60 seconds and are used to assess whether a reader has the required /preferred prior knowledge.
If you pass the assessment then feel free to skip the command line section and start installing NVM.
Why learn JavaScript instead of another language?
Put simply, it comes down to career opportunities. Most developers who’ve been coding for more than 5 years will probably agree that beginners should start off by learning one language and master it before learning another. The reasoning is that once you have a core understanding of the fundamentals such as variables, control structure, data structures (objects and arrays), functions/classes, and iteration (loops & recursion) it will be easier to pick up another language.
So if there is a single programming language beginners should learn in 2020 and master, it’s gotta be JavaScript. Being a browser-based language means anyone can learn the language, anywhere and on practically any device.
JavaScript is easy to learn and you can use it to build just about anything from websites, mobile apps, servers and even hardware projects.
This doesn’t just translate into becoming a full-stack developer, it translates into career opportunities whether you want to go into front-end web design, server-side backend, mobile app development, or even hardware programming, JavaScript can give you the necessary essentials to build on when you are ready to specialize in one area. Once you master the fundamentals of JavaScript, learning TypeScript makes the transition into such as TypeScript or more “traditional”, OOP languages such as C#.
A Brief History of JS
Originally, websites did not have the any interactive behavior and were essentially just displaying text files. Eventually HTML and HTTP and other related technologies changed this. The creators behind the Mosaic browser, created a language called “LiveScript” and shipped it in1995 to address this need. Within 3 months, it was renamed to “JavaScript” to build on the hype train programmers were on for Java, a completely separate and unrelated language. Eventually, Microsoft did what they always do, steal source code from someone else’s product and release their own version of it, Internet Explorer that used “JScript”. The browsers wars started and long story, short, Mosaic and other browsers basically died off due to Internet Explorer and multiple forks of JS existed as well as other languages such as ActionScript, etc. All of which were made to address the same issue of providing the browser interactive behavior.
What is Node.js ?
Node.js is a runtime environment for JavaScript created by Ryan Dahl in 2009 and built on the Chrome V8 engine. The runtime environment is what allows JavaScript to run virtually anywhere it is installed. Before node.js, JavaScript was just a web-based scripting language. After node was released, it changed the language forever and turned it into a full-blown programming language. This was made possible by two thing, callbacks for asynchronous code and modules like commonJS which allowed multiple files to be imported and exported via the require() and export methods. Combined with the HTTP method for servers, this made it easier for developers to transition into becoming a full-stack developer because they could work on the front-end (browser) and backend (server) without switching languages to PHP, python, pearl, etc.
Why use Node.js to learn JavaScript instead of the browser?
I’ve seen a lot of new developers ask on forums and groups if they should learn JavaScript or node first. Generally, most respond with learning JavaScript first. Its completely understandable but at the end of the day, node is just a runtime environment. So if node is installed on a server, then you can use it server-side. If its installed on a hardware device like a Pi, then you can use the johnny-five library to program the board.
What’s great about learning on node is it allows new developers to learn JavaScript without all the bulk of browser-based objects. Eventually when we get into the servers-side, it becomes easier to separate the server-side code from the client-side JavaScript because only the browser has access to browser-based objects like window, document, forms and everything else that’s part of the document object model.
Command Line Basics
Below is a list of just a few common commands you will need to use and understand to install some developer tools like nvm and others.
ls / dir , pwd, and cd are all commands that are useful for navigating system files & folders (directories).
pwdwill print the working directory and show you the full path to the directory you are in.dir&lslist directory contents but dir is used on windows where as ls is used on linux / mac.cdwill allow you to change the directory you are in. ls & cd are the two you will use the most, so learn them well.mkdir & touch are most often used for creating directories and files.
mkdiris used for creating directories (folders). Whereastouchchanges the file timestamps as well as creating files, etc. Read the documentation for each to see more.rm will remove files and directory. BE VERY CAUTIOUS with this and again read the documentation because if you don’t know how to use it proper you can serious mess up your computer, especially if you used it on directories like system32 on windows...
chmod and chown are about security-related commands for changing files and directories.
chmodstands for change modification and will change as files read, write, execution permissions. chown, on the other hand, will change the owner. Although it's less common to use these it is important for installing software on shared hosting or non-administrator files because you won't have sudo (admin) permissions.curl is a tool used to transfer data from or to a server. We will use this to download a shell script in a minute.
nano is a terminal-based text editor. You may have heard of vi and vim. Those are great too but a bit overkill for what we are doing and confusing to new developers. So we’ll use nano instead of vi or vim.
There are a lot of ways these commands can be used and many are beyond the scope of this article. Now go ahead and install vscode. We are going to use the built-in terminal so you can see the directory and files being created during the exercise. If you want extra credit, use only nano or vim. Then show me that you read this and as well as a basic http server example. Or if you aren’t a student in my class, ignore that last part entirely.
Terminal Basics Exercise
I’ve included a gif of the exercise showing half of the commands above. It also has alt text of the commands I ran for screen readers. Then I have the instructional steps describing what I did and the commands I typed.
Instructional Steps:
- Create a new directory called test with mkdir command.
- Change the directory and Gg inside the test directory with the cd command.
- Inside the test directory, create a file called test.js using the touch command.
- Change the directory again and go back one directory by typing cd ../ check the current directory by typing pwd, check that the test directory you created exists by typing ls,
- Finally, delete the /test directory using rm -rf /test note that the -rf flag is used to recursive delete the directory and all its contents.
If you were able to follow these steps then you should have all the basic knowledge of terminal commands to install node.js using Node Version Manager which is abbreviated as NVM. Here is a video version of the gif.
Installing git
Before we install node or nvm we want to install git. Git allows developers to use version control on files which means we can see files changed, who changed them and what was added or deleted. We are not going to cover git or version control, at the moment because I want to focus on installing nvm and node. We’ll circle back to this later if there is enough interest in it. Also if there is downtime in-between the publishing of the article of this series, I recommend these awesome resources also gitkraken if you want a useful GUI to learn but I stress the importance of learning command line first.
Installing Node Version Manager (NVM)
Instead of installing node via the download page, we are going to install it with NVM so that we can install different versions of node and switch between them as needed. We want to use NVM because as a developer you will need to maintain legacy code that may only run on older versions of node. NVM always us to switch between these different versions easily.
It’s very important to note that for windows users there is no official version of nvm. I’m considering writing a tutorial on the closest alternative below but I’m not sure if there is enough demand. So if I get enough comments, I’ll consider it. For now, unfortunately the link below is the best resource I have on the matter.
Installing NVM on Linux / Mac
First, we need to check if there is already a bash profile and create one if there isn’t. The bash profile ‘is a configuration file for configuring user environments” such as the path to programs such as NVM. If we don’t have this file or if it's not configured properly, nvm, git, node, etc won't run. This file will have a dot before the filename which makes it a system file and a hidden file. Let open up the terminal and run nano .bash_profile. and if it doesn’t exist let's go ahead and create one with touch ~/.bash_profile.
Now we use curl to download and run a shell script which will install nvm. You may also need to have git installed on your machine.
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
This should have created a .nvm/ directory. We can check this by running the pwd ~/.nvm which will show us if it's installed and where it is. Then we can check what’s in that folder with ls ~/.nvm.
Now run nvm in terminal. You should see the same thing as the image.
Now close your terminal completely, reopen it and check if nvm still shows you the same result.
If nvm isn’t showing after you closed and reopened terminal than something went wrong and you .bash_profile wasn’t updated.
If NVM doesn’t automatically install…
If that didn’t work, we’ll need to figure out why it didn’t install properly.
Let's check our .bash_profile and .bashrc files. Check the .bashrc with nano ~/.bashrc and check the .bash_profile with nano ~/.bash_profile.
If it’s not in either one then we need to use nano to edit the file.
nano ~/.bash_profile
Leave your terminal open and copy & paste the code below into the terminal.
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nv
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"
Then exit and follow the prompts to save the file.
Using NVM to install node
Assuming that all went well, we can use run nvm install —lts to install the long-term supported version. At the time of writing this article that would be 12.14.1 however version 13 is out and available to install and run however, it's just not entirely stable.
Using different versions of node
Now let’s say we have a command-line tool that uses an older version of node such as the foundation’s CLI. If we were to install it with npm install —global foundation-cli as the documentation says then try and use with the command foundation, we’d get an error.
However if we install node version 8 by running nvm install 8 the switch versions using nvm use 8 and run foundation we can now use the cli tool to rapidly prototype front-end websites.
Creating your first javascript file
Let’s go ahead and open up vs-code and install the code runner extension. We’ll be using this to run simple javascript files however once we start building a server we’ll be using nodemon instead.
Now let's begin the second exercise:
Create a javascript file. We can do this a number of ways. The fastest is with command n and then change plain text on the bottom to javascript. Or open terminal, run touch test.js and open the file with vscode.
Create some variables using the three types of variable declaration, var, let and const. Then print them with console.log(). We’ll go over the differences between var, let and const in the next article.
Run the file either by using terminal node test.js or by clicking the play button that was added by the code runner extension.
Conclusion
Now let's go ahead and test your knowledge with the post-assessment. By now, you should have some basic working knowledge on terminal commands, git, nvm and node installed and your first hello-world.js file written. Not bad for a 9-minute read.
Next Up in the series:
Thank you for reading all this way. I plan to update every article in the series like this so you can keep learning.
The next article in the series is a gentle (re)Introduction to Variables, Data Types and Immutability. It’s less of a tutorial and more of a dense overview that is packed with resources to provide a rock-solid foundation essential to learning javascript.
About the Spiciest Tech Channel on YouTube
If you would like to see a video of this, consider subscribing to, Hans On Coding and leaving a comment on here or on the channel. The channel will feature the following types of videos:
- Podcasting / Interviews with Industry Professionals
- Coding Events & Fun Challenges
- Coding Tutorials (like this one)
- JavaScript-based Hardware projects (such as nodebots and programming drones).
- Open Source Coding Curriculum
Learn more about it:
Wanna make this coding teacher cry? Consider sponsoring him for the #CodeRedChallenge and feel good about supporting open source content:
Additional Resources:
- Javascript with FreeCodeCamp
- https://glitch.com for using nodejs on a real server.
Top comments (0)