Git Installation and Usage

• Git is a free and open-source distributed version control system for tracking software in teams.
• Git (the command-line tool) is used to download code examples from GitHub.

Installing Git

• To install Git, go to the provided link.
• Open a terminal and check the version using git --version.
• The MDN page on Modules has a repository with examples.
• Clone the repository using git clone https://github.com/mdn/js-examples.git.
• Open the repository in VSCode with code js-examples.
• "code" is the command-line command for VSCode; code <path> opens a file or folder.

File Structure

• The file structure includes: modules, canvas.js, square.js, index.html, and main.js.
• Open index.html to find a simple file referencing main.js.
• Right-click index.html, select "Reveal in File Explorer," then double-click to open it in a browser.

CORS Error

• A white screen may appear, and the browser console will show an error message related to CORS.
• CORS (Cross-Origin Resource Sharing) is a common issue when web apps request resources from other domains.
• The html file is looking for a resource using the file:// protocol, which modern browsers block for security.
• The solution is to host the files using the http:// protocol.

VSCode's Live Server Extension

• Install the Live Server extension from VSCode's marketplace to quickly host local files.
• After installing, reload if needed, then right-click index.html and select "Open with Live Server".
• The browser should host the project on port 5500.
• The file can be accessed at http://127.0.0.1:5500/js-examples/module-examples/basic-modules/index.html.
• Refreshing the page will display a blue square and a random-sized square with different colors.

HTTP-Server CLI

• HTTP-Server CLI can be used to quickly host a server.
• Run npm install http-server in the js-examples folder.
• If you attempt to run http-server via the terminal it will return "http-server' is not recognized".
• Instead of installing globally, use the package.json scripts property.
• Open package.json and add the scripts section.
• The index command runs http-server -p 9000.
• npm run index, opens localhost:9000.

Defining Custom Names

• Names that don't sound like a proper command can be defined.
• Cancel the current http-server with Ctrl+C, then run npm run basic-modules-example.
• Now, localhost:9000 will show the blue-square-random-square canvas.
• Shows that you are running something defined under the scripts object in package.json.
• Commands defined in package.json have access to installed packages.
• Hosting serves a specific file/folder, with browsers defaulting to index.html.

Express Library

• Express is a minimalist web framework for Node.
• Run npm install express at js-examples.
• Create server.js and add the provided example code from the express npm page.
• Running node server.js and hitting localhost:3000 displays "Hello World".
• Line 1 imports the library with require using CJS; Line 2 instantiates a server named app.
• Line 4 configures the app to listen to GET requests on path / (IP:PORT).
• The 2nd argument on line 4 is a callback function that is called whenever the server receives a GET request on /.
• The callback function's first argument req has request information and the 2nd argument res is for the callback to respond.
• Update server.js to host index.html pages.
• Stop the server, run it again, and it will display the blue-and-random-squares example.
• Fix the ESM error by updating package.json.
• Instead of manually creating the response, the server hosts static files from modules-examples/basic-modules on the / path.
• A callback function is added to apps listen to indicate the port the app is hosted on and to provide a clickable link.
• Note: Issue with this implementation will be fixed in lab 3.
• Only works running from Root of js-examples folder.

Git Workflow

• Open the "Source Control" tab in VSCode.
• Add "node_modules" to .gitignore file.
• Use Ctrl+P to search for ".gitignore".
• Committing changes saves them to the repository.
• Configure the following basics by running from terminal: git config user.name FirstName LastName and git config user.email [email protected].
• Confirm the values set by running commands without arguments.
• Using the + symbol on the files to stage the files and they'll move from "Changes" to "Staged Changes".
• Add a commit message and press Commit.
• After committing it will display "Sync Changes;" Do not press button because you do not have permission to upload changes to MDN's repository.

Lab Submissions

• Create _your_name_lab2 file to show up at the top of the list without type or any content inside.
• Adding new entry to scripts object in package.json to run http-server on port 4000 with the command npm run your-name-lab2.
• Take screenshot #1 of IDE with package.json, file list open, and terminal.
• Take screenshot #2 of the hosted index.
• Update server.js to host folder module-examples/basic-modules, set path to your name folder on port 5000.
• Take screenshot #3 with source code and terminal running node server.js.
• Ensure there are no warnings about import compatibility.
• Take screenshot #4 localhost:5000/your-name-lab2.