Exercise 1

The goal of this exercise is to set up the web development environment that you will use for the rest of the semester. These instructions are for the computers in Sennott Square 5505. If you try and do this on another computer, you may not see the same options.

Visual Studio Code

For this class, we are going to use Visual Studio Code (VSCode) as it is simple to use, powerful when needed and works on Windows, macOS and Linux. Since the computers in this lab have their account profiles regularly cleaned off, we will be using a self-contained version of VSCode saved to your flash drive. This will allow you to maintain your settings as you make VSCode your own.

Installation

Even though we are using a self-contained version of VSCode, you still need to install it on your flash drive.

  1. Go to https://code.visualstudio.com/#alt-downloads.
  2. Under the Windows logo, click on ‘64 bit’ next to ‘.zip’ and save the file.
  3. Open File Explorer and go to ‘Downloads’. File Explorer is the manila folder icon on the task bar at the bottom of the screen.
  4. In the File Explorer menu, click on View and then check the box next to ‘File name extensions’. This will make it easier to distinguish between the different files and folders we will be working with that may have the same name as they will have different extensions.
  5. Right click on the ‘VSCode-win32-x64-1.26.1.zip’ file, and select ‘SecureZIP’ -> ‘Extract to: “VSCode-win32-x64-1.26.1”‘.
  6. Click Extract and then Close once extraction is complete.
  7. Copy the new ‘VSCode-win32-x64-1.26.1’ folder and paste it on your flash drive. This may take several minutes depending on your flash drive.
  8. Open the ‘VSCode-win32-x64-1.26.1’ folder you just pasted on your flash drive
  9. In the File Explorer menu, click ‘Home’ -> ‘New Folder’, enter “data” and press enter.
    • These last two steps is what makes Visual Studio Code portable so your settings will go with you.

How to Run VSCode

In order to run VSCode, you will need to:

  1. Open the ‘VSCode-win32-x64-1.26.1’ folder on your flash drive in File Explorer
  2. Double click on ‘Code.exe’
    • The first time you launch VSCode, it will open a web browser with documentation. You can close this.

Template File

In order to make sure that each of our HTML files contains the right basic content, we are going to create a template.html file that we can start every other HTML file with.

  1. Open VSCode if it is not already open.
  2. Click ‘File’ -> ‘New File’
  3. In the blank editor, place
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Hello World</title>
    </head>
    <body>
        <h1>Hello World</h1>
    </body>
</html>
  1. Click ‘File’ -> ‘Save’ and save the file as template.html on your flash drive.

NGINX

NGINX is a web server application that is used for both small projects like this class to large scale commercial web sites. Like VSCode, we can download a self contained version of NGINX to use with our web sites and save it on our flash drives.

Installation

  1. Go to http://nginx.org/en/download.html.
  2. Under Stable Version, click on ‘nginx/Windows-1.14.0’ and save the file.
  3. Open the File Explorer and go to ‘Downloads’.
  4. Right click on the ‘nginx-1.14.0.zip’ file and choose ‘SecureZIP’ -> ‘Extract Here’.
  5. Copy the new ‘nginx-1.14.0’ folder and past it on your flash drive

How to run NGINX

  1. Open the ‘nginx-1.14.0’ folder on your flash drive in File Explorer
  2. Double click on ‘nginx.exe’
  3. Click ‘cancel’ in the Windows Security Alert window as you do not want another computer to be able to see your work.
    • All you will see other than the Windows Security Alert window is a box quickly flash on the screen. This is normal.

How to view your web site using NGINX

In order for NGINX to serve your web pages to your web browser, you will need to place html, css and supporting files where NGINX can find them. We will do this now with your template.html file.

  1. Start NGINX if it is not already running.
  2. Find your ‘template.html’ file on your flash drive in File Explorer, right click and select ‘copy’.
  3. Open the ‘nginx-1.14.0’ folder on your flash drive in File Explorer.
  4. Double click on the ‘html’ folder
    • This is NGINX’s web root, this is where it will look for all files and folders related to your web site.
    • You will see that this folder already contains an ‘index.html’ and a ‘50x.html’ file.
  5. Delete the ‘index.html’ file
  6. Right click and select paste.
  7. Right click on ‘template.html’ and select rename and rename it to “index.html”.
  8. Open your web browser
  9. Go to http://localhost

How to stop NGINX

Since there is nothing that comes up when you start NGINX, we will have to stop if via the Task Manager

  1. Press Ctrl+Alt+Delete
  2. Select ‘Task Manager’
  3. Click on ‘More details’
  4. Scroll until you see ‘nginx.exe (32 bit)’. There will be at least two.
  5. Select the last ‘nginx.exe (32 bit)’.
  6. Click ‘End task’
  7. Repeat the previous two steps until all ‘nginx.exe (32 bit)’ processes are gone.

Customize VSCode

That powerful when needed concept in Visual Studio Code shows itself in the over 400 settings you can set. Since you will be spending a lot of time working in VSCode, I recommend that you set the following two settings.

  • Font Size
  • Color Theme

You will be spending quite a bit of time in VSCode as the semester goes on and setting these will help make that time more comfortable on your eyes.

To set the Font size

  1. Click on the Gear at the bottom of the Activity Bar. The Activity Bar is bar on the left of the VSCode Window.
  2. Click on Settings.
    • This will open the User Settings tab.
    • The User Settings tab is split into two editors. The left editor is the list of the default values for those 400+ settings. The right editor is where you can set your own values for the settings you want to change.
  3. In the left editor, look for editor.fontsize.
  4. Copy the entire line containing ‘editor.fontsize’ from the left editor into the right editor between the ‘{’ and ‘}’
  5. Set a custom value for the font size
  6. Click ‘File’ -> ‘Save’
    • At this point, you will see that the User Settings editors font size changed to reflect your custom value. Repeat the last three steps until you find a font size that is comfortable to look at.

To set the Color Theme

  1. Click ‘File’ -> ‘Open File’ and open your template.html file.
  2. Click on the Gear at the bottom of the Activity Bar
  3. Click on Color Theme
    • This brings up the Command Palette with a list of available Color Themes
  4. Slowly scroll through the themes by pressing the down arrow until you find one you like.
  5. Press Enter to save your chosen theme
    • If you are curious, you can re-open the User Settings tab to see what changes selecting a Color Theme made to the right editor.

Additional Reading

https://code.visualstudio.com/docs/

Last updated on Aug 30, 2018