This template is a SPA application built using ASP.NET Core 5.0 as the REST API server and React/Redux/TypeScript as the web client (Bulma + SASS + styled-components for UI styling). You can find a similar version using Vue + Vuex (and associated libraries) here: aspnet-core-vue-vuex-playground-template
This template is vaguley based on the original React + Redux .NET Core SPA template that was offered around the time of .NET Core 2.0 release (the existing template is a much more simplified version of what was offered in the past and the structure is quite different as well). Using that as a base, this template greatly extends the functionality provided and also uses the latest versions of all referenced libraries/packages. Keep in mind that I use this project (or others like it) as a testing ground for varying libraries/packages and it is not meant to act as a stand-alone final solution - it is more of POC. For example, the login & logout processes are stubbed to simulate the actual process (no real authentication is happening, however, it is something I plan to add to this project in the near future). I plan on keeping this up to date, and the listed technology stack may be subject to change.
Note: All components are written using
React Hooks. Legacy class components are not used.
/health-ui(also, provide an option for viewing the raw JSON data that the UI package prettifies for you at
/healthchecks-json). Access this view in the application via the floating settings cog on right screen by clicking the "Health Checks" link.
/docs& NSwag.MSBuild to handle automatic updates - so that when the project builds, the NSwag CLI will run and generate an updated API specification. Access this view in the application via the floating settings cog on right screen by clicking the "Swagger API" link.
Webpackfor bundling of application assets and HMR (Hot Module Replacement)
SASS+ Font Awesome 5 (using fontawesome-svg-core)
styled-components- CSS-in-JS via template literals - Examples in this project:
Footer.tsxare written using
react-functional-select- A micro-sized & micro-optimized select component for ReactJS. Inspired by
react-selectand built for ultimate performance - leverages
react-windowto virtualize long options data and
styled-componentsto handle styling via CSS-in-JS. Note: I am the author of this package.
Axiosfor REST endpoint requests
react-toastify- a highly configurable toast notification library - comes hooked up to display login error & SignalR hub push notifications examples.
.NET 5.0 SDK
npm installfrom the root of the
ClientAppdirectory to properly install all node packages/dependencies.
rebuild solutionshould resolve them.