In this assignment you will be expected to write a backend system to handle saving and serving information to and from a client.
Most of the server code has already been provided for you - you will need to concentrate on the internal workings of the server (file system).
Please run npm install
before starting
This project will teach you:
- The difference between GET and POST requests
- How to write files in Node.js
- How to read files in Node.js
This project assumes you've already had experience with:
- JavaScript
- Frontend
- Fetch API
- Tools for testing APIs, such as Postman or Insomnia
For the backend part of this assignment, you are expected to write your code in the file server.js
Let's perform a simple test to see if we can connect to our server.
-
In the
console
, run the command:nodemon server.js
ornode server.js
Hint: The difference between
nodemon
andnode
is thatnodemon
will automatically reload / reserve your file when you make changes.node
will not. -
Once your server is running, you can connect to it with one of your API testing tools (Postman, Insomnia)
Use this URL
http://localhost:3000/save/user
to connect to the server -
What is the response?
In the last assignment, we connected to the server using the path http://localhost:3000/save/user
, but why this path?
The first part, http://localhost
, is because we are running the server locally on our machines. But where does the rest come from?
-
Look at the code inside
server.js
. On the last line we have the following lineapp.listen(3000);
. That number3000
is known as theport
. This is the port number to which the server is listening to. -
Look again at the code inside
server.js
Do you notice the function call, called
app.post()
?This function call is listening for a path called
/save/user
If we put this information together, we build the URL http://localhost:3000/save/user
For this assignment, we will be using the Node.js module, fs
. Look over your notes regarding the Node.js file system.
Before you can use the fs
module, we should import it:
const fs = require('fs');
Research: fs.writeFile()
-
Create a function which will write data to the server
The function should use the
fs.writeFile()
functionThe function should either return a Promise
The function should take 2 arguments,
filename
anddata
Update the app.post()
function with the route /save/user
:
-
Take the
request.body
value andstringify
itHint: You will need to use the
JSON.stringify()
function -
From inside the callback in
app.post()
, call the function you created in Assignment 2, passing in the data you stringified in the previous step. Also pass in an appropriate filename. -
Test your code by making a
POST
request, sending aJSON
object as the body. Include some test data here. When you make your request, it should create a new file with the data you passed in.
Hint: If your testing tool gives you the error
Cannot GET /save/user
, check you are making aPOST
and not aGET
request
Research: fs.readFile()
-
Create a function which will write data to the server
The function should use the
fs.readFile()
functionThe function should either return a Promise - OR - use a Promise natively
The function should take 1 argument,
filename
The function should
return
orresolve
with the data from the file
If you look at the code again, you should notice a function call, called app.get()
. This is the GET
request counterpart for your POST
request. We will make this return a value.
-
From inside the callback in
app.get()
, call the function you created in Assignment 5, passing in the filename you wish to read from.Hint: Remember, this function should return a
Promise
-
If the
Promise
resolves:-
Set the status of the response to 200 with the function
response.status(200)
-
Send the file data back to the user via the function
response.send()
-
-
If the
Promise
rejects:- Set the status of the response to 500 with the function
response.status(500)
- Set the status of the response to 500 with the function
Build a frontend which will make both the GET
and POST
requests you were previously testing with your API testing tool.
-
The frontend should consist of a
<form>
, which will take the following details:- First name
- Last name
- Age
- E-mail address
- Interests
There should be a button to
Submit
the form -
Add a callback to the click event on the button to a
POST
request to the server-
Put all your
<form>
input values into one object -
Use
JSON.stringify
to stringify this object -
Use the
fetch
API to send this object to your server endpoint, with the following options:
method: 'post', headers: { 'Accept': 'application/json, text/plain, */*', 'Content-Type': 'application/json' }, body: data
Look at the generated file on your server. It should contain all the data.
-
-
Add another button on your website which will do a
fetch
GET
request to get the data from the server. -
Display the results on your website