What's the best way to structure a React/Vite frontend with a Node/Express backend?

Frontend
1

Hey everyone,

I’m new to React and I’m trying to figure out the best way to set up my project. I want to use React with Vite for the frontend and Node with Express for the backend. But I’m not sure how to structure everything.

Should I keep the frontend and backend in separate folders? Or is it better to have them in the same project? Also, I’m wondering about the best way to handle API calls between the frontend and backend.

I’ve looked online but there’s so much info it’s a bit overwhelming. Can anyone share their experience or point me to some good resources? Thanks a bunch!

// Example frontend component
function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // How should I structure this API call?
    fetch('/api/data')
      .then(res => res.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      {data ? <p>{data.message}</p> : <p>Loading...</p>}
    </div>
  );
}
2

Hey there! have you thought about using a monorepo setup? it’s pretty cool for keeping everything tidy. what about using tools like nx or turborepo? they can help manage both frontend and backend in one project. btw, for API calls, axios is awesome. whats ur experience with state management so far?

3

yo liam, i usually keep frontend and backend separate. easier to manage imo. for api calls, try using fetch or axios in ur react components. create a .env file for ur backend url. keeps things clean. hope this helps!

4

For a React/Vite frontend with a Node/Express backend, I recommend maintaining separate directories for each. This separation enhances modularity and allows independent deployment if needed. In my experience, using environment variables for API endpoints has been crucial for seamless integration. I’ve found that implementing a proxy in the Vite config can streamline development, eliminating CORS issues during local testing. For API calls, I prefer Axios due to its interceptor capabilities and easier request cancellation. Consider implementing a centralized API service layer in your frontend to manage all backend communications efficiently.