Why do I need a web server?

• Simply: dynamic content does not render properly if you open up an html file directly in your browser (without a web server)
• In order to ensure that your development environment emulates the internet (how your webpage will look when displayed to others), you need to run your code on a local web server!
• After next class, I will send instructions on how to use Github Pages to upload your website to a remote web server that can be accessed via the internet.

Setting up a Web Server

Possible Approaches

1. Use VS Code Live Server extension to automatically run web server (quick but limited) This is great for small-scale projects, but will probably overload your memory if you have a large project (using large files/media assets). Use this to start, and switch to (2) if your computer slows down too much when testing.
2. Start a local web server (more involved but scales well)

(1) Web Server with VS Code Live Server

1. To start a web server with VS code, simply download the 'Live Reload' extension - link.

2. To initiate the local web server, you can either do the following in your html file

   • Right click on a file, and click Open with Live Server

     

   • or Click 'Go Live' on the bottom toolbar

     

3. A web server will automatically generate, with the listed port number. Go to localhost:*portNumber (i.e. localhost:8000)* to view the web page.

(2) Starting Web Server from Terminal/CMD Prompt

Mac Users

1. Open up VS Code to the folder that has your index.html file
2. Open up Terminal from VS Code. From file, menu: Terminal > New Terminal
3. In the terminal, run this command: python -m SimpleHTTPServer 8000
4. Open your web browser to locahost:8000 and you should be able to view your webpage

In this image I'm using a slightly different command (py -m http.server 8000) because my machine is configured to run Python differently. Be sure to use the command in instructions above instead.