I am creating my dist folder with the command ‘npm run build’ but Vite JS is not compiling a JSON file that I need to retrieve the data from. Why is Vite not passing the JSON file in the dist folder?. I am working in a repo that was shared to me. This is the folder: “LuisDeAnda/src/assets/…” I moved the JSON file to public folder since I read it is better for compiling it. I am assuming the public folder is ‘LuisDeAnda’. But still I cant retrieve the data after npm run build and previewing it. By the way, my app only works fine in my local environment when I launch ‘npm run dev’.
This is my main.js file to:
import "./main.scss";
import "./assets/fonts/Marcheile-Bold-Condensed.woff";
import "./assets/fonts/Marcheile-Bold-Condensed.woff2";
/* DO NOT EDIT ABOVE THIS LINE. You can start editing here. */
let iconCart = document.querySelector(".icon-cart");
let body = document.getElementById("app");
let closeCart = document.querySelector(".close");
let listProductHTML = document.querySelector(".listProduct");
let listCartHTML = document.querySelector(".listCart");
let iconCartSpan = document.querySelector(".icon-cart span");
let listProducts = [];
let carts = [];
let totalBox = document.getElementById("total");
const menuContainer = document.getElementById("menu-container");
// Aqui es para abrir y cerrar el carrito de compras
iconCart.addEventListener("click", () => {
body.classList.toggle("showCart");
});
closeCart.addEventListener("click", () => {
body.classList.remove("showCart");
});
// Aqui se llama la Data del archivo menu json
const initApp = () => {
fetch("/menu.json")
.then((response) => {
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
return response.json();
})
.then((data) => {
// listProducts = data;
listProducts = data.menuList;
console.log(listProducts);
addDataToHTML();
})
.catch((error) => {
console.error("Error:", error);
});
};
// Aqui se renderiza la Data en el navegador
const addDataToHTML = () => {
menuContainer.innerHTML = "";
// listProducts = menuData.menuList;
if (listProducts.length > 0) {
listProducts.forEach((item) => {
let newMenuItem = document.createElement("div");
newMenuItem.classList.add("mybox");
newMenuItem.dataset.id = item.id;
newMenuItem.innerHTML = `
<img src="${item.menuImage}" alt="food" />
<h3>${item.menuName}</h3>
<p>${item.menuDescription}</p>
<p class="price">$${item.menuPrice.toFixed(2)}</p>
<button class="addCart">Add to cart</button>
`;
menuContainer.appendChild(newMenuItem);
});
}
};
initApp();
this is the menu.json:
{
"developerHints": {
"forbidden": [
"Do not edit this "developerHints" property",
"Do not move this json file from this location"
],
"allowed": [
"You can edit "menuList" property as you like",
"It is not necessary, but you can add more properties if you need it"
]
},
"menuList": [
{
"id": 0,
"menuImage": "src/assets/images/gastro/gasto-item-chicken-buger.webp",
"menuName": "Chicken Burger",
"menuDescription": "We placed 70 years of delicious into this sandwich. Taste our legendary hand-battered chicken.",
"menuPrice": 10.0
},
{
"id": 1,
"menuImage": "src/assets/images/gastro/gasto-item-chicken-wings.webp",
"menuName": "Chicken wings",
"menuDescription": "Get your fill with the Texas-Sized Meal: 3PC Legs & Thighs, 2 regular sides plus a signature jalapeƱo pepper.",
"menuPrice": 9.0
},
{
"id": 2,
"menuImage": "src/assets/images/gastro/gasto-item-beer.webp",
"menuName": "Beer",
"menuDescription": "Just simple and fresh beer.",
"menuPrice": 2.2
},
{
"id": 3,
"menuImage": "src/assets/images/gastro/gasto-item-french-fries.webp",
"menuName": "French fries",
"menuDescription": "Our fries are extra-long and center-cut from Grade A potatoes. They are cooked to a golden-brown crisp while remaining slightly soft in the middle. Every batch is cooked to order in our premium quality Canola Oil blend, then lightly salted immediately after leaving the fryer, so the taste melts onto each fry.",
"menuPrice": 12.0
},
{
"id": 4,
"menuImage": "src/assets/images/gastro/gasto-item-milkshake.webp",
"menuName": "Milshake",
"menuDescription": "Our creamy Milkshakes are hand-spun the old-fashioned way each time and feature delicious. Topped with whipped cream and a cherry (except when served via delivery).",
"menuPrice": 1.8
},
{
"id": 5,
"menuImage": "src/assets/images/gastro/gasto-item-fried-chicken.webp",
"menuName": "Fried chicken",
"menuDescription": "We use premium chicken breast tenderloins to make the most tender chicken fingers possible. Our special marinade tenderizes the chicken, locks in moisture and adds flavor.",
"menuPrice": 8.0
}
]
}