Sample AspNet Core with React and Docker support application

A sample .Net 8.0 web API with React and Docker support project for demonstration purposes and as a starting point for a fullstack application.

This project utilizes the .Net 8.0 SDK, React, and Docker to create a development and production environment for a web application, with the addition of Nginx for routing between the React and .Net applications.

I recommend using this repository as a starter project for your fullstack application, as it provides a good starting point for a .Net application with a React frontend, and it is configured to run as a collection of Docker containers, ready for development and production.

Project's sequence graph

Project's main graph

Table of Contents

• About the Project
• Getting Started
  • Prerequisites
  • Running the Application
    • Running the Application without Docker
    • Running the Application with Docker
• Tech stack
• Authors
• Screenshots

About the Project

This project is a sample .Net 8.0 web API with React and Docker support project for demonstration purposes and as a starting point for a fullstack application. The project is designed to run as a collection of Docker containers, with the .Net application running in a container, the React application running in a container (via Nginx), and a PostgreSQL database running in a container. The project also includes an Nginx to route traffic between the React and .Net applications on the same port, but different paths.

It was made to demonstrate how to create a fullstack application with .Net and React, and how to run the application in a Docker environment. The project is also a good starting point for a fullstack application, as it provides a good starting point for a .Net application with a React frontend, and it is configured to run as a collection of Docker containers, ready for development and production.

I created this project because the existing Microsoft's templates did not provide a good starting point (in my opinion) for a fullstack application with .Net and React, and I wanted to have a solid starting point for my fullstack applications, with pre-configured Docker support for production.

Getting Started

To get started, clone the repository and open the project in Visual Studio 2022. The project is configured to run in a Docker container, so you will need to have Docker Desktop installed. Once you have the project open, you can run the project in Visual Studio 2022 and the application will start in a Docker container.

Prerequisites

• Visual Studio 2022
• Docker Desktop
• Node.js
• React
• .Net 8.0 SDK

Running the Application

You can run the application without Docker or as a collection of Docker containers. Generally, the docker-compose file was designed to run the application in a production environment, but it can also be used for development purposes.

Below are the steps to run the application in both environments:

Running the Application without Docker

To run the application without Docker, you can run the .Net application and the React application separately. To run the .Net application, open the project in Visual Studio 2022 and run the application. The client application should start by default, but if it does not, you can navigate to the SampleAspNetReactDockerApp.Client directory and run the following command:

npm install
npm run dev

Create a .env file in the project root directory with the content of the .env.example file.

NOTE: You will need to have Node.js installed to run the client application. The application requires connection to a PostgreSQL database, so you will need to have a PostgreSQL database running. You can configure the connection string in the appsettings.json file in the SampleAspNetReactDockerApp.Server directory, or you can set the ASPNETCORE_CONNECTIONSTRING environment variable to the connection string. You can also run the database in a Docker container (from docker-compose) by running the following command:

docker compose --env-file ./.env up -d app-db

Running the Application with Docker

To run the application with Docker, you can run the following command in the root directory of the project:

Create a .env file in the project root directory with the content of the .env.example file.

docker compose --env-file ./.env up -d

This will start the .Net application, the React-Vite application and the database in separate Docker containers. You can access the application at http://localhost:8080.

Tech stack

• Backend
  • .Net 8.0 - for the server application
  • Entity Framework Core - for the database ORM
  • PostgreSQL - for the database
  • Npgsql - for the PostgreSQL database provider
  • Swagger - for API documentation
  • Microsoft Identity - for user authentication and authorization
  • AutoMapper - for object-to-object mapping
  • FluentValidation - for input validation
  • Serilog - for logging
• Frontend
  • React - for the client application
  • Vite - for the client application
  • Tailwind CSS - for styling
  • Zustand - for state management
  • Shadcn - for good looking, accessible and customizable components
  • TanStack Table - for interactive and accessible tables with data
  • React Router - for routing
  • RadixUI - for building accessible and composable UI components, and as a foundation for Shadcn
  • i18next - for internationalization
  • Lucide Icons - for icons
  • React World Flags - for flags
• Docker - for containerization
• Nginx - for routing between the React and .Net applications
• PostgreSQL - for the database used by the .Net application

Authors

• Cyprian Gburek

Screenshots

Home page in English

Home page in Polish

Home page in English with light theme

Login page

Dashboard page with table (weather forecast, secured by auth)

Dashboard page with selected item from table