Skip to content
Permalink
12b6a7d5ae
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

TEACHING-MATERIALS/00 Lab 1 Setup.md

Go to file
@aa7401
aa7401 updated setup lab
Latest commit cedfcaa Nov 4, 2018 History
1 contributor

Users who have contributed to this file

The Goorm IDE 1 Cloning the Lab Content 2 Updating NodeJS 3 Running an Express Server 4 Git Configuration 5 Local Setup
112 lines (67 sloc) 5.52 KB
Raw Blame

The Goorm IDE

This is a good example of an online IDE. These enable you to do software development without needing to install anything on your computer. They are also ideal for use with a Chromebook. You need to sign up for an account on their website, sign in and access the dashboard page. Click on the Create a New Container button.

Create a New Container

You will be presented with a screen where you can name your project and choose a software stack:

Create a New Container

You should see an IDE that displays the files down the left side with an editor in the main view and a terminal window below:

Create a New Container

1 Cloning the Lab Content

The next step is to clone the repository containing the lab materials into the IDE. Start by opening the GitHub page. Locate the Clone or download button, clicking this pops open a small window as shown. Copy the URL in this window to your clipboard.

Create a New Container

Returning to the IDE, run the following command in the terminal:

git clone https://github.coventry.ac.uk/340CT-1819SEPJAN/TEACHING-MATERIALS.git labs

This creates a labs/ directory containing all the files from the repository.

By default real-time linting is enabled however this currently uses an old linter and is not ECMA6 compatible. You should disable real-time linting from the Project menu.

2 Updating NodeJS

We can see the current version of NodeJS by running the node -v command. The latest version is 10.11.0 and so we need to upgrade this.

Start by installing the Node Version Manager tool:

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

Now click on the small blue oval on the terminal tab to reload the shell. There are lots of versions available, use the nvm list-remote command to see these. Install the latest using nvm install 10.11.0 substituting the latest version number. To check the version installed use node -v again.

3 Running an Express Server

Use the terminal to navigate to the simple_templating directory and try running the index.js script:

$ cd labs/exercises/01_nodejs/01_templates_forms/simple_templating
$ node index.js
  Error: Cannot find module 'express'

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 express
$ node index.js
  Error: Cannot find module 'express-handlebars'

We get a different error explaining that there is another missing module:

$ npm install express-handlebars
$ 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.

Setting up a URL and port

This will open a window where you will need to register a new URL and port:

Setting up a URL and port

  1. Use your University Username as the URL segment.
  2. Make sure you specify port 8080 (this is the one used by your server).

You need to set this up as your run configuration as shown.

Setting up a URL and port

The final step is to open a new browser window and enter your chosen URL, you don't need to specify the port, this was done through port-forwarding:

Setting up a URL and port

If you make changes to the code or want to quit the IDE you will need to stop the server. To do this, select the terminal window and press ctrl+c.

4 Git Configuration

Before you can work with Git you need to update the repository configuration. Follow the instructions below:

  1. Update your name (this must be the name as it appears on your ID badge) using git config user.name 'Joe Bloggs'.
  2. Update your email (using your unversity email) git config user.email 'bloggsj@uni.coventry.ac.uk'
  3. Update your commandline editor choice using git config core.editor nano (the editor must be installed!)
  4. Cache your credential (username/password) for an hour using git config credential.helper 'cache --timeout=3600'

5 Local Setup

If you are planning on using your own laptop you will need to install some key pieces of software. Obviously its impossible to cover the installation process in detail for every operating system but there are plenty of guides online. You should install:

  1. Visual Studio Code (Not Visual Studio!)
  2. The latest version of NodeJS. For Linux follow the instructions to install nvm, for other platforms download and install the latest version from the official site, make sure you install the latest and not the LTS version.
  3. You also need to install Git if it is not already installed. Mac and Windows users can download the installer from the official website.

Once everything is installed you can clone the module repository using the same command you used in the Goorm IDE lab (make sure you clone it to a sensible location).

Once the repository is cloned you should open VS Code and use the File > Open Folder option to select and open the folder containing the repository (On some systems you choose File > Open).

Once the web server is up and running you access the page by pointing the browser to localhost:8080.