{"id":20751455,"url":"https://github.com/sircypkowskyy/sampleaspnetreactdockerapp","last_synced_at":"2025-04-28T13:33:11.920Z","repository":{"id":225059142,"uuid":"759230788","full_name":"SirCypkowskyy/SampleAspNetReactDockerApp","owner":"SirCypkowskyy","description":"A sample .Net 8.0 web API with React and Docker support project for demonstration purposes and as a starting point for a fullstack SPA. ","archived":false,"fork":false,"pushed_at":"2024-03-25T12:15:47.000Z","size":1613,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-30T10:04:51.067Z","etag":null,"topics":["c-sharp","containers","csharp","docker","docker-compose","docker-container","dotnet","dotnet-core","react","reactjs","swagger","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SirCypkowskyy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-02-18T02:13:24.000Z","updated_at":"2024-04-09T14:56:36.000Z","dependencies_parsed_at":"2024-11-17T23:19:16.287Z","dependency_job_id":null,"html_url":"https://github.com/SirCypkowskyy/SampleAspNetReactDockerApp","commit_stats":null,"previous_names":["sircypkowskyy/sampleaspnetreactdockerapp"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SirCypkowskyy%2FSampleAspNetReactDockerApp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SirCypkowskyy%2FSampleAspNetReactDockerApp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SirCypkowskyy%2FSampleAspNetReactDockerApp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SirCypkowskyy%2FSampleAspNetReactDockerApp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SirCypkowskyy","download_url":"https://codeload.github.com/SirCypkowskyy/SampleAspNetReactDockerApp/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251319966,"owners_count":21570483,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["c-sharp","containers","csharp","docker","docker-compose","docker-container","dotnet","dotnet-core","react","reactjs","swagger","typescript"],"created_at":"2024-11-17T08:33:38.843Z","updated_at":"2025-04-28T13:33:11.830Z","avatar_url":"https://github.com/SirCypkowskyy.png","language":"TypeScript","readme":"# Sample AspNet Core with React and Docker support application\n    \n![GitHub license](https://img.shields.io/github/license/SirCypkowskyy/SampleAspNetReactDockerApp)\n![GitHub issues](https://img.shields.io/github/issues/SirCypkowskyy/SampleAspNetReactDockerApp)\n![GitHub pull requests](https://img.shields.io/github/issues-pr/SirCypkowskyy/SampleAspNetReactDockerApp)\n\nA sample .Net 8.0 web API with React and Docker support project for demonstration purposes and as a starting point for a fullstack application. \n\nThis 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.\n\nI 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.\n\n\u003cfigure\u003e\n\u003cimg src=\"static/SequenceGraph.png\" alt=\"Project's sequence graph\" /\u003e\n\u003cfigcaption\u003eProject's sequence graph\u003c/figcaption\u003e\n\u003c/figure\u003e\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n\u003cfigure\u003e\n\u003cimg src=\"static/AppGraph.png\" alt=\"Project's main graph\" /\u003e\n\u003cfigcaption\u003eProject's main graph\u003c/figcaption\u003e\n\u003c/figure\u003e\n\n## Table of Contents\n\n- [About the Project](#about-the-project)\n- [Getting Started](#getting-started)\n  - [Prerequisites](#prerequisites)\n  - [Running the Application](#running-the-application)\n    - [Running the Application without Docker](#running-the-application-without-docker)\n    - [Running the Application with Docker](#running-the-application-with-docker)\n- [Tech stack](#tech-stack)\n- [Authors](#authors)\n- [Screenshots](#screenshots)\n\n## About the Project\n\nThis 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.\n\nIt 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.\n\nI 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.\n\n## Getting Started\n\nTo 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.\n\n### Prerequisites\n\n- [Visual Studio 2022](https://visualstudio.microsoft.com/vs/)\n- [Docker Desktop](https://www.docker.com/products/docker-desktop)\n- [Node.js](https://nodejs.org/en/)\n- [React](https://reactjs.org/)\n- [.Net 8.0 SDK](https://dotnet.microsoft.com/download/dotnet/8.0)\n\n### Running the Application\n\nYou 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.\n\nBelow are the steps to run the application in both environments:\n\n#### Running the Application without Docker\n\nTo 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:\n\n```bash\nnpm install\nnpm run dev\n```\n\n**Create a `.env` file in the project root directory with the content of the `.env.example` file.**\n\n**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:\n\n```bash\ndocker compose --env-file ./.env up -d app-db\n```\n\n#### Running the Application with Docker\n\nTo run the application with Docker, you can run the following command in the root directory of the project:\n\n**Create a `.env` file in the project root directory with the content of the `.env.example` file.**\n\n```bash\ndocker compose --env-file ./.env up -d\n```\n\nThis 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`.\n\n## Tech stack\n\n- Backend\n  - [.Net 8.0](https://dotnet.microsoft.com/download/dotnet/8.0) - for the server application\n  - [Entity Framework Core](https://docs.microsoft.com/en-us/ef/core/) - for the database ORM\n  - [PostgreSQL](https://www.postgresql.org/) - for the database\n  - [Npgsql](https://www.npgsql.org/) - for the PostgreSQL database provider\n  - [Swagger](https://swagger.io/) - for API documentation\n  - [Microsoft Identity](https://docs.microsoft.com/en-us/aspnet/core/security/authentication/identity) - for user authentication and authorization\n  - [AutoMapper](https://automapper.org/) - for object-to-object mapping\n  - [FluentValidation](https://fluentvalidation.net/) - for input validation\n  - [Serilog](https://serilog.net/) - for logging\n- Frontend\n  - [React](https://reactjs.org/) - for the client application\n  - [Vite](https://vitejs.dev/) - for the client application\n  - [Tailwind CSS](https://tailwindcss.com/) - for styling\n  - [Zustand](https://github.com/pmndrs/zustand) - for state management\n  - [Shadcn](https://shadcn.com/) - for good looking, accessible and customizable components\n  - [TanStack Table](https://tanstack.com/table/latest) - for interactive and accessible tables with data\n  - [React Router](https://reactrouter.com/) - for routing\n  - [RadixUI](https://radix-ui.com/) - for building accessible and composable UI components, and as a foundation for Shadcn\n  - [i18next](https://www.i18next.com/) - for internationalization\n  - [Lucide Icons](https://lucide.netlify.app/) - for icons\n  - [React World Flags](https://www.npmjs.com/package/react-world-flags) - for flags\n- [Docker](https://www.docker.com/) - for containerization\n- [Nginx](https://www.nginx.com/) - for routing between the React and .Net applications\n- [PostgreSQL](https://www.postgresql.org/) - for the database used by the .Net application\n\n## Authors\n\n- **[Cyprian Gburek](https://github.com/SirCypkowskyy)**\n\n## Screenshots\n\n\u003cfigure\u003e\n\u003cimg src=\"static/homepage_en.png\" alt=\"Home page in English\" /\u003e\n\u003cfigcaption\u003eHome page in English\u003c/figcaption\u003e\n\u003c/figure\u003e\n\n\u003cfigure\u003e\n\u003cimg src=\"static/homepage_pl.png\" alt=\"Home page in Polish\" /\u003e\n\u003cfigcaption\u003eHome page in Polish\u003c/figcaption\u003e\n\u003c/figure\u003e\n\n\u003cfigure\u003e\n\u003cimg src=\"static/homepage_en_light.png\" alt=\"Home page in English with light theme\" /\u003e\n\u003cfigcaption\u003eHome page in English with light theme\u003c/figcaption\u003e\n\u003c/figure\u003e\n\n\u003cfigure\u003e\n\u003cimg src=\"static/loginpage.png\" alt=\"Login page\" /\u003e\n\u003cfigcaption\u003eLogin page\u003c/figcaption\u003e\n\u003c/figure\u003e\n\n\u003cfigure\u003e\n\u003cimg src=\"static/dashboardpage.png\" alt=\"Dashboard page\" /\u003e\n\u003cfigcaption\u003eDashboard page with table (weather forecast, secured by auth)\u003c/figcaption\u003e\n\u003c/figure\u003e\n\n\u003cfigure\u003e\n\u003cimg src=\"static/dashboardpage_selected.png\" alt=\"Dashboard page with selected item\" /\u003e\n\u003cfigcaption\u003eDashboard page with selected item from table\u003c/figcaption\u003e\n\u003c/figure\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsircypkowskyy%2Fsampleaspnetreactdockerapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsircypkowskyy%2Fsampleaspnetreactdockerapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsircypkowskyy%2Fsampleaspnetreactdockerapp/lists"}