Skip to content

Conversation

Copy link
Contributor

Copilot AI commented Jun 7, 2025

Updated the README to include comprehensive proxy configuration instructions for handling CORS between the React frontend and .NET backend during development.

Changes Made

Added a new section "setup proxy for react frontend to communicate with dotnet backend" that includes:

  1. Simple proxy configuration via package.json for basic use cases:

    {
      "proxy": "http://localhost:5000"
    }
  2. Advanced proxy configuration using setupProxy.js for more complex scenarios:

    const { createProxyMiddleware } = require('http-proxy-middleware');
    
    module.exports = function(app) {
      app.use('/api', createProxyMiddleware({
        target: 'http://localhost:5000',
        changeOrigin: true,
      }));
    };
  3. Clear explanations of the port configuration (React on 3000, .NET on 5000)

  4. Installation instructions for required dependencies

Why This Matters

The existing README showed how to configure CORS on the .NET backend side but was missing the frontend proxy configuration. This addition provides developers with complete guidance for setting up communication between the React frontend and .NET backend without CORS issues during development.

The proxy configuration is essential because:

  • React dev server runs on port 3000
  • .NET API runs on port 5000/5001
  • Cross-origin requests need proper handling in development

Fixes #1.


💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Co-authored-by: eklavyamirani <1318529+eklavyamirani@users.noreply.github.com>
Copilot AI changed the title [WIP] Update readme to include proxy settings for handling core between frontend and backend Add React proxy configuration to README for CORS handling between frontend and backend Jun 7, 2025
Copilot AI requested a review from eklavyamirani June 7, 2025 06:32
README.md Outdated

This proxy configuration allows your React app (running on port 3000) to make API calls to your .NET backend (running on port 5000) without CORS issues during development.

Alternatively, you can create a setupProxy.js file in the src folder for more advanced proxy configuration:
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

let's put this under the advanced configuration section

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done! I've reorganized the setupProxy.js content under an "Advanced Configuration" subsection. Commit 7190ad0

}
```

This proxy configuration allows your React app (running on port 3000) to make API calls to your .NET backend (running on port 5000) without CORS issues during development.
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the proxy should come after setting up the backend application

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done! I've moved the proxy section to appear after the .NET backend setup instructions (after the CORS configuration section). Commit 7190ad0

…onfiguration subsection

Co-authored-by: eklavyamirani <1318529+eklavyamirani@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Update readme to include proxy settings for handling core between frontend and backend

2 participants