ASP.NET Core with React

Yes, absolutely! Building an ASP.NET Core API with a React frontend app is entirely possible using Visual Studio Code (VS Code) without Visual Studio. Here’s a breakdown of the steps involved:


Creating the ASP.NET Core API:

  1. Open VS Code and use the terminal to create a new ASP.NET Core API project:
dotnet new webapi
  1. Choose a template: Opt for “Empty” or another minimal template, as React will handle the frontend.
  2. Install dependencies: Use npm install to install necessary packages for the API, like Microsoft.AspNetCore.Mvc and others depending on your project requirements.
  3. Develop your API: Implement your API endpoints and logic using C# within the project structure.

Creating the React App:

  1. Open a new terminal in VS Code.
  2. Navigate to the directory where you want to create the React app:
cd ..
  1. Use create-react-app to create a new React app:
npx create-react-app my-react-app
  1. Navigate to the created React app directory:
cd my-react-app
  1. Start the React development server:
npm start
  1. Develop your React frontend: Build the UI and connect to your API endpoints using tools like fetch or HTTP libraries like Axios.
  2. Configure proxy (optional): If your API server runs on a different port than the React app, set up a proxy in package.json to avoid cross-origin issues during development.

Running the application:

  1. Start the API server: Run dotnet run in the ASP.NET Core project directory.
  2. Keep the React development server running: It should be running from the previous step.
  3. Access your application: The app will be available in your browser, typically at http://localhost:3000 for the React app and a different port for the API depending on your setup.

Additional Tips:

Remember, this is a brief overview. You’ll find numerous tutorials and resources online covering each step in detail, offering additional guidance and best practices.

I hope this helps you build your desired application using VS Code!