fix localhost:1337

app/routes/cart.tsx

@@ -20,7 +20,7 @@ import {
 import { useEffect } from "react";
 import { z } from "zod";
 import { useCart } from "~/cart.context";
-import { useOptionalUser, useProductsData } from "~/root";
+import { useEnv, useOptionalUser, useProductsData } from "~/root";
 import { createUserSession, getUser } from "~/sessions.server";
 import { SocketProvider, useSocket } from "~/socket.context";
 import {
@@ -318,6 +318,7 @@ const CartItem = ({
     const productInCart = calculatedPrice.products.find(
         (p) => p.documentId === documentId.value,
     );
+    const { STRAPI_URL } = useEnv() || {}
     if (!selectedProduct) return null;
     if (!productInCart) return null;
 
@@ -335,7 +336,7 @@ const CartItem = ({
                     <img
                         src={
                             selectedProduct.image.url.startsWith("/")
-                                ? `http://localhost:1337${selectedProduct.image.url}`
+                                ? `${STRAPI_URL}${selectedProduct.image.url}`
                                 : selectedProduct.image.url
                         }
                         alt={selectedProduct.image.alternativeText}

app/routes/orders.$orderId.tsx

@@ -1,5 +1,6 @@
 import type { LoaderFunctionArgs } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
+import { useEnv } from "~/root";
 import { logout, requireUser } from "~/sessions.server";
 import { getOrderById } from "~/strapi.server";
 
@@ -54,6 +55,7 @@ const LineItem = ({
 }: {
   line: Awaited<ReturnType<typeof getOrderById>>['lines'][0]
 }) => {
+  const { STRAPI_URL } = useEnv() || {}
 
 
   return (
@@ -64,7 +66,7 @@ const LineItem = ({
           <img
             src={
               line.produit.image.url.startsWith("/")
-                ? `http://localhost:1337${line.produit.image.url}`
+                ? `${STRAPI_URL}${line.produit.image.url}`
                 : line.produit.image.url
             }
             alt={line.produit.image.alternativeText}

app/routes/products.$productSlug.tsx

@@ -1,6 +1,7 @@
 import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
-import { useLoaderData } from "@remix-run/react";
+import { json, useLoaderData } from "@remix-run/react";
 import { useCart } from '~/cart.context';
+import { serverEnv } from "~/sessions.server";
 import { getProductBySlug } from "~/strapi.server";
 
 export const loader = async ({ params }: LoaderFunctionArgs) => {
@@ -13,26 +14,27 @@ export const loader = async ({ params }: LoaderFunctionArgs) => {
     slug: productSlug,
   });
 
-  return product
+  const { STRAPI_URL } = serverEnv
+  return json({ product, STRAPI_URL })
 };
 
 export const meta: MetaFunction<typeof loader> = ({
   data
 }) => {
   return [
-    { title: data?.name },
-    { name: "description", content: `${data?.description} - ${data?.price}€` },
+    { title: data?.product.name },
+    { name: "description", content: `${data?.product.description} - ${data?.product.price}€` },
     {
       property: "og:image",
-      content: data?.image.url.startsWith("/")
-        ? `http://localhost:1337${data.image.url}`
-        : data?.image.url
+      content: data?.product.image.url.startsWith("/")
+        ? `${data.STRAPI_URL}${data.product.image.url}`
+        : data?.product.image.url
     }
   ];
 };
 
 export default function Index() {
-  const product = useLoaderData<typeof loader>();
+  const { product, STRAPI_URL } = useLoaderData<typeof loader>();
   const { addToCart, cartItems } = useCart();
 
   return (
@@ -44,7 +46,7 @@ export default function Index() {
         <img
           src={
             product.image.url.startsWith("/")
-              ? `http://localhost:1337${product.image.url}`
+              ? `${STRAPI_URL}${product.image.url}`
               : product.image.url
           }
           alt={product.image?.alternativeText}

app/routes/products._index.tsx

@@ -1,5 +1,6 @@
 import type { LoaderFunctionArgs } from '@remix-run/node';
 import { Link, type MetaFunction, useLoaderData, useSearchParams } from '@remix-run/react';
+import { useEnv } from '~/root';
 import { getCategories, getProducts } from '~/strapi.server';
 
 export const loader = async ({ request }: LoaderFunctionArgs) => {
@@ -22,6 +23,7 @@ export const meta: MetaFunction = () => {
 };
 
 export default function Index() {
+  const { STRAPI_URL } = useEnv() || {}
   const { products, categories } = useLoaderData<typeof loader>();
   const [searchParams, setSearchParams] = useSearchParams();
   return (
@@ -71,7 +73,7 @@ export default function Index() {
                 <img
                   src={
                     product.image.url.startsWith('/')
-                      ? `http://localhost:1337${product.image.url}`
+                      ? `${STRAPI_URL}${product.image.url}`
                       : product.image.url
                   }
                   alt={product.image?.alternativeText}

app/strapi.server.ts

@@ -110,7 +110,7 @@ export const fetchStrapi = async ({
         }
     );
     const response = await fetch(
-        `http://localhost:1337/api/${resourceName}?${urlParams}`,
+        `${serverEnv.STRAPI_URL}/api/${resourceName}?${urlParams}`,
         {
             method,
             body: