Differences

This shows you the differences between two versions of the page.

--- java-script:node-js:rest-api [2023/08/09 20:11] – removed - external edit (Unknown date) 127.0.0.1
+++ java-script:node-js:rest-api [2023/08/09 20:12] (current) – ↷ Links adapted because of a move operation odefta
@@ Line 1: / Line 1: @@
+====== Simple REST Api backend implementation using Node.js and Express.js ======
+===== Project implementation =====
+First, [[java-script:node-js:setup|setup node.js for a new project]]. \\
+Then, install [[java-script:node-js:express-js|Express.js]]:
+<code>
+npm install express
+</code>
+Create a src folder, inside it we'll place the following files.
+==== Simple Hello World rest service ====
+<code javascript node-rest-express-hello.js>
+import express from "express";
+let port = 3000;
+let app = express();
+//define endpoints
+app.get('/hello', (request, response) => {
+    response.send("Hello World!");
+})
+app.listen(port, () => {
+    console.log(`App listening on port ${port}`);
+});
+</code>
+To start the server:
+<code>
+node src/node-rest-express-hello.js
+</code>
+To access the /hello endpoint, open in a browser: http://localhost:3000/hello
+Hello World! will be displayed.
+==== Simple GET, GET by an attribute, POST ====
+Data is loaded from person.js here but in a real-world application usually it is loaded from a database like mongodb.
+<code javascript people.js>
+export let people = [{
+    name: "John",
+    age: 35,
+    hairColor: "brown"
+}, {
+    name: "Joe",
+    age: 20,
+    hairColor: "blonde"
+}, {
+    name: "Jane",
+    age: 40,
+    hairColor: "red"
+}];
+</code>
+<code javascript node-rest-express-people.js>
+import express from "express";
+import { people } from './people.js';
+let port = 3000;
+let app = express();
+// used for the POST endpoint
+// takes the extra data that the client sends along with the request and puts it on the request argument of the POST endpoint.
+app.use(express.json()); // built-in body-parsing middleware
+app.use(express.urlencoded({ extended: true })); // for parsing application/x-www-form-urlencoded
+//define endpoints
+app.get('/people', (request, response) => {
+    response.json(people);
+})
+app.get('/people/:name', (request, response) => {
+    let { name } = request.params;
+    let person = people.find(x => x.name === name);
+    response.json(person);
+})
+app.post('/people', (request, response) => {
+    let newPerson = request.body;
+    people.push(newPerson);
+    response.json(people);
+})
+app.listen(port, () => {
+    console.log(`App listening on port ${port}`);
+});
+</code>
+=== Test the /people POST endpoint ===
+<note warning>
+By default, web browsers use the GET method when you enter a URL in the address bar. This means you can't directly send a POST request using the address bar of a browser.
+</note>
+To test the POST endpoint we can use Postman, but there [[java-script:send-post-requests|are alternative ways to do it]].
+After defining the body request, hit SEND button. \\
+Here is how the postman POST request and response will look like: \\
+{{:java-script:pasted:20230805-155718.png}}
+==== Load data from a file (server side) ====
+We'll use now people-data.json to load the people data.
+<code javascript people-data.json>
+[{
+    "name": "John",
+    "age": 35,
+    "hairColor": "brown"
+}, {
+    "name": "Joe",
+    "age": 20,
+    "hairColor": "blonde"
+}, {
+    "name": "Jane",
+    "age": 40,
+    "hairColor": "red"
+}]
+</code>
+We'll define a GET endpoint at /file-data. When a GET request is made to this endpoint, the server reads data from a JSON file (people-data.json), parses that data into a JavaScript object (people), and sends that object as a JSON response.
+<code javascript node-rest-express-load-data.js>
+import express from 'express';
+import { promises as fs } from 'fs';
+import { fileURLToPath } from 'url';
+import { dirname } from 'path';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+let port = 3000;
+let app = express();
+//define endpoints
+app.get('/file-data', async (request, response) => {
+    let data = await fs.readFile(__dirname + '/people-data.json');
+    let people = JSON.parse(data);
+    response.json(people);
+})
+app.listen(port, () => {
+    console.log(`App listening on port ${port}`);
+});
+</code>
+Result will be available at http://localhost:3000/file-data/