We will use an npm package, serve, for serving up the files. To install, simply run this command:
npm install -g serve
Once installation is completed, you can serve up the files in any folder. To ensure that it's working, let's try serving up a local folder. The code for this section is located in the /chapter-03-dev-env folder of the learn-webassembly repository. Follow these instructions to validate your server installation:
- First, let's create a folder that will contain the code samples we'll be working through for the remainder of the book (the examples use the name book-examples).
- Launch VS Code and select File | Open... from the menu bar for macOS/Linux, and File | Open Folder... for Windows.
- Next, select the folder, book-examples, and press the Open (or Select Folder) button.
- Once VS Code finishes loading, right-click within the VS Code file explorer and select New Folder from the menu and name the folder chapter-03-dev-env.
- Select the chapter-03-dev-env folder and press the New File button (or Cmd/Ctrl + N) to create a new file. Name the file index.html and populate it with the following contents:
<!doctype html>
<html lang="en-us">
<title>Test Server</title>
</head>
<body>
<h1>Test</h1>
<div>
This is some text on the main page. Click <a href="stuff.html">here</a>
to check out the stuff page.
</div>
</body>
</html>
- Create another file in the chapter-03-dev-env folder named stuff.html and populate it with the following contents:
<!doctype html>
<html lang="en-us">
<head>
<title>Test Server</title>
</head>
<body>
<h1>Stuff</h1>
<div>
This is some text on the stuff page. Click <a href="index.html">here</a>
to go back to the index page.
</div>
</body>
</html>
- We will use VS Code's integrated terminal to serve up the files. You can access this by selecting View | Integrated Terminal, or using the keyboard shortcut Ctrl + ` (the ` is the backtick key under the Esc key). Once loaded, run this command to serve up the working folder:
serve -l 8080 chapter-03-dev-env
You should see the following:
The -l 8080 flag tells serve to serve the folder on port 8080. The first link (http://127.0.0.1:8080) is only accessible on your computer. Any links below that can be used to access the page from another computer on your local network. If you navigate to the first link (http://127.0.0.1:8080/index.html) in your browser, you should see this:
Clicking on the here link should bring you to the Stuff page (the address bar will show 127.0.0.1:8080/stuff.html. If everything is working correctly, it's time to validate your browser.