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.