Setup

In this worksheet you will learn how to configure your work environment using VS Code. You should start by installing Visual Studio Code (NOT VISUAL STUDIO!) from the website, note that it might already be installed. If you are using a Coventry University computer and the software is not installed you can do this using AppsAnywhere.

If you are using Windows 10 you will also need to install Git, this may already be installed on a Coventry University computer. If you are on MacOS you may already have it installed as it comes with the XCode IDE but if you have recently updated your OS you may need to run the xcode-select --install command to update the Xcode Command-line Tools but if you don't want to install XCode you can install git using HomeBrew using the brew install git command. If you are running Ubuntu you can install it using the sudo apt install git command.

DO NOT INSTALL THE GIT GUI TOOLS!

Visual Studio Code comes with an integrated Terminal that can be used instead of the standard Command Prompt or Terminal. If you are using Linux or MacOS this will give you a Bash prompt however on Windows 10 it defaults to the Command Prompt and will need to be changed to the Bash Shell.

Press CTRL-SHIFT-P and a selection box should appear at the top of the editor. Type in default shell and click on the Terminal: Select Default Shell option.

Now the integrated terminal uses the Bash Shell meaning you can use the standard *nix bash commands!

If Bash Shell is not listed on your Windows 10 machine

On some versions of Windows 10, some extra configuration is required before Bash Shell is able to be selected within VS Code. If this is the case on your machine, follow the below troubleshooting steps before reattempting to change your shell as above.

To start, we need to make sure Developer Mode is enabled in the Update and Security section of Windows 10. Press WIN+R (Windows Key and R simultaneosly) to open a Run dialog. In the dialog enter ms-settings:developers followed by the enter key. The window shown below should appear on screen.

Select the Developer mode radio button and yes on any succeeding dialog boxes. Wait for any neccessary installations to complete.

Once that has completed, we need to enable the WSL (Windows Subsystem for Linux). Press WIN+R, in the dialog enter powershell followed by the enter key. In the powershell window copy and paste the following:

Start-Process powershell -Verb runAs
exit

Press the enter key and accept the UAC (User Account Control) dialog. A new powershell window will launch with Administrator rights.

Copy and paste the following:

Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux

Press the enter key and wait for the process to complete. Once complete, restart your computer before continuing.

Finally, we need to install Ubuntu from the Microsoft Store. Click the blue Get button and accept any dialogs to launch the Microsoft Store and begin the installation. Once Ubuntu for WSL (Windows Subsystem for Linux) has installed, restart Windows.

Once restarted, reattempt to enable Bash Shell in VS Code as per the section above.

1 Forking the Foundation Materials

You should start by logging in to the University GitHub server using your university username and password. Make sure you don't log into GitHub.com!

Next you should open the web page containing the foundation materials and click on the small Fork button in the top-right corner of the page

You will be asked to select where you want to place the forked repository, make sure you choose your own personal space (the one that is named using your username).

This will create an exact copy (clone) of the repository in your personal workspace. It should indicate where the original version was (see below).

2 Cloning the Lab Exercises

Locate the green Clone or Download button and click this. You will see the option to clone with HTTPS. Click on the copy icon as shown to copy the URL to the clipboard.

Make sure the url begins with https://, if it begins with git you need to click in the small Use HTTPS link!

Launch the terminal app (Mac and Linux users) or Bash Shell (Windows 10 users). Now use this to navigate to the directory where you want to store the lab materials. You should use the following bash commands:

ls is used to see the contents of the current directory.
pwd prints the path to the current directory.
cd changes to the directory you specify, cd .. takes you to the parent directory.

When you are in the chosen location you need to clone the repository using the URL we copied earlier:

git clone xxx

Replacing xxx with the content of the clipboard.

This will create a directory called foundation which contains all the content from the repository.

Now you can launch Visual Studio Code and use the File menu to open this foundation/ directory.

2.1 Additional Steps for Windows 10 Users

If you are using Windows 10 you will need to carry out some additional steps before starting the lab exercises:

Open the integrated terminal using the Terminal menu.
Type - Select Default Shell
Select Git Bash from the options
Click on the + icon in the terminal window.

This will open a new Git Bash shell in the project directory.

3 Installing NodeJS

Next we need to install and configure NodeJS. If you are using MacOS or Linux the first task is to install the Node Version Manager tool. You can find detailed instructions.

Once installed you may need to restart your computer. Now check it was installed correctly:

$ command -v nvm
  nvm

Now we can install the latest version of NodeJS:

nvm install node
node -v

If you are running Windows 10 you need to download the installer for the Current version of NodeJS (12.10 at the time of writing).

4 Running a Web Server

Use the terminal to navigate to the exercises/01_setup/ directory and try running the index.js script:

$ cd exercises/01_setup/
$ node index.js
  Error: Cannot find module 'koa'

If you are using Windows 10 you will need to use the command prompt instead and navigate to the 01_setup/ directory.

Notice you get an error, we need to install the missing module using the Node Package Manager tool. We can then try to run the script again:

$ npm install koa
$ node index.js
  app listening on port 8080

Now we have the server up and running so the final task is to view the web page using the web browser. Simply open the Chrome browser and navigate to localhost:8080 where you should see a message. If this works you are ready to start the lab exercises.

5 Using npm and its package.json

Have a look at your package.json file and understand its contents.

When you are starting a new project, you have to create this yourself:

Use the npm init command to create the package.json file
- You can leave all the options default, just leave them empty and keep pressing enter
- Alternatively you can run npm init --yes, it will simply leave everything default
Install the dependencies for the first time using the -S switch with npm install
- e.g.: npm install -S koa koa-bodyparser
  - This would add something like this to the package.json file:
```
 "dependencies": {
 "koa": "^2.11.0",
 "koa-bodyparser": "^4.2.1"
 }
```
- When you next run npm install -S <package>, the given package's newest version will be simply added to the list, or in case of a new version for a previously listed dependency, the version number will be updated
- This -S is just a short version of the --save switch
  - You can use the alternative --save-dev switch to install and save them as development dependencies
    - Something that you wouldn't want to deploy, but is necessary for development
      - E.g. we will use jest for testing, and eslint for linting during the development phase, but these shouldn't be required to be installed during deployment
- You are done with adding the dependencies, now simply use npm install to install all of them at once!
  - If you don't want to install development dependencies, use npm install --production
This package.json file is also useful to store scripts:
- Look at the following line: "start": "nodemon index.js"
- This lets us simply type npm start in the terminal to start our application via nodemon
  - Nodemon is a great tool that restarts the application every time we save a file in the given folder, so we don't actually have to manually stop and restart it after every modification.

6 Pushing the Changes to GitHub

As you work through the lab activities two things are likely to happen:

You make changes to the code that you want to push to the forked copy of your repository.
You will need to pull any bug fixes from the original repository.

6.1 Configuring the Repository

Before you start interacting with the GitHub server you need to configure the local repository. Open the Bash Shell and run the following commands:

git config user.name 'John Doe'
git config user.email 'doej@coventry.ac.uk'

remember to replace the values with you own name and your university email (but without the uni part).

6.2 Pushing Changes

NOTE: You only need to carry out this step when you have make changes to the code! This will normally need to take place each time you complete a "Test Your Understanding" section.

As you save your changes you will see a blue circle against the Source Control tab that indicates how many files have been changed, we need to get these changed files up to GitHub. Start by opening the tab, you will see a list of all the files you have changed.

Click on the + button to stage these changes.
Type in a commit message to explain what changes you have made.
Click in the tick button to commit the changes.

Now you should click on the Sync icon (shown below) to push the new commit up to your GitHub repository, this will also pull doen any commits that are on the GitHub server but that you don't have on your local computer. The first number is the number of commits it will pull from GitHub (down arrow) and the second the number of commits it will push from your local computer to GitHub (up arrow).

At this point you should be able to refresh your GitHub repository page to see the changes.

6.3 Pulling from Upstream

As new materials and resources are added to the original repository (and bugs fixed) you will want to merge these into your forked repository. Before you can do this you will need to add a link to the upstream repository. Open a bash shell:

git remote add upstream https://github.coventry.ac.uk/web/foundation.git
git remote -v

Now, every time you have committed and pushed you changes you can pull the changes from the master repository:

git fetch upstream
git checkout master
git merge upstream/master

Don't worry if you don't understand what is happening, this will be explained in a future lab.

foundation/01 Setup.md