fix(deploy): configure base path and assets for subdirectory deployment

cypress.config.ts

@@ -2,7 +2,7 @@ import { defineConfig } from "cypress";
 
 export default defineConfig({
   e2e: {
-    baseUrl: "http://localhost:5173",
+    baseUrl: "http://localhost:5173/test-abb",
     // SOLUCIÓN: Resolución Full HD para que el banner no tape nada
     viewportWidth: 1920,
     viewportHeight: 1080,

cypress/e2e/navbar.cy.ts

@@ -5,17 +5,18 @@ describe("testing navbar functions", () => {
 
   it("clicking on products works properly", () => {
     cy.get('[data-test="main-products"]').click({ force: true });
-    cy.location("pathname").should("equal", "/products");
+    cy.location("pathname").should("contain", "/products");
   });
 
   it("clicking on products works properly", () => {
     cy.get('[data-test="main-logo"]').click({ force: true });
-    cy.location("pathname").should("equal", "/");
+    // Verify it goes back to root (which is /test-abb/)
+    cy.location("pathname").should("match", /\/test-abb\/?$/);
   });
 
   it.skip("clicking on a product works properly", () => {
     cy.get('[data-test="product-card"]').first().click({ force: true });
-    cy.location("pathname").should("equal", "/product/1");
+    cy.location("pathname").should("contain", "/product/1");
   });
 
   it("login & logout works properly", () => {

src/components/Banner.tsx

@@ -1,9 +1,11 @@
 import { FC } from "react";
 import { Link } from "react-router-dom";
 
+import banner from "../assets/banner.jpg";
+
 const Banner: FC = () => (
   <div className="container mt-8 mx-auto px-4 md:flex font-lora">
-    <img src="/banner.jpg" alt="banner" className="md:w-1/2" />
+    <img src={banner} alt="banner" className="md:w-1/2" />
     <div className="bg-[#e3edf6] dark:bg-slate-600 dark:text-white md:w-1/2 flex flex-col items-center text-center justify-center p-4">
       <h1 className="text-4xl font-bold mb-1">Don't miss the offer</h1>
       <h2 className="text-3xl font-semibold mb-4">Grab it now</h2>

src/components/BannerPopup.tsx

@@ -1,6 +1,7 @@
 import { FC } from "react";
 import { useAppDispatch, useAppSelector } from "../redux/hooks";
 import { updateBanner } from "../redux/features/homeSlice";
+import banner from "../assets/banner.jpg";
 
 const BannerPopup: FC = () => {
   const show = useAppSelector((state) => state.homeReducer.isBannerVisible);
@@ -10,13 +11,12 @@ const BannerPopup: FC = () => {
 
   return (
     <div
-      className={`fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-50 transition-opacity duration-300 ${
-        show ? "opacity-100" : "opacity-0 pointer-events-none"
-      }`}
+      className={`fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-50 transition-opacity duration-300 ${show ? "opacity-100" : "opacity-0 pointer-events-none"
+        }`}
     >
       <div className="relative">
         <img
-          src="/banner.jpg"
+          src={banner}
           alt="banner"
           className="w-[50vw] min-w-[300px] m-auto"
         />

src/components/Cart.tsx

@@ -4,6 +4,7 @@ import { useAppDispatch, useAppSelector } from "../redux/hooks";
 import { emptyCart, setCartState } from "../redux/features/cartSlice";
 import CartRow from "./CartRow";
 import toast from "react-hot-toast";
+import emptyCartImg from "../assets/emptyCart.jpg";
 
 const Cart: FC = () => {
   const dispatch = useAppDispatch();
@@ -78,7 +79,7 @@ const Cart: FC = () => {
                 items.map((item) => <CartRow key={item.id} {...item} />)
               ) : (
                 <div className="flex flex-col justify-center items-center p-4">
-                  <img src="/emptyCart.jpg" alt="empty" className="w-40" />
+                  <img src={emptyCartImg} alt="empty" className="w-40" />
                   <p className="text-center text-xl my-2">Your cart is empty</p>
                 </div>
               )}

src/components/HeroSection.tsx

@@ -1,5 +1,6 @@
 import { FC } from "react";
 import { Link } from "react-router-dom";
+import hero from "../assets/hero.png";
 
 const HeroSection: FC = () => {
   return (
@@ -27,7 +28,7 @@ const HeroSection: FC = () => {
           </div>
         </div>
         <div>
-          <img src="/hero.png" alt="hero" className="ml-auto" />
+          <img src={hero} alt="hero" className="ml-auto" />
         </div>
       </div>
     </div>

src/main.tsx

@@ -6,7 +6,7 @@ import { BrowserRouter } from "react-router-dom";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <BrowserRouter>
+    <BrowserRouter basename="/test-abb">
       <App />
     </BrowserRouter>
   </React.StrictMode>

src/pages/Wishlist.tsx

@@ -1,6 +1,7 @@
 import { FC } from "react";
 import { useAppSelector } from "../redux/hooks";
 import ProductList from "../components/ProductList";
+import emptyCart from "../assets/emptyCart.jpg";
 
 const Wishlist: FC = () => {
   const wishlist = useAppSelector((state) => state.productReducer.wishlist);
@@ -10,7 +11,7 @@ const Wishlist: FC = () => {
         <ProductList title="Your Wishlist" products={wishlist} />
       ) : (
         <div className="flex flex-col justify-center items-center p-8">
-          <img src="/emptyCart.jpg" className="w-60" alt="empty" />
+          <img src={emptyCart} className="w-60" alt="empty" />
           <p className="text-center text-xl font-semibold my-2 dark:text-white">
             Your wishlist is empty
           </p>

vite.config.ts

@@ -4,4 +4,5 @@ import react from '@vitejs/plugin-react'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  base: "/test-abb/",
 })