0
329
ViewsWhy is my react app not fetching my api data files?
I am still learning MERN stack and I was able to deploy applications twice. I am trying to deploy this MERN stack application but I have not been able to do that for hours.
I placed my reactjs build files in my api folder in a folder called build. This is my folder structure:
In my app.js, I served my static files:
//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;
In my reactjs, I called my one of my api endpoints like this:
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])
}
When I start my backend on port 5000, I tried to access my application but I can only get the header section of the html.
The body remains empty and the page loads forever. It seems not able to fetch the api data. I sincerely dont know. I have watched videos on youtube and I can't seem to find solution.
1 answers
Answer question0
You don't need a dedicated route for index.html. That is messing up with your static folder.
Just use serve static and it will handle serving index.html with everything listed in the folder.
This should be enough for you
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;