Connecting API to front-end

Working on the API side first (Express)

Here are our 'two computers' – the client (the face recognition website) and the server. They're actually on different ports of the same machine – 3000 and 3001. (These are cut/paste snippets from Terminal.)

These are our initial 'endpoints' for our server:
signin, register, profile, images.
To test we will use Postman app.

This is 'server.js' – completely separate from the face recognition app itself.
We need 'body-parser' and 'cors', otherwise we get an error.
This shows the top of the file. (bcrypt is for hashing passwords – more on this later.)

Start Nodemon
Start Postman
Send POST request to server
Server responds

Response changed to JSON

Here we see the 'database'.
Note that root login ['/'] returns the users.
Currently 'signin' is set up for the first user [0].
Commented-out bcrypt stuff in 'signin' route was working ok.

Response conditional on email and password check

Here we can specify an 'id' in the profile route.
The response is a JSON string of the user or "no such user".
Note the destructured 'id' const coming from the 'params' – basically, the ID number entered in the URL.

This is the 'register' route. (Ignore the bcrypt stuff for now.)
const variables 'email', 'name' and 'password' are created from the destructured response from the 'body' - as opposed to a query string from the url.

Here is a PUT request from the 'image' route.
Using the Postman app, every time we click 'Send' the entries are returned to us as a number, and being added to the database.
Again, the 'id' is being destructured from the body of the request, which is more secure, obviously.

We now take a look at the face recogition app – starting with the file App.js

To get things going in App.js of client, we have the lifecycle 'componentDidMount' method, which makes a request to our root. In our API ('server.js' on the 'other' machine), the root responds with the users, in JSON.

However, we will delete componentDidMount from App.js and instead set up our communication with the server from SignIn.js, keeping the component self contained.