01 - Test Client HTML
In this module, we're going to set up the front-end client HTML for testing our requests in the DOM.
Overview
In this module, we'll add some basic HTML and JavaScript on the front-end to allow us to learn to interact with our server in a practical way. It's important to know that Postman is acting as a proxy-client for us, a stand in until we get something built on the front-end. As we transition to working with a custom client, there are some additions that need to be made to our server that Postman didn't need, including more middleware and headers. We'll show you those things in future modules.
File Structure
Please add a client folder underneath the server folder:
Initialize NPM
In order for our client to run on localhost:8080
, we'll need to add http-server
. Let's set up npm to allow this to happen:
cd into the
client
directory.Run
npm init
. Make sure apackage.json
file is created.Run
npm install http-server --save
.Your folder structure should now look like this:
index.html
Copy the following code into the index.html
file. Before we talk more about it, use what you know from previous experience with client-side programming to see if you can guess what this code is doing:
Overview of the HTML
This tutorial assumes you have a basic grasp on HTML, so we'll briefly summarize what we've done. Overall, we're create a single HTML file that will allow us to test our endpoints, but there are a few items to note here: 1. Head: We're not doing any styling, so there are no links to custom CSS files in the head. However, we are going to use Bootstrap, so we did add a CDN link to the Bootstrap CSS file that is needed for building tables. 2. Body Table: We're building a table that will show us how to to access and display our data from the server in the DOM. This just makes an easy-to-use button system for testing our endpoints. 3. We add the Bootstrap JS CDN and our own custom JavaScript file, which we'll use next.
Test
To test this, we'll work in a web browser using http-server
. If you haven't installed this package globally, do the following first: 1. Navigate to your client folder in your terminal window. 2. Run the following command: npm install http-server --save
. This will add http-server
to your package.json so anyone cloning your project will install it. Additionally, if you install a package locally inside a project that you also have installed globally, the local version will be used unless you override it. This usually won't cause any issues, but it's good to be aware that this is happening. 3. In your package.json
, add the following to the scripts
property (or create it if it's not already there). http-server
won't run without it:
Once you have http-server
setup either locally or globally, follow these steps to get the client running: 1. cd into your client directory. 2. Run npm start
. 3. Open a browser and go to localhost:8080. 4. You should see the following:
Last updated