0

backend
   data.js

        module.exports = {
        products: [
       {
        _id:’1′,
       name:’Firenze’,
       category:’Agritourism’,
       image:’/images/product-1.png’,
       price:110,
       brand:’ITALY’,
       rating:4.5,
       numReviews:10,
       countInStock:6
       },
       {
       _id:’2′,
       name:’Calabria’,
       category:’Agritourism’,
       image:’/images/product-2.png’,
       price:130,
       brand:’ITALY’,
       rating:4.5,
       numReviews:10,
       countInStock:6
       },
       {
       _id:’3′,
       name:’Provence’,
       category:’Agritourism’,
       image:’/images/product-3.png’,
       price:150,
       brand:’FRANCE’,
       rating:4.5,
       numReviews:10,
       countInStock:6
       },
       {
       _id:’4′,
       name:’Nouvelle Aquitane’,
       category:’Agritourism’,
       image:’/images/product-4.png’,
       price:180,
       brand:’FRANCE’,
       rating:4.5,
       numReviews:10,
       countInStock:6
       },
       {
       _id:’5′,
       name:’Theth’,
       category:’Agritourism’,
       image:’/images/product-5.png’,
       price:60,
       brand:’ALBANIA’,
       rating:4.5,
       numReviews:10,
       countInStock:6
       },
       {
       _id:’6′,
       name:’Mrizi Zanave’,
       category:’Agritourism’,
       image:’/images/product-6.png’,
       price:100,
       brand:’ALBANIA’,
       rating:4.5,
       numReviews:10,
       countInStock:6
       },
      ],
     };
  server.js

       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
  images
  node modules
  src
    screens
       Error404Screen.js from (screens)/(src)

       const Error404Screen = {
       render: () => {
       return`<div>Page not Found!</div>`;
         },
       };
       export default Error404Screen;

     HomeScreen.js from (screens)/(src)

       const HomeScreen = {
       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
          .map(
          (product) => `
         <li>
         <div class=”product”>
         <a href=”/#/product/${product._id}”>
         <img src=”${product.image}” alt=”${product.name}” />
         </a>
         <div class=”product-name”>
         <a href=”/#/product/2″>
         ${product.name}
         </a>
        </div>
         <div class=”product-brand”>
         ${product.brand}
         </div>
         <div class=”product-price”>
          $${product.price}
         </div>
         </div>
         </li>
          `).join(‘\n’)}
          `
          }
          }
          export default HomeScreen;

       ProductScreen.js from (screens)/(src)

          const ProductScreen = {
          render: () => {
          return`<div>ProductScreen</div>`;
           },
          };
          export default ProductScreen;

    index.js (src)

      import HomeScreen from ‘./screens/HomeScreen.js’;
      import ProductScreen from ‘./screens/ProductScreen.js’;
      import { parseRequestUrl } from ‘./utils.js’;
      import Error404Screen from ‘./screens/Error404Screen.js’;
      const routes = {
      ‘/’:HomeScreen,
      ‘/product/:id’:ProductScreen,
      };
      const router = async() => {
      const request = parseRequestUrl();
      const parseUrl =
      (request.resource ? `/${request.resource}` : ‘/’) +
      (request.id ? ‘/:id’ : ”) +
      (request.verb ? `/${request.verb}` : ”);
       const screen = routes[parseUrl] ? routes[parseUrl] : Error404Screen;
       const main = document.getElementById(‘main-container’);
       main.innerHTML = awaitscreen.render();
       };
       window.addEventListener(‘load’, router);
       window.addEventListener(‘hashchange’, router);

   utils.js(src)

       export const parseRequestUrl = () => {
       const url = document.location.hash.toLowerCase();
       const request = url.split(“/”);
       return {
       resource:request[1],
       id:request[2],
       action:request[3],
        };
       };

  index.html from (frontend)

   <!DOCTYPE html>
   <html lang=”en”>
   <head>
   <meta charset=”UTF-8″>
   <meta http-equiv=”X-UA-Compatible”content=”IE=edge”>
   <meta name=”viewport”content=”width=device-width, initial-scale=1.0″>
   <link rel=”stylesheet”href=”style.css”/>
   <title>m.K.t</title>
   </head>
   <body>
   <div class=”grid-container”>
   <header>
   <div class=”brand”>
   <a href=”/#/”>m.K.t</a>
   </div>
   <div>
   <a href=”/#/signin”>Sign in</a>
   <a href=”/#/cart”>Cart</a>
   </div>
   </header>
   <main id=”main-container”></main>
   <footer>All rights reserved @2022</footer>
   </div>
   <script src=”main.js”></script>
   </body>
   </html>

  package-lock.json from (frontend)

  package.json from (frontend):
  {
   “name”: “frontend”,
   “version”: “1.0.0”,
   “description”: “”,
   “main”: “index.js”,
   “scripts”: {
   “start”: “webpack serve –watch-content-base –open”,
   “test”: “echo \”Error: no test specified\” && exit 1″
   },
   “author”: “”,
   “license”: “ISC”,
   “devDependencies”: {
   “webpack”: “^5.74.0”,
   “webpack-cli”: “^4.10.0”,
   “webpack-dev-server”: “^4.11.1”
   }
   }

  style.css from (frontend)
node_modules
package-lock.json from (backend)
package.json from (backend)

{
“name”: “mkt”,
“version”: “1.0.0”,
“description”: “mkt”,
“main”: “index.js”,
“scripts”: {
“start”: “node backend/server.js”,
“test”: “echo \”Error: no test specified\” && exit 1″
},
“author”: “”,
“license”: “ISC”,
“dependencies”: {
“cors”: “^2.8.5”,
“express”: “^4.18.1”
},
“devDependencies”: {
“webpack”: “^4.43.0”,
“webpack-cli”: “^3.3.12”,
“webpack-dev-server”: “^3.11.0”
}
}

TERMINAL OUTPUT
node (backend):

users-MacBook-Pro:mkt user$ npm start

> [email protected] start
> node backend/server.js

serve at http://localhost:5000

 bash (frontend):

users-MacBook-Pro:mkt user$ cd frontend/
users-MacBook-Pro:frontend user$ npm start

> [email protected] start
> webpack serve –watch-content-base –open

[webpack-cli] Error: Unknown option ‘–watch-content-base’
[webpack-cli] Run ‘webpack –help’ to see available commands and options
users-MacBook-Pro:frontend user$

I tried all suggested options but I keep having:

– error output on the terminal

– localhost:5000 page shows “Error ” and “CANNOT GET”

– localhost:8080 page cannot be reached.

Morena Tirana Asked question September 21, 2022