{"id":13429760,"url":"https://github.com/bradymholt/aspnet-core-react-template","last_synced_at":"2025-04-13T07:47:56.950Z","repository":{"id":12732714,"uuid":"69121647","full_name":"bradymholt/aspnet-core-react-template","owner":"bradymholt","description":"ASP.NET Core 3.1 / React SPA Template App","archived":false,"fork":false,"pushed_at":"2023-02-23T13:54:48.000Z","size":1032,"stargazers_count":640,"open_issues_count":1,"forks_count":184,"subscribers_count":35,"default_branch":"master","last_synced_at":"2025-04-13T07:47:52.144Z","etag":null,"topics":["ansible","asp-net-core","dotnet-core","mailcatcher","openiddict","postgresql-database","postgressql","react-template","reactjs","spa"],"latest_commit_sha":null,"homepage":"https://www.geekytidbits.com/dotnet-core-react-update/","language":"C#","has_issues":false,"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/bradymholt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":["bradymholt"]}},"created_at":"2016-09-24T18:58:04.000Z","updated_at":"2025-04-09T15:12:21.000Z","dependencies_parsed_at":"2024-01-02T22:43:56.828Z","dependency_job_id":"29ad3f77-b5ac-48fd-bb10-4dce4ea9ca1e","html_url":"https://github.com/bradymholt/aspnet-core-react-template","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bradymholt%2Faspnet-core-react-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bradymholt%2Faspnet-core-react-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bradymholt%2Faspnet-core-react-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bradymholt%2Faspnet-core-react-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bradymholt","download_url":"https://codeload.github.com/bradymholt/aspnet-core-react-template/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248681494,"owners_count":21144700,"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":["ansible","asp-net-core","dotnet-core","mailcatcher","openiddict","postgresql-database","postgressql","react-template","reactjs","spa"],"created_at":"2024-07-31T02:00:44.847Z","updated_at":"2025-04-13T07:47:56.909Z","avatar_url":"https://github.com/bradymholt.png","language":"C#","funding_links":["https://github.com/sponsors/bradymholt"],"categories":["Frameworks, Libraries and Tools","框架, 库和工具","spa","C# #","Application Templates"],"sub_categories":["Application Templates","应用程序模板"],"readme":"# ASP.NET Core / React SPA Template App\n\n\u003cimg align=\"left\" src=\"https://user-images.githubusercontent.com/759811/210273710-b13913e2-0a71-4d9d-94da-1fe538b8a73e.gif\"/\u003e\n\n\u003cbr/\u003e\n\n \u0026nbsp;**Would you take a quick second and ⭐️ my repo?**\n\n\u003cbr/\u003e\n\n\nThis app is a template application using ASP.NET Core 3.1 for a REST/JSON API server and React for a web client.\n\n![screen recording 2017-06-10 at 04 12 pm](https://user-images.githubusercontent.com/759811/27006360-bd3b8152-4df7-11e7-9011-f22204abe4d5.gif)\n\n## Overview of Stack\n- Server\n  - ASP.NET Core 3.1\n  - PostgreSQL 10\n  - Entity Framework Core w/ EF Migrations\n  - JSON Web Token (JWT) authorization\n  - Docker used for development PostgreSQL database and MailCatcher server\n- Client\n  - React 16\n  - Webpack for asset bundling and HMR (Hot Module Replacement)\n  - CSS Modules\n  - Fetch API for REST requests\n- Testing\n  - xUnit for .NET Core\n  - Enzyme for React\n  - MailCatcher for development email delivery\n- DevOps\n  - Ansible playbook for provisioning (Nginx reverse proxy, SSL via Let's Encrypt, PostgreSQL backups to S3)\n  - Ansible playbook for deployment\n\n## Demo\n\n[![Demo Video](https://cloud.githubusercontent.com/assets/759811/26319096/4075a7e2-3ee3-11e7-8017-26df7b278b27.png)](https://www.youtube.com/watch?v=xh5plRGg3Nc)\n\n## Setup\n\n1. Install the following:\n   - [.NET Core 3.1](https://www.microsoft.com/net/core)\n   - [Node.js \u003e= v8](https://nodejs.org/en/download/)\n   - [Ansible \u003e= 2.6](http://docs.ansible.com/ansible/intro_installation.html)\n   - [Docker](https://docs.docker.com/engine/installation/)\n2. Run `npm install \u0026\u0026 npm start`\n3. Open browser and navigate to [http://localhost:5000](http://localhost:5000).\n\nThis template was developed and tested on macOS Sierra but should run on Windows (for development) as well.  If you experience any issues getting it to run on Windows and work through them, please submit a PR!  The production provisioning and deployment scripts (`provision:prod` and `deploy:prod`) use Ansible and require a Linux/Ubuntu \u003e= 16.04 target host.\n\n## Scripts\n\n### `npm install`\n\nWhen first cloning the repo or adding new dependencies, run this command.  This will:\n\n- Install Node dependencies from package.json\n- Install .NET Core dependencies from api/api.csproj and api.test/api.test.csproj (using dotnet restore)\n\n### `npm start`\n\nTo start the app for development, run this command.  This will:\n\n- Run `docker-compose up` to ensure the PostgreSQL and MailCatcher Docker images are up and running\n- Run `dotnet watch run` which will build the app (if changed), watch for changes and start the web server on http://localhost:5000\n- Run Webpack dev middleware with HMR via [ASP.NET JavaScriptServices](https://github.com/aspnet/JavaScriptServices)\n\n### `npm run migrate`\n\nAfter making changes to Entity Framework models in `api/Models/`, run this command to generate and run a migration on the database.  A timestamp will be used for the migration name.\n\n### `npm test`\n\nThis will run the xUnit tests in api.test/ and the Mocha/Enzyme tests in client-react.test/.\n\n### `npm run provision:prod`\n\n _Before running this script, you need to create an ops/config.yml file first.  See the [ops README](ops/) for instructions._\n\n This will run the ops/provision.yml Ansible playbook and provision hosts in ops/hosts inventory file.  Ubuntu 16.04 (Xenial) and Ubuntu 18.04 (Bionic) is supported and tested.\n\n This prepares the hosts to recieve deployments by doing the following:\n  - Install Nginx\n  - Generate a SSL certificate from [Let's Encrypt](https://letsencrypt.org/) and configure Nginx to use it\n  - Install .Net Core\n  - Install Supervisor (will run/manage the ASP.NET app)\n  - Install PostgreSQL\n  - Setup a cron job to automatically backup the PostgreSQL database, compress it, and upload it to S3.\n  - Setup UFW (firewall) to lock everything down except inbound SSH and web traffic\n  - Create a deploy user, directory for deployments and configure Nginx to serve from this directory\n\n### `npm run deploy:prod`\n\n_Before running this script, you need to create a ops/config.yml file first.  See the [ops README](ops/) for instructions._\n\nThis script will:\n - Build release Webpack bundles\n - Package the .NET Core application in Release mode (dotnet publish)\n - Run the ops/deploy.yml Ansible playbook to deploy this app to hosts in /ops/config.yml inventory file.\n\n This does the following:\n  - Copies the build assets to the remote host(s)\n  - Updates the `appsettings.json` file with PostgreSQL credentials specified in ops/group_vars/all file and the app URL (needed for JWT tokens)\n  - Restarts the app so that changes will be picked up\n\n Entity Framework Migrations are [automatically applied upon startup](https://github.com/bradymholt/aspnet-core-react-template/blob/master/api/Program.cs#L23-L24) so they will run when the app restarts.\n\n## Development Email Delivery\n\nThis template includes a [MailCatcher](https://mailcatcher.me/) Docker image so that when email is sent during development (i.e. new user registration), it can be viewed\nin the MailCacher web interface at [http://localhost:1080/](http://localhost:1080/).\n\n## Older Versions\n\nThis template was originally created on .NET Core 1.0 and has been upgraded with new versions of .NET Core.  Older versions can be found on the [Releases](https://github.com/bradymholt/aspnet-core-react-template/releases) page.\n\n## Visual Studio Code config\n\nThis project has [Visual Studio Code](https://code.visualstudio.com/) tasks and debugger launch config located in .vscode/.\n\n### Tasks\n\n- **Command+Shift+B** - Runs the \"build\" task which builds the api/ project\n- **Command+Shift+T** - Runs the \"test\" task which runs the xUnit tests in api.test/ and Mocha/Enzyme tests in client-react.test/.\n\n### Debug Launcher\n\nWith the following debugger launch configs, you can set breakpoints in api/ or the the Mocha tests in client-react.test/ and have full debugging support.\n\n- **Debug api/ (server)** - Runs the vscode debugger (breakpoints) on the api/ .NET Core app\n- **Debug client-react.test/ (Mocha tests)** - Runs the vscode debugger on the client-react.test/ Mocha tests\n\n## Credit\n\nThe following resources were helpful in setting up this template:\n\n- [Sample for implementing Authentication with a React Flux app and JWTs](https://github.com/auth0-blog/react-flux-jwt-authentication-sample)\n- [Angular 2, React, and Knockout apps on ASP.NET Core](http://blog.stevensanderson.com/2016/05/02/angular2-react-knockout-apps-on-aspnet-core/)\n- [Setting up ASP.NET v5 (vNext) to use JWT tokens (using OpenIddict)](http://capesean.co.za/blog/asp-net-5-jwt-tokens/)\n- [Cross-platform Single Page Applications with ASP.NET Core 1.0, Angular 2 \u0026 TypeScript](https://chsakell.com/2016/01/01/cross-platform-single-page-applications-with-asp-net-5-angular-2-typescript/)\n- [Stack Overflow - Token Based Authentication in ASP.NET Core](http://stackoverflow.com/questions/30546542/token-based-authentication-in-asp-net-core-refreshed)\n- [SPA example of a token based authentication implementation using the Aurelia front end framework and ASP.NET core]( https://github.com/alexandre-spieser/AureliaAspNetCoreAuth)\n- [A Real-World React.js Setup for ASP.NET Core and MVC5](https://www.simple-talk.com/dotnet/asp-net/a-real-world-react-js-setup-for-asp-net-core-and-mvc)\n- [Customising ASP.NET Core Identity EF Core naming conventions for PostgreSQL](https://andrewlock.net/customising-asp-net-core-identity-ef-core-naming-conventions-for-postgresql)\n- My own perseverance because this took a _lot_ of time to get right 🤓\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbradymholt%2Faspnet-core-react-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbradymholt%2Faspnet-core-react-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbradymholt%2Faspnet-core-react-template/lists"}