Setting Up a Development Environment

In this course we’ll use Visual Studio Code (VSC) to develop a web app and a API server using modern state of the art techniques and tools.  The web app will used advanced JavaScript features like fetch, Promises, and web storage while the API server will be created with Node.js and Express, store and retrieve data from an Atlas MongoDB database, and send emails using SendGrid.

To begin, in this module, we’ll install and configure, on our laptops, the necessary software needed to develop, test, and deploy Node.js applications.

If at anytime you run into a problem, please STOP and notify your instructor so that he/she can help you.

In the instructions below, I will often ask you to type a command at a command prompt by showing you the command in box, like the one below.

$ git --version

In the command shown above, I denote the command prompt using the $ symbol.  Your command prompt may be some other symbol.  Please note that the command that you are asked to type does not include the command prompt itself.  For example, if I ask you to type the command shown in the box above, you would type git --version, not $ git --version.

As you follow the instructions below, explore the websites and try to understand how each application will be used in the development process.

Let’s get started.

Install Git

Git is a tool developed by the inventor of Linux, Linus Torvalds, that allows us to archive our code locally on our laptops in repositories and copy the repositories from our laptops to other online services like GitHub.com and Heroku.com.

Windows Instructions

If you have a Windows laptop you can get Git by navigating a browser to GitForWindows.org and downloading the appropriate version of Git.  When you install Git for Windows, pay attention to the prompts, and make sure you install the GitBash terminal applications during the Git installation process.  We’ll be using GitBash at various times throughout the course.

Like now.  Once Git is installed, launch your terminal application (GitBash) and type in the following command.  You should see a version number printed to the screen.

$ git --version

MacOS Instructions

If you have a Macbook, launch Apple’s App Store app and install Apple’s XCode software development platform (it’s free).

Now, using your Spotlight Search application, find and run your Terminal application.  In the Terminal application, type the following command.

$ git --version

If you see a version number, you have Git installed on your macbook.  If not, MacOS will ask you if you want to install Git.  Follows the prompts to install Git.

Set Up Git

We need to configure Git so that it knows our identity and we need to change the default branch name that Git uses from ‘master’ to ‘main’.

If you’ve used Git on your laptops prior to this course you may have already configured Git to know your identity so you don’t have to do it again, but you likely have not changed the default branch name.

Please use the instructions in the git-scm.com tutorial named 1.6 Getting Started – First-Time Git Setup to set up your identity (if you haven’t already) and change the default branch name from master to main.  Note that you only have to perform the instructions in the sections titled Your Identity, Your default branch name, and Checking Your Settings.  You should use your full name when setting user.name, but can use any valid email address when setting user.email.

If you haven’t already, run the following command to verify your Git config settings.

$ git config --list

Install Python

Some of the Node.js modules that we’ll download and use in our applications are written in Python, therefore we need to install Python on our laptops.

Please navigate your browser to https://www.python.org/downloads/, download the appropriate installer for the latest version of Python, and run the installer.

After you’ve installed Python, run the following command in your terminal application.  You should see the version number.

$ python3 --version

If you get an error stating that python3 does not exist, try the following command.

$ python --version

Install Node.js

If you’ve developed Java programs, you’re familiar with using a Java Runtime Environment (JRE), for example using java on the command line, to run the Java programs that you’ve written.   Node.js is analogous to a JRE.  Node.JS is a runtime application that runs JavaScript programs.  In this course we will develop internet applications in JavaScript and use Node.js to run them.

Navigate a browser to the Node.js website at https://nodejs.org/en/, download the installer for the Current version, and run the installer.  If you have an older version of Node.js, install the newest Current version.

After you’ve installed Node.js, run the following command in your terminal app.  You should see the version number of node that you’ve installed.

$ node -v

The Node.js installer, also installs a program named npm which stands for Node Package Manager.  We will use npm to install packages (i.e. libraries) into our application work space for our applications to use.  Run the following command in your terminal to verify that npm is installed.  You should see the version of npm that is installed on your laptop.

$ npm -v

Update npm

$ npm install npm@latest -g

Install Visual Studio Code

Next, navigate your browser to https://marketplace.visualstudio.com/items?itemName=waderyan.nodejs-extension-pack and install the Node.js Extension Pack for Visual Studio Code.

Create a SSH Key Pair

SSH is a communication protocol that can be used to securely allow someone on one computer to login on another computer.  In order to authenticate ourselves to a server we can either provide the server with a user name and password, or we can use a pair of SSH key (one private and one public).  We’re going to use the git program to copy our application code from our laptops to the GitHub servers and authenticate ourselves using SSH keys.

Open a terminal application (e.g. GitBash or Terminal), change your working directory to your home directory, and type the following command to create a pair of SSH keys, replacing joe@example.com with one of your email addresses.

$ ssh-keygen -t rsa -b 4096 -C "joe@example.com"

The ssh-keygen program will ask you to enter the name of a file in which to save the key.  Write down the default location (you will need this later), then press enter, to use the default location. The ssh-keygen program will then ask you to enter a passphrase.  Press enter, for no passphrase, and press enter a second time to accept the empty passphrase.

You can verify that your SSH key pair files were created by using the cd command in the terminal to change your working directory to the location that the key files were saved.  For example, if when you ran ssh-keygen, it stated that the id_rsa file was created in /Users/joe/.ssh, you would change the working directory to /Users/joe/.ssh using the following command.

$ cd /Users/joe/.ssh

You can view the contents of the directory you can use program named ls.

$ ls

You should see at least two files; one named id_rsa and one named id_rsa.pub.  The file named id_rsa is your private key file.  Keep it secret.  Anyone with access to it can masquerade as you. The file named id_rsa.pub is your public key which we will later provide to Heroku and GitHub.

You can view the contents of the files using the cat program.

$ cat id_rsa
$ cat id_rsa.pub

Next, start the ssh agent, if it is not already running, by running the following command.

On MacOS, run

$ eval "$(ssh-agent -s)"

On Windows, run

$ eval $(ssh-agent -s)

You should see an agent pid (process identifier) printed to the screen.

Alas, provide the ssh agent with your private key by running the following command.

On MacOS, run

$ ssh-add -K ~/.ssh/id_rsa

On Windows, run

$ ssh-add ~/.ssh/id_rsa

You now have a pair of ssh keys, started the ssh agent, and registered your private key with the ssh agent.

Create a GitHub Account

Next, if you don’t have a GitHub account already, navigate to GitHub.com, and sign up for a new account.  GitHub will send you a confirmation email.  Please click on the link in the email to complete the process.

Set Up GitHub

Log onto GitHub.com.

Click on the icon in the upper right corner, scroll down, and choose Settings. Othe left hand pane of the Settings screen, choose SSH and GPG keys. Press the New SSH key button. Enter a name for the key (e.g. My Laptop), and copy the contents of your id_rsa.pub file (your public key) into the key field.

Verify that you can communicate with GitHub using ssh by running the following command from the terminal.

$ ssh -T git@github.com

If successful, you should see a message that reads “You’ve successfully authenticated, but GitHub does not provide shell access.”

Install Postman

Web applications have two main components, a browser (client) facing component and a backend (server) component.  Postman is a program that we can use to test the APIs server before we build out the client.

You can install Postman by navigating a browser to postman.com/downloads, download the appropriate app, and installing it. Note that you do not need to create an account in order to use Postman for our purposes.  When we start Postman it will ask us to sign in, but it also provides a link to skip the log in process.

Create a MongoDB Database on Atlas

You may have experience working with relational databases that are specified using a structured query language (SQL).  These databases consist of  sets of tables. Each table can be conceptualized as having rows and column, where each row is a record in the table and the columns define the types of data that are stored in each record.

A MongoDB database is a NoSQL database which does not contain tables, but rather uses collections of documents.  In MongoDB, a collection is defined using JavaScript object notation (JSON) and each document in the collection is an instance of the JSON object.

Atlas is a service that hosts MongoDB databases.  Go to the MongoDB Altas homepage at https://www.mongodb.com/cloud/atlas/register and register for an account by adding your email address, first name, last name, and passsword. Click on the check box to agree to the terms of service and press Join now... Atlas will send you an email, wait for it, then click the link in the verification email.

When you press the link in the email, your browser will redirect you to a page that asks for information about how you will use the Atlas services.  Select the options that you feel are appropriate (I don’t think they really matters), then click Finish.

The browser will then be redirected to a page titled Deploy Your Database.

Caution: Throughout this process of creating a database on Atlas, make sure you are mindful and only select technologies on the M0 Free Tier.

On the Deploy Your Database page:

• Select the M0 Free card at the top of the page
• Change the cluster name to Altas-API-DB
• Unselect Automate security setup
• Unselect Add sample dataset
• Select Azure as the provider (i.e. the blue A)
• Choose Virginia-East2 for the region.

When ready, click Create Deployment.

In the Add a connection IP address section, select Allow Access From Anywhere, then press Add IP Address. If you don’t see a button to Allow Access From Anywhere but rather see a section labelled Where would you like to connect from, choose My Local Environment and set the IP address to 0.0.0.0/0 and set the description to anywhere. When complete press Add Entry.  Setting the IP address to 0.0.0.0/0 will allow connections from anywhere.

In the Create a database user section, add a username and password.   Note: Save the username and password in a secure place. You will need this later.  When finished press Create database user.

Next, press Choose a connection method.  On this screen, select Drivers under the Connect to your application section.  The only thing you need to do on this screen is copy the connection string and paste it to a file (we’ll use this later).  The connection string looks like the one below.

mongodb+srv://dbadmin:thisIsABadPassword!@atlas-api-db.efzolw0.mongodb.net/?retryWrites=true&w=majority

Now press Review setup steps and on the next page press Done.

You will be redirected to the Database Deployments page. Click on the arrow pointing right (next to the +) and look around.

Install MongoDB Compass

MongoDB Compass is a GUI application that allows us to view the collections and documents in a MongoDB database.

Navigate to https://www.mongodb.com/try/download/compass and download the appropriate (full) version for your operating system.  Once downloaded, install the app.

Test MongoDB Compass

Open MongoDB Compass and close the opening tutorial (if there is one).  Some versions may also have display a Privacy Settings page, choose your privacy settings, and click Start Using Compass.

Now press New Connection found at the top of the left hand side panel.

Paste your Atlas database connection string in the field under the label that reads URI, then press Save and connect.  In the pop-up modal, choose a name for the connection (e.g. Atlas) and a color, then press Save and connect again.

MongoDB should connect to your Atlas MongoDB database.  If you see Databases (local, config, and admin) on the left, you have successfully connected to your Atlas database.

Create an Microsoft Azure Account

We’ll be using Microsoft’s Azure cloud infrastructure to host our web site and our API server.  Navigate your browser to https://azure.microsoft.com/ and click the Try Azure for Free button.  On the next page click the Start Free button to create a new account.  DO NOT Use your BC credentials when creating an account.   If you do, you have to ask an grumpy old man to allow you onto a white-list.

After creating an account, ensure you can get to the Azure portal found at https://portal.azure.com/.  If so, you’re ready to go.

© 2022 – 2024, Eric McGregor. All rights reserved. Unauthorized use, distribution and/or duplication of this material without express and written permission from the author is strictly prohibited.