Video 07 load products from backend (basir#6)

* Video-06-Create-NodeJS-Server

* Video-07-Load-Products-From-Backend

Author: basir

README.md

@@ -49,3 +49,19 @@ JS AMAZONA
    8. build parsedUrl and compare with routes
    9. if route exists render it, else render Error404
    10. create screens/Error404.js and render error message
+6. Create Node.JS Server
+   1. run npm init in root jsamazona folder
+   2. npm install express
+   3. create server.js
+   4. add start command as node backend/server.js
+   5. require express
+   6. move data.js from frontend to backend
+   7. create route for /api/products
+   8. return products in data.js
+   9. run npm start
+7. Load Products From Backend
+   1. edit HomeScreen.js
+   2. make render async
+   3. fetch products from '/api/products' in render()
+   4. make router() async and call await HomeScreen.render()
+   5. use cors on backend

frontend/src/data.js backend/data.jsfrontend/src/data.js renamed to backend/data.js

@@ -1,4 +1,4 @@
-export default {
+module.exports = {
   products: [
     {
       _id: '1',

backend/server.js

@@ -0,0 +1,12 @@
+const express = require('express');
+const cors = require('cors');
+const data = require('./data.js');
+const app = express();
+app.use(cors());
+app.get('/api/products', (req, res) => {
+  res.send(data.products);
+});
+
+app.listen(5000, () => {
+  console.log('serve at http://localhost:5000');
+});

frontend/src/app.js

@@ -6,7 +6,7 @@ const routes = {
   '/': HomeScreen,
   '/product/:id': ProductScreen,
 };
-const router = () => {
+const router = async () => {
   const request = parseRequestUrl();
   const parseUrl =
     (request.resource ? `/${request.resource}` : '/') +
@@ -15,7 +15,7 @@ const router = () => {
   const screen = routes[parseUrl] ? routes[parseUrl] : Error404Screen;
 
   const main = document.getElementById('main-container');
-  main.innerHTML = screen.render();
+  main.innerHTML = await screen.render();
 };
 window.addEventListener('load', router);
 window.addEventListener('hashchange', router);

frontend/src/srceens/HomeScreen.js

@@ -1,7 +1,15 @@
-import data from '../data.js';
 const HomeScreen = {
-  render: () => {
-    const { products } = data;
+  render: async () => {
+    const response = await fetch('http://localhost:5000/api/products', {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+    if (!response || !response.ok) {
+      return `<div>Error in getting data</div>`;
+    }
+    const products = await response.json();
+
     return `
     <ul class="products">
       ${products

package.json

@@ -0,0 +1,24 @@
+{
+  "name": "jsamazona",
+  "version": "1.0.0",
+  "description": "JS AMAZONA",
+  "main": "index.js",
+  "scripts": {
+    "start": "node backend/server.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/basir/node-javascript-ecommerce.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/basir/node-javascript-ecommerce/issues"
+  },
+  "homepage": "https://github.com/basir/node-javascript-ecommerce#readme",
+  "dependencies": {
+    "cors": "^2.8.5",
+    "express": "^4.17.1"
+  }
+}