6 |
7 |
18 |
19 |
119 |
120 | );
121 |
122 | export default Dashboard;
--------------------------------------------------------------------------------
/GhostUI/ClientApp/src/containers/FetchData/ForecastTable.tsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 | import type { WeatherState } from '../../store/weatherSlice';
3 |
4 | type ForecastTableProps = Pick
8 |
17 |
9 |
16 |
20 |
118 |
21 |
117 |
22 |
24 |
116 | Technology Stack
23 |24 |
25 |
115 |
26 |
70 |
27 |
69 | -
28 |
- 29 | 35 | React 36 | 37 | is an open-source JavaScript library that makes no 38 | assumptions about the rest of your technology stack. It 39 | allows you to build encapsulated components that mange 40 | their own state using JavaScript, instead of templates. 41 | 42 |
- 43 | 49 | Redux 50 | 51 | centralizes your application"s state and logic and helps 52 | you write applications that behave consistently and are 53 | easy to test. 54 | 55 |
- 56 | 62 | Bulma 63 | 64 | is open source CSS framework based on Flexbox (with no 65 | JQuery dependency). 66 | 67 |
71 |
114 |
72 |
113 | -
73 |
- 74 | 80 | ASP.NET Core 81 | 82 | is an open source web framework for building modern web 83 | apps and services with .NET. Creates websites based on 84 | HTML5, CSS, and JavaScript that are simple, fast, and can 85 | scale to millions of users. 86 | 87 |
- 88 | 94 | SASS 95 | 96 | is a CSS pre-processor extension to help provide more 97 | flexibility & maintainability to your style-sheets. 98 | 99 |
- 100 | 106 | TypeScript 107 | 108 | is a typed superset of JavaScript that compiles to plain 109 | JavaScript 110 | 111 |
| Date | 11 |Temp. (C) | 12 |Temp. (F) | 13 |Summary | 14 |
|---|---|---|---|
| {f.dateFormatted} | 20 |{f.temperatureC} | 21 |{f.temperatureF} | 22 |{f.summary} | 23 |
10 |
14 |
25 |
42 | );
43 | };
44 |
45 | export default FetchData;
46 |
--------------------------------------------------------------------------------
/GhostUI/ClientApp/src/containers/Form/CheckboxFormGroup.tsx:
--------------------------------------------------------------------------------
1 | import { Checkbox } from '../../components';
2 | import { setChecked } from '../../store/formSlice';
3 | import { useCallback, type FunctionComponent } from 'react';
4 | import { useAppSelector, useAppDispatch } from '../../store';
5 |
6 | const CheckboxFormGroup: FunctionComponent = () => {
7 | const dispatch = useAppDispatch();
8 | const checked = useAppSelector
26 |
41 | 27 | Fetch Data 28 |
29 |
30 |
40 | 31 | Weather forecast 32 |
33 |34 | This component demonstrates fetching data from the server and working with URL parameters. 35 |
36 |
16 |
28 | );
29 | };
30 |
31 | export default CheckboxFormGroup;
--------------------------------------------------------------------------------
/GhostUI/ClientApp/src/containers/Form/CounterFormGroup.tsx:
--------------------------------------------------------------------------------
1 | import type { FunctionComponent } from 'react';
2 | import { increment, decrement } from '../../store/formSlice';
3 | import { useAppSelector, useAppDispatch } from '../../store';
4 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
5 |
6 | const CounterFormGroup: FunctionComponent = () => {
7 | const dispatch = useAppDispatch();
8 | const count = useAppSelectorCheckbox
17 |Toggle the checkbox
18 |
19 |
24 |
25 | Value: {checked.toString()}
26 |
12 |
32 | );
33 | };
34 |
35 | export default CounterFormGroup;
36 |
--------------------------------------------------------------------------------
/GhostUI/ClientApp/src/containers/Form/SelectFormGroup.tsx:
--------------------------------------------------------------------------------
1 | import { Select } from 'react-functional-select';
2 | import { useCallback, type FunctionComponent } from 'react';
3 | import { useAppSelector, useAppDispatch } from '../../store';
4 | import { THEME_CONFIG, DROPDOWN_TEST_DATA } from '../../config';
5 | import { selectOption, type SelectOption } from '../../store/formSlice';
6 |
7 | const SelectFormGroup: FunctionComponent = () => {
8 | const dispatch = useAppDispatch();
9 | const selectedOption = useAppSelectorCounter
13 |Use buttons to increment/decrement
14 |15 | 21 | 27 |
28 |
29 | Value: {count}
30 |
17 |
31 | );
32 | };
33 |
34 | export default SelectFormGroup;
35 |
--------------------------------------------------------------------------------
/GhostUI/ClientApp/src/containers/Form/index.tsx:
--------------------------------------------------------------------------------
1 | import type { FunctionComponent } from 'react';
2 | import SelectFormGroup from './SelectFormGroup';
3 | import CounterFormGroup from './CounterFormGroup';
4 | import CheckboxFormGroup from './CheckboxFormGroup';
5 |
6 | const Form: FunctionComponent = () => (
7 | Dropdown
18 |Select options from the dropdown
19 |
20 |
26 |
27 |
28 | Value: {selectedOption?.label}
29 |
8 |
19 | );
20 |
21 | export default Form;
22 |
--------------------------------------------------------------------------------
/GhostUI/ClientApp/src/containers/Login/LoginControls.tsx:
--------------------------------------------------------------------------------
1 | import { memo, Fragment } from 'react';
2 | import { Checkbox } from '../../components';
3 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
4 |
5 | type LoginControlsProps = Readonly<{
6 | rememberMe: boolean;
7 | handleRememberMeCheck: (checked: boolean) => void;
8 | }>;
9 |
10 | const LoginControls = memo
9 |
18 | Form Controls
10 |
11 |
17 |
12 |
16 |
16 |
22 |
31 |
29 |
48 | );
49 | });
50 |
51 | PasswordInput.displayName = 'PasswordInput';
52 |
53 | export default PasswordInput;
54 |
--------------------------------------------------------------------------------
/GhostUI/ClientApp/src/containers/Login/UserNameInput.tsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 | import { classNames } from '../../utils';
3 | import { useTextInput } from '../../hooks';
4 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
5 |
6 | type UserNameInputProps = Readonly<{
7 | isInputInvalid: boolean;
8 | textInput: ReturnType
30 |
36 |
37 |
47 |
25 |
37 | );
38 | });
39 |
40 | UserNameInput.displayName = 'UserNameInput';
41 |
42 | export default UserNameInput;
43 |
--------------------------------------------------------------------------------
/GhostUI/ClientApp/src/containers/Login/index.tsx:
--------------------------------------------------------------------------------
1 | import { useCallback, useState, useRef, type FormEvent, type FunctionComponent } from 'react';
2 | import { Routes } from '../../config';
3 | import { useTextInput } from '../../hooks';
4 | import LoginControls from './LoginControls';
5 | import UserNameInput from './UserNameInput';
6 | import PasswordInput from './PasswordInput';
7 | import { useNavigate } from 'react-router-dom';
8 | import { toast, type Id } from 'react-toastify';
9 | import { Authenticator } from '../../components';
10 | import { useAppDispatch, useAppSelector } from '../../store';
11 | import BasedGhostLogoPNG from '../../assets/image/based-ghost-main.png';
12 | import { loginAsync, setAuthStatus, resetState, AuthStatusEnum, type Credentials } from '../../store/authSlice';
13 |
14 | const Login: FunctionComponent = () => {
15 | const toastIdRef = useRef
26 |
32 |
33 |
36 |
78 |
113 |
79 |
112 | Login
80 |Please login to proceed
81 |
82 | 
89 |
105 |
111 | Error.
8 |An error occurred while processing your request.
9 | 10 | @if (Model.ShowRequestId) 11 | { 12 |
13 | Request ID: @Model.RequestId
14 |
Development Mode
18 |19 | Swapping to the Development environment displays detailed information about the error that occurred. 20 |
21 |22 | The Development environment shouldn't be enabled for deployed applications. 23 | It can result in displaying sensitive information from exceptions to end users. 24 | For local debugging, enable the Development environment by setting the ASPNETCORE_ENVIRONMENT environment variable to Development 25 | and restarting the app. 26 |
27 | -------------------------------------------------------------------------------- /GhostUI/Pages/Error.cshtml.cs: -------------------------------------------------------------------------------- 1 | using System.Diagnostics; 2 | using Microsoft.AspNetCore.Mvc; 3 | using Microsoft.AspNetCore.Mvc.RazorPages; 4 | 5 | namespace GhostUI.Pages 6 | { 7 | [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)] 8 | public class ErrorModel : PageModel 9 | { 10 | public string? RequestId { get; set; } 11 | 12 | public bool ShowRequestId => !string.IsNullOrEmpty(RequestId); 13 | 14 | public void OnGet() 15 | { 16 | RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier; 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /GhostUI/Pages/_ViewImports.cshtml: -------------------------------------------------------------------------------- 1 | @namespace GhostUI.Pages 2 | @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers -------------------------------------------------------------------------------- /GhostUI/Program.cs: -------------------------------------------------------------------------------- 1 | using GhostUI.Hubs; 2 | using GhostUI.Extensions; 3 | using HealthChecks.UI.Client; 4 | using Microsoft.AspNetCore.Hosting; 5 | using Microsoft.Extensions.Hosting; 6 | using Microsoft.AspNetCore.Builder; 7 | using Microsoft.Extensions.DependencyInjection; 8 | using Microsoft.AspNetCore.Diagnostics.HealthChecks; 9 | using Microsoft.AspNetCore.SpaServices.ReactDevelopmentServer; 10 | 11 | var spaSrcPath = "ClientApp"; 12 | var corsPolicyName = "AllowAll"; 13 | var builder = WebApplication.CreateBuilder(args); 14 | 15 | // Custom healthcheck example 16 | builder.Services.AddHealthChecks() 17 | .AddGCInfoCheck("GCInfo"); 18 | 19 | // Write healthcheck custom results to healthchecks-ui (use InMemory for the DB - AspNetCore.HealthChecks.UI.InMemory.Storage nuget package) 20 | builder.Services.AddHealthChecksUI() 21 | .AddInMemoryStorage(); 22 | 23 | builder.Services.AddCorsConfig(corsPolicyName); 24 | builder.Services.AddControllers(); 25 | builder.Services.AddSignalR(); 26 | 27 | // Add Brotli/Gzip response compression (prod only) 28 | builder.Services.AddResponseCompressionConfig(builder.Configuration); 29 | 30 | // Config change in asp.net core 3.0+ - 'Async' suffix in action names get stripped by default - so, to access them by full name with 'Async' part - opt out of this feature. 31 | builder.Services.AddMvc(opt => opt.SuppressAsyncSuffixInActionNames = false); 32 | 33 | // In production, the React files will be served from this directory 34 | builder.Services.AddSpaStaticFiles(opt => opt.RootPath = $"{spaSrcPath}/dist"); 35 | 36 | // Register the Swagger services (using OpenApi 3.0) 37 | builder.Services.AddOpenApiDocument(settings => 38 | { 39 | settings.Version = "v1"; 40 | settings.Title = "GhostUI API"; 41 | settings.Description = "Detailed Description of API"; 42 | }); 43 | 44 | var app = builder.Build(); 45 | 46 | // If development, enable Hot Module Replacement 47 | // If production, enable Brotli/Gzip response compression & strict transport security headers 48 | if (app.Environment.IsDevelopment()) 49 | { 50 | app.UseDeveloperExceptionPage(); 51 | } 52 | else 53 | { 54 | app.UseResponseCompression(); 55 | app.UseExceptionHandler("/Error"); 56 | app.UseHsts(); 57 | } 58 | 59 | app.UseCustomExceptionHandler(); 60 | app.UseCors(corsPolicyName); 61 | 62 | // Show/write HealthReport data from healthchecks (AspNetCore.HealthChecks.UI.Client nuget package) 63 | app.UseHealthChecksUI(); 64 | app.UseHealthChecks("/healthchecks-json", new HealthCheckOptions() 65 | { 66 | Predicate = _ => true, 67 | ResponseWriter = UIResponseWriter.WriteHealthCheckUIResponse 68 | }); 69 | 70 | // Register the Swagger generator and the Swagger UI middlewares 71 | // NSwage.MsBuild + adding automation config in GhostUI.csproj makes this part of the build step (updates to API will be handled automatically) 72 | app.UseOpenApi(); 73 | app.UseSwaggerUi3(); 74 | app.UseHttpsRedirection(); 75 | app.UseRouting(); 76 | 77 | // Map controllers / SignalR hubs 78 | app.UseEndpoints(endpoints => 79 | { 80 | endpoints.MapControllers(); 81 | endpoints.MapHub12 | 13 | ## Technology Stack Overview 14 | - **Server** 15 | - ASP.NET Core 7.0 16 | - SignalR 17 | - HealthChecks + [AspNetCore.HealthChecks.UI package](https://github.com/xabaril/AspNetCore.Diagnostics.HealthChecks) - this provides a nicely formatted UI for viewing the results of the HealthCheck modules in use and is accessed on ```/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. 18 | - API Documentation using Swagger UI - using package [NSwag.AspNetCore](http://NSwag.org) to prettify the specification output and display at ```/swagger/*``` & [NSwag.MSBuild](http://NSwag.org) 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. 19 | - Brotli/Gzip response compression (production build) 20 | - **Client** 21 | - [`React`](https://reactjs.org/) 22 | - [`Redux`](https://redux.js.org/) 23 | - [`TypeScript`](https://www.typescriptlang.org/) 24 | - [`Webpack`](https://github.com/webpack/webpack) for bundling of application assets and HMR (Hot Module Replacement) 25 | - [`Bulma CSS`](https://bulma.io/) + [`SASS`](https://github.com/sass/sass) + Font Awesome 5 (using fontawesome-svg-core) 26 | - [`styled-components`](https://www.styled-components.com/) - CSS-in-JS via template literals - Examples in this project: `Checkbox.tsx`, `Spinner.tsx`, `Authenticator.tsx`, `Settings.tsx`, and `Footer.tsx` are written using `styled-components`. 27 | - [`react-functional-select`](https://github.com/based-ghost/react-functional-select) - A micro-sized & micro-optimized select component for ReactJS. Inspired by [`react-select`](https://github.com/JedWatson/react-select) and built for ultimate performance - leverages [`react-window`](https://github.com/bvaughn/react-window) to virtualize long options data and `styled-components` to handle styling via CSS-in-JS. Note: I am the author of this package. 28 | - [`Axios`](https://github.com/axios/axios) for REST endpoint requests 29 | - [`react-toastify`](https://github.com/fkhadra/react-toastify) - a highly configurable toast notification library - comes hooked up to display login error & SignalR hub push notifications examples. 30 | - react-router/react-router-dom - route transitions handled using [`react-transition-group`](https://github.com/reactjs/react-transition-group) 31 | - Custom, reusable Dropdown & Checkbox components that provide full functionality w/ state management (without a JQuery dependency). 32 | - Two different loader components (spinner & authentication animation w/ callback for success/fail) 33 | 34 | ## Setup 35 | - [Node.js version >= 14](https://nodejs.org/en/download/) 36 | - [`.NET 7.0 SDK`](https://dotnet.microsoft.com/download/dotnet/7.0) 37 | - Clone the repository and run ```npm install``` from the root of the ```ClientApp``` directory to properly install all node packages/dependencies. 38 | - Opening the solution in VisualStudio should automatically trigger nuget package and other dependencies to be restored (assuming latest version of VisualStudio and installation of .NET Core version mentioned aboved). If issues are encountered, attempting to refresh the dependencies or executing a ```rebuild solution``` should resolve them. 39 | - A solution.sln file is added to act as an entry point to open the application in Visual Studio. Visual Studio 2022 and up. 40 | - GhostUI/GhostUI.csproj acts as the entry point to open the application in Visual Studio Code. 41 | -------------------------------------------------------------------------------- /demo/react_dot_net_52530-2021.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/based-ghost/aspnet-core-react-redux-playground-template/443cfc3188dedcd7701d6c66d4b91df20359b487/demo/react_dot_net_52530-2021.gif -------------------------------------------------------------------------------- /solution.sln: -------------------------------------------------------------------------------- 1 | 2 | Microsoft Visual Studio Solution File, Format Version 12.00 3 | # Visual Studio Version 17 4 | VisualStudioVersion = 17.0.32014.148 5 | MinimumVisualStudioVersion = 10.0.40219.1 6 | Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "GhostUI", "GhostUI\GhostUI.csproj", "{07B28075-ED26-412D-9CB6-3CD29C2AC86F}" 7 | EndProject 8 | Global 9 | GlobalSection(SolutionConfigurationPlatforms) = preSolution 10 | Debug|Any CPU = Debug|Any CPU 11 | Release|Any CPU = Release|Any CPU 12 | EndGlobalSection 13 | GlobalSection(ProjectConfigurationPlatforms) = postSolution 14 | {07B28075-ED26-412D-9CB6-3CD29C2AC86F}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 15 | {07B28075-ED26-412D-9CB6-3CD29C2AC86F}.Debug|Any CPU.Build.0 = Debug|Any CPU 16 | {07B28075-ED26-412D-9CB6-3CD29C2AC86F}.Release|Any CPU.ActiveCfg = Release|Any CPU 17 | {07B28075-ED26-412D-9CB6-3CD29C2AC86F}.Release|Any CPU.Build.0 = Release|Any CPU 18 | EndGlobalSection 19 | GlobalSection(SolutionProperties) = preSolution 20 | HideSolutionNode = FALSE 21 | EndGlobalSection 22 | GlobalSection(ExtensibilityGlobals) = postSolution 23 | SolutionGuid = {D460BDE0-0DDC-4449-8606-B39723D467BB} 24 | EndGlobalSection 25 | EndGlobal 26 | --------------------------------------------------------------------------------