Web API Setup Notes
So far you've learned to build web based applications using what's known as server-side rendering.
A HTTP Request comes into the server and the server executes some code as a result of it. That server-side code winds up sending some HTML back down to the browser, and then the users interacts with it in their web browser. Certain actions that they take (submitting a form, for example) will cause a new request to be initiated which, after going thru the server-side code, will return some new HTML/JS/CSS that the user interacts with.
Front end frameworks like React, Angular, and Vue aim to move a lot of the code that generates HTML off of the server and into the browser. Instead of downloading a whole new page, the client side code can just retrieve data from the server (AJAX) and then use DOM manipulation to update the view in the browser.
Pre-requisites
Go ahead and start setting up the following on your machine, if you don't already have them installed:
| Tool | What we'll use it for | Download Link |
|---|---|---|
| Node | Node is the platform that we'll use to create our application. | Download |
| VS Code | We'll use this to edit our front end code. | Download |
Once you have VS Code installed, you'll want the extensions listed below. Hit ctrl-shift-x to search for them in the marketplace:
| VS Code Extensions | What we'll use it for |
|---|---|
| VS Live Share | Live Share will allow us to easily collaborate. |
We will use Webpack to bundle all of the assets needed for JS, HTML, and CSS:
| npm command | What we'll use it for |
|---|---|
npm init -y |
Sets up a new npm package with defaults |
npm install webpack webpack-dev-server webpack-cli --save-dev |
Uses npm to install Webpack |
"start": "webpack-cli serve --mode development --content-base docs/ --open Chrome" |
Adds a start script to package.json |
npm start |
Runs a development server with the bundle |