0
330
Vistas¿Por qué mi aplicación de reacción no obtiene mis archivos de datos de API?
Todavía estoy aprendiendo la pila MERN y pude implementar aplicaciones dos veces. Estoy tratando de implementar esta aplicación de pila MERN, pero no he podido hacerlo durante horas.
Coloqué mis archivos de compilación de reactjs en mi carpeta api en una carpeta llamada build. Esta es mi estructura de carpetas: 
En mi app.js, entregué mis archivos estáticos:
//routes app.use("/api/v1/auth", authRoute); app.use("/api/v1/users",userRoute); app.use("/api/v1/posts",postRoute); app.use(express.static(path.join(__dirname, '/build'))) app.get('/', (req, res)=>{ res.sendFile(path.join(__dirname + '/build', 'index.html')); }) app.use(checkDB); module.exports = app;En mi reactjs, llamé a uno de mis puntos finales de API así:
const URL = 'http://localhost:5000/api/v1' export default function Home() { useEffect( () => { dispatch({ type: "ISLOADING_START" }); const fetchPosts = async ()=>{ const res = await axios.get(URL+"/posts"+search) setPosts(res.data) dispatch({ type: "ISLOADING_END" }); } fetchPosts() }, [search]) } Cuando inicio mi backend en el puerto 5000, traté de acceder a mi aplicación, pero solo puedo obtener la sección de encabezado del html. 
El cuerpo permanece vacío y la página se carga para siempre. Parece que no puede obtener los datos de la API. sinceramente no lo se. He visto videos en youtube y parece que no puedo encontrar la solución.
1 Respuestas
Responde la pregunta0
No necesita una ruta dedicada para index.html. Eso es estropear tu carpeta estática.
Simplemente use serve static y se encargará de servir index.html con todo lo que figura en la carpeta.
Esto debería ser suficiente para ti
app.use("/api/v1/auth", authRoute); app.use("/api/v1/users", userRoute); app.use("/api/v1/posts", postRoute); app.use(express.static(path.join(__dirname, '/build'))); app.use(checkDB); module.exports = app;