nickmaev / react-core-boilerplate

Powerful ASP.NET Core 3 templates with React, true server-side rendering and Docker support



Description

React Core Boilerplate is a starting point for building universal/isomorphic React web applications with ASP.NET Core 3 and server-side rendering. All works fine out of the box. It also is helpful for newbies. The project contains a fake authorization system. So you can change it to Identity or the other.
TypeScript and JavaScript versions are available.⚡️

Visual Studio Marketplace

Screenshots

Changes

v. 2.0.3 (2020-07-03)

• Added Docker support. 🐋
• Added XSS attack prevention, thanks to XuHaoJun.
• Updated dependencies, removed unused namespaces.

v. 2.0.0 (2020-05-08)

• Migrated to .NET Core 3.1. 🎉
• Migrated to Bootstrap 4 using react-bootstrap.
• Migrated to Formik.
• Redux stores migrated to Redux Toolkit for boosting development with Redux. Reduced code.
• Logging and Serilog configuration improvements.
• Added HTTPS support to server-side rendering.
• Added editable status code in routes for SEO.
• Updated some dependencies.
• Stability fixes.
• Removed unnecessary NPM dependencies.

v. 1.7.1 (2019-06-02)

• Updated React, Redux, React-Router and other NPM packages connected to them.
• Updated critical NPM dependencies.
• Removed unnecessary NPM dependencies.

v. 1.7.0 (2019-05-05)

• Repository restructuration.
• Added JavaScript version of the React Core Boilerplate. 🎉
• Stability fixes.
• Updated critical dependencies.

v. 1.6.3 (2019-03-19)

• Removed image-webpack-loader due to instability.

v. 1.6.2 (2019-03-15)

• Installed stable Terser plugin.
• Updated React and other packages for it (incl. types).
• Updated WebPack.
• Updated WebPack config for development mode.

v. 1.6.0 (2019-03-13)

• Updated .NET Core dependency to v. 2.2.
• Updated critical NPM packages.
• Updated WebPack dependencies.
• Improved WebPack vendor and bundle configurations.
• Improved .csproj file for building and publishing scenarios.
• Fixed source map generation in development mode.
• Fixed bundle compilation in production mode.
• Other stability fixes.

v. 1.5.4 (2019-02-04)

• Added some minor features.
• Bug fixes: collapsing of the Bootstrap navigation bar, fixed controller and frontend's service in person update case.
• Updated dependencies.

v. 1.5.3 (2018-12-04)

• Added polyfills for supporting IE9, IE11: @babel/polyfill, custom-event-polyfill.
• Updated dependencies.

v. 1.5.2 (2018-12-01)

• Added fulltext live search to example.
• Added WebPack plugins: case-sensitive-paths-webpack-plugin, react-dev-utils
• Added plugins with examples: awesome-debounce-promise to prevent doing frequent queries in live search, formik to create forms in React without tears.
• Fixed some functional and text errors.

v. 1.5.0(1) (2018-11-07)

• Added hosting.json which contains hosting settings and will be used in the production build.
• Added bind-decorator package and examples with it.
• Speeded up of WebPack bundle building.
• Updated domain-wait package. This update allows you to prevent calling for isomorphic fetch requests twice (in server prerender and after it - on client-side).
• Updated redux-thunk package.
• Added new React components to prevent a headache when you build web applications: ModalComponent, Input, MultiSelect, Form. These components are used in examples.

v. 1.4.5 (2018-11-02)

• Added new feature allows a web application to share browser's cookie with NodeServices. Now SSR generates HTML code for authenticated users and makes authenticated isomorphic requests.
• Added method sendFormData to the ServiceBase.ts which allows you to upload files to the server.

v. 1.3.5 (2018-10-26)

• Updated NPM packages: react, redux, react-router.
• Replaced due to deprecation react-router-redux by the new connected-react-router.
• Fixed Loader component which had trouble in some cases.

v. 1.3.2 (2018-10-25)

• Removed unused NPM packages.
• Added package-lock.json.
• Fixed project.

v. 1.3.0 (2018-10-22)

• Updated React package.
• Added the AppComponent component which allows you to do the "force update" of the "stucked" components (for ex. Loader component in LoginPage).
• Added Serilog logger which log into files (logs/ directory) and also into Azure Cloud Provider.

v. 1.2.1 (2018-10-20)

• Fixed Loader component which worked incorrect with SSR in some cases.

v. 1.2.0 (2018-10-18)

• Updated dependency of "ASP.NET Core" package due to vulnerability.
• Added feature which allows you to pass JSON objects to URL query for GET and DELETE methods.

v. 1.1.0 (2018-10-16)

• Fixed AppRoute component. Solved issue with passing params to components from React Router. If you want to fix it manually, see the commit here.

Usage

Installation

1. Install latest .NET Core SDK and Runtime by link.
2. Install of the latest stable Node.js.
3. At the first run you must close the project if it runs in Visual Studio or another IDE. Open project's folder in console and run command npm install.
4. Execute the following command for development in your project's directory. It will compile the main and vendor bundle.

npm run build:dev

5. If you are using Visual Studio 20xx, instead of IIS Express select the YourProjectName or ReactCoreBoilerplate: click on the down arrow near the IIS Express and choose Docker or other option.
6. Build and run project. It will start in Windows Console.

Modify WebPack vendor config

If you modify the WebPack vendor config, you must manually recompile the vendor bundle. Execute the following command in your project's directory to do this:

npm run build:dev

Run with Docker

Visual Studio 20xx

Just select the Docker option in the toolbar.

Build a container

Execute the following command in your project's directory:

docker build -t [my image name] . 

where [my image name] is your Docker image name.

Run a production container on Windows with HTTPS support (for test)

1. Trust the ASP.NET Core HTTPS development certificate on Windows and macOS:

dotnet dev-certs https -ep %USERPROFILE%\.aspnet\https\aspnetapp.pfx -p [my password]

where [my password] is your password.
2. Execute:

dotnet dev-certs https --trust

3. Build your container.
4. Execute:

docker run --rm -it -p 7000:7000 -p 7001:7001 -e ASPNETCORE_URLS="https://+;http://+" -e ASPNETCORE_Kestrel__Certificates__Default__Password="[my password]" -e ASPNETCORE_Kestrel__Certificates__Default__Path=/https/aspnetapp.pfx -v %USERPROFILE%\.aspnet\https:/https/ [my image name]

where [my password] - your certificate password (from the 1st step), [my image name] - your Docker image name.

Elements

Third-party libraries:

• TypeScript - all frontend based on TypeScript.
• fork-ts-checker-webpack-plugin - Webpack plugin that runs typescript type checker on a separate process.
• React - main library which worked as isomorphic.
• React Router - router for React.
• react-bootstrap - Bootstrap 4 for React.
• React-Helmet - isomorphic SEO helpers.
• Redux - store.
• Redux Toolkit - library for boosting development with Redux.
• Formik - library for building forms for React.
• Connected React Router - Redux binding for React Router.
• SASS - CSS preprocessor.
• WebPack 4 - bundler.
• Axios - isomorphic fetch util.
• ts-nameof - allows you to use type-safe names of inputs in the form.
• json-to-url - allows you to pass JSON objects to URL query for GET and DELETE methods.
• Serilog - allows you to log into files (logs/ directory) and also into Azure Cloud Provider.

Own libraries / fixed forks:

• domain-wait - domain-task replacement with async/await support and new features.
• NVal - jQuery-validation-like Vanilla JS validator.
• NVal-Tippy - Vanilla JS validation with awesome tooltips.
• NSerializeJson - flexible form to JSON serializer based on Vanilla JS.

Issues

Known issues

• ERROR in ./ClientApp/styles/loaders/xxx.scss (./node_modules/css-loader/dist/cjs.js![...]): Error: ENOENT: no such file or directory, scandir 'xxx\node_modules\node-sass\vendor'
  Execute npm i and npm rebuild node-sass in your project's directory.

• WebPack Hot Module Replacement [HMR] doesn't work with IIS
  Will be fixed. Use Kestrel for development instead.

• HTTP Error 500
  Probably you don't have the latest version of Node.js.

• HTTP Error 502.5
  You must install the latest "ASP.NET Core SDK" and "Runtime and Hosting Bundle" using this link: https://www.microsoft.com/net/download/dotnet-core/2.1

• HTTP error 500 when hosted in Azure
  Set the "WEBSITE_NODE_DEFAULT_VERSION" to 6.11.2 in the "app settings" in Azure.

• Errors when running in development mode after publishing
  Execute npm run build:dev command in the project's dir.

Other issues

• If you will have any issue with the project starting, you can see errors in logs ("/logs" directory). Please, do this before the open an issue on GitHub. Don't forget to mention the version of the React Core Boilerplate (JavaScript or TypeScript)

License

MIT

react-core-boilerplate's Issues

Deployment Azure gives HTTP 500 Error

First of all many thanks for a great starter template, it's exactly what I was looking for!

You don't happen to know how to deploy this web app to a cloud provider? I am using Visual Studio 2017 publish feature to push the code to an Azure Web App but I cannot get it to work :( The login page won't load and I get an HTTP 500 error. Pointing the browser to /api/person gives me the person data back so the app is apparently running. Done a lot of googling but it's very difficult to find any info on how to correctly deploy an SSR web app to Azure.

Publishing to Azure - TypeError: Cannot read property 'minify' of undefined

When I try to publish to azure I get the following error ERROR in vendor.js from Terser
TypeError: Cannot read property 'minify' of undefined
at minify (C:\Development\Azure\Azure Developer Course\Functions\TodoRestApi\TodoWebSiteReact\node_modules\terser-webpack-plugin\dist\minify.js:175:23) on command node node_modules/webpack/bin/webpack.js --env.prod

Any Update For .Net 6?

Hey,

Are you going to update react-core-boilerplate to .Net 6 or more stable. As .Net 3.0 is no longer supported. Please let me know if there will be future changes.

Module not found: Can't resolve 'react-dom' in '<local dir>\node_modules\react-transition-group'

I'm attempting to import react libraries into my application on this boilerplate template but receiving the following errors:

Errors

This is preventing me from being able to utilize libraries in the react front-end, which has been a big issue for me. Any suggestions?

Using the template from dotnet cli

Can this be used from the dotnet cli, if yes please share the details.

Thank you for such clean and useful starter code base

HTTP Error 502.5

When making a brand new project with this and after NPM INSTALL and NPM BUILD:DEV i get http ERROR 502.5 and cannot figure out why.

Add chunk support for SSR

After several monthes development, both client and server side packaged js files become huge, more than 13mb. Webpack suppport to split then js file into chunk. Hope add this feature into this template.

Hot update fails after refresh

Hey Guys,
I have an issue with this template, and i am a little bit advanced on .Net Core, but this is my first time with a React/WebPack/Typescript project.
The issue is this: Everytime i launch the project, or when i make an update in the tsx component, my main page looks like this :

And, after everytime i hit F5, this is what it looks like :

After some debug sessions, i noticed that the only difference i have, is that in both cases every files are loaded, but in case i just update a tsx file, i have a new main-client.[id generated].hot-update.js loaded in the website:

I don't know if it is related, but the main fact is that, everytime i hit F5 in my website, it does'nt behave like a hot update, can you tell me how to set this ?
Thanks a lot,

Error: pngquant failed to build, make sure that libpng-dev is installed (Win10)

Getting this error when doing npm install in Windows 10

‼ Command failed: C:\projects\react-core-boilerplate-master\ReactCoreBoilerplate\node_modules\pngquant-bin\vendor\pngquant.exe --version


  ‼ pngquant pre-build test failed
  i compiling from source
  × Error: pngquant failed to build, make sure that libpng-dev is installed
    at Promise.all.then.arr (C:\projects\react-core-boilerplate-master\ReactCoreBoilerplate\node_modules\execa\index.js:231:11)
    at process._tickCallback (internal/process/next_tick.js:68:7)
npm WARN [email protected] requires a peer of tslint@^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: `node lib/install.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\<username>\AppData\Roaming\npm-cache\_logs\2019-03-02T16_54_05_901Z-debug.log

Feature Request: Allow developer to use JavaScript or TypeScript

I know I'm not alone in this when I say that I'm a JavaScript developer that has never touched TypeScript. It would be great if there was a way to allow the developer to use JavaScript instead of TypeScript.

Additionally in previous versions of Visual Studio (if I remember correctly) Microsoft allowed for extensions to extend the One ASP.NET dialog to provide your own options when creating a new project. I'm not sure if this changed with recent versions of Visual Studio but it would be great if when selecting the project type if the developer could choose between JavaScript and TypeScript.

VS2019 Inquiries about Breakpoints

Thank you for providing a great Template consisting of React and .net core :)

I have a question about debugging.

The "React Core Boilerplate (TypeScript)" was run in debug mode on vs2019.

We also specified a breakpoint in "LoginPage.tsx".
But it didn't stop.

Can I get some help with debugging methods?

I'm studying.
I'm not very good at it.
I'm sorry if I'm not good enough.
I used a translator because I couldn't speak English well.

template performance problems

Hi,

First, I must say that your template helped me a lot in beggining development on .Net Core + React. Thanks.

But technologies is in progress and I have some questions for this template development:

1. Temlate not use react-script. Many developers consider that this package more productive. Is its implementation planned?
2. Your server-side require double rendering if use async request. As I known this problem not have solution.
3. Redux state write in HTML that leads to an increase file and low productive. This problem have solution?

NodeInvocationException: Cannot read property 'getCurrentStack' of undefined

I downloaded the latest 1.7.1, after run npm i and npm run build:prod, I couldn't run TypeScript app successfully.

I tried in node.js 10 and 12 version.

The error message: An unhandled exception occurred while processing the request.

NodeInvocationException: Cannot read property 'getCurrentStack' of undefined
TypeError: Cannot read property 'getCurrentStack' of undefined
at pushCurrentDebugStack (webpack-internal:///./node_modules/@hot-loader/react-dom/cjs/react-dom-server.node.development.js:2561:56)
at ReactDOMServerRenderer.read (webpack-internal:///./node_modules/@hot-loader/react-dom/cjs/react-dom-server.node.development.js:3156:11)
at renderToString (webpack-internal:///./node_modules/@hot-loader/react-dom/cjs/react-dom-server.node.development.js:3646:27)
at renderApp (webpack-internal:///./ClientApp/boot-server.tsx:28:504)
at eval (webpack-internal:///./ClientApp/boot-server.tsx:28:581)
at new Promise ()
at eval (webpack-internal:///./ClientApp/boot-server.tsx:23:829)
at C:\Users\YUXB\source\repos\react-core-boilerplate-master\RCB.TypeScript\ClientApp\dist\vendor.js:1:811947
at C:\Users\YUXB\source\repos\react-core-boilerplate-master\RCB.TypeScript\ClientApp\dist\vendor.js:1:813369
at bound (domain.js:422:14)
Microsoft.AspNetCore.NodeServices.HostingModels.HttpNodeInstance.InvokeExportAsync(NodeInvocationInfo invocationInfo, CancellationToken cancellationToken)

Prerendering failed because of error: ReferenceError: window is not defined

I have installed the library: npm install react-wavy-audio and this library needs window to be defined, Once I ran the application and getting the below exception in the browser.

Microsoft.AspNetCore.NodeServices.HostingModels.NodeInvocationException: Prerendering failed because of error: ReferenceError: window is not defined
at eval (webpack-internal:///./node_modules/react-wavy-audio/dist/index.js:40:4)
at createCommonjsModule (webpack-internal:///./node_modules/react-wavy-audio/dist/index.js:29:35)
at eval (webpack-internal:///./node_modules/react-wavy-audio/dist/index.js:32:18)
at Object../node_modules/react-wavy-audio/dist/index.js

@NickMaev @XuHaoJun can you please help me out to resolve this exception?

Error Cannot find module 'rimraf' React Core Boilerplate

I got this error after I built the app. Cannot find module 'rimraf'

For the benefit of others, this fixed it.

npm cache clean --force
npm install --force rimraf
npm install --force fs-extra

Unused parameters

These two methods have unused parameters:

react-core-boilerplate/RCB.JavaScript/Extensions/ServiceCollectionExtensions.cs

Line 74 in 9671f66

Func<IServiceProvider, TImplementation> implementationFactory)

react-core-boilerplate/RCB.JavaScript/Extensions/ServiceCollectionExtensions.cs

Line 127 in 9671f66

TService implementationInstance)

Are the parameters needed? FxCop is complaining that these parameters should either be removed or used in the method body.

Add Person results in: Maximum call stack size exceeded

react-dom.development.js:20065 Download the React DevTools for a better development experience: https://fb.me/react-devtools
client.js:92 [HMR] connected
react-dom.development.js:17461 Uncaught RangeError: Maximum call stack size exceeded
at objEquiv (index.js:43)
at module.exports (index.js:26)
at objEquiv (index.js:91)
at module.exports (index.js:26)
at objEquiv (index.js:91)
at module.exports (index.js:26)
at objEquiv (index.js:91)
at module.exports (index.js:26)
at objEquiv (index.js:91)
at module.exports (index.js:26)
rethrowOriginalError @ react-dom.development.js:17461
performUnitOfWork @ react-dom.development.js:18169
workLoop @ react-dom.development.js:18190
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
replayUnitOfWork @ react-dom.development.js:17437
renderRoot @ react-dom.development.js:18309
performWorkOnRoot @ react-dom.development.js:19165
performWork @ react-dom.development.js:19077
performSyncWork @ react-dom.development.js:19051
interactiveUpdates$1 @ react-dom.development.js:19320
interactiveUpdates @ react-dom.development.js:2169
dispatchInteractiveEvent @ react-dom.development.js:4880
react-dom.development.js:16013 The above error occurred in the component:
in HelmetWrapper (created by ExamplePage)
in div (created by ExamplePage)
in ExamplePage (created by Context.Consumer)
in Connect(ExamplePage) (created by Route)
in Route (created by withRouter(Connect(ExamplePage)))
in withRouter(Connect(ExamplePage)) (created by Route)
in div (created by AuthorizedLayout)
in div (created by AuthorizedLayout)
in AuthorizedLayout (created by Route)
in Route (created by AppRoute)
in AppRoute
in Switch
in Router (created by ConnectedRouter)
in ConnectedRouter (created by Context.Consumer)
in ConnectedRouterWithContext (created by Context.Consumer)
in Connect(ConnectedRouterWithContext)
in Provider
in AppContainer

React will try to recreate this component tree from scratch using the error boundary you provided, AppContainer.
logCapturedError @ react-dom.development.js:16013
logError @ react-dom.development.js:16049
callback @ react-dom.development.js:16979
callCallback @ react-dom.development.js:11312
commitUpdateEffects @ react-dom.development.js:11351
commitUpdateQueue @ react-dom.development.js:11342
commitLifeCycles @ react-dom.development.js:16257
commitAllLifeCycles @ react-dom.development.js:17592
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
commitRoot @ react-dom.development.js:17788
completeRoot @ react-dom.development.js:19240
performWorkOnRoot @ react-dom.development.js:19169
performWork @ react-dom.development.js:19077
performSyncWork @ react-dom.development.js:19051
interactiveUpdates$1 @ react-dom.development.js:19320
interactiveUpdates @ react-dom.development.js:2169
dispatchInteractiveEvent @ react-dom.development.js:4880
react-hot-loader.development.js:285 RangeError: Maximum call stack size exceeded
at objEquiv (index.js:43)
at module.exports (index.js:26)
at objEquiv (index.js:91)
at module.exports (index.js:26)
at objEquiv (index.js:91)
at module.exports (index.js:26)
at objEquiv (index.js:91)
at module.exports (index.js:26)
at objEquiv (index.js:91)
at module.exports (index.js:26)
error @ react-hot-loader.development.js:285
componentDidCatch @ react-hot-loader.development.js:1319
callback @ react-dom.development.js:16980
callCallback @ react-dom.development.js:11312
commitUpdateEffects @ react-dom.development.js:11351
commitUpdateQueue @ react-dom.development.js:11342
commitLifeCycles @ react-dom.development.js:16257
commitAllLifeCycles @ react-dom.development.js:17592
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
commitRoot @ react-dom.development.js:17788
completeRoot @ react-dom.development.js:19240
performWorkOnRoot @ react-dom.development.js:19169
performWork @ react-dom.development.js:19077
performSyncWork @ react-dom.development.js:19051
interactiveUpdates$1 @ react-dom.development.js:19320
interactiveUpdates @ react-dom.development.js:2169
dispatchInteractiveEvent @ react-dom.development.js:4880
react-dom.development.js:506 Warning: AppContainer: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI.
warningWithoutStack @ react-dom.development.js:506
callback @ react-dom.development.js:16988
callCallback @ react-dom.development.js:11312
commitUpdateEffects @ react-dom.development.js:11351
commitUpdateQueue @ react-dom.development.js:11342
commitLifeCycles @ react-dom.development.js:16257
commitAllLifeCycles @ react-dom.development.js:17592
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
commitRoot @ react-dom.development.js:17788
completeRoot @ react-dom.development.js:19240
performWorkOnRoot @ react-dom.development.js:19169
performWork @ react-dom.development.js:19077
performSyncWork @ react-dom.development.js:19051
interactiveUpdates$1 @ react-dom.development.js:19320
interactiveUpdates @ react-dom.development.js:2169
dispatchInteractiveEvent @ react-dom.development.js:4880
ExamplePage.tsx:21 Uncaught (in promise) TypeError: Cannot read property 'setLastPage' of null
at ExamplePage.eval (ExamplePage.tsx:21)
at step (ExamplePage.tsx:20)
at Object.eval [as next] (ExamplePage.tsx:20)
at fulfilled (ExamplePage.tsx:20)
(anonymous) @ ExamplePage.tsx:21
step @ ExamplePage.tsx:20
(anonymous) @ ExamplePage.tsx:20
fulfilled @ ExamplePage.tsx:20
Promise.then (async)
step @ ExamplePage.tsx:20
(anonymous) @ ExamplePage.tsx:20
__awaiter @ ExamplePage.tsx:20
ExamplePage.onClickPersonEditorAdd__saveBtn @ ExamplePage.tsx:20
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:270
executeDispatch @ react-dom.development.js:561
executeDispatchesInOrder @ react-dom.development.js:583
executeDispatchesAndRelease @ react-dom.development.js:680
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:688
forEachAccumulated @ react-dom.development.js:662
runEventsInBatch @ react-dom.development.js:816
runExtractedEventsInBatch @ react-dom.development.js:824
handleTopLevel @ react-dom.development.js:4824
batchedUpdates$1 @ react-dom.development.js:19260
batchedUpdates @ react-dom.development.js:2150
dispatchEvent @ react-dom.development.js:4903
interactiveUpdates$1 @ react-dom.development.js:19315
interactiveUpdates @ react-dom.development.js:2169
dispatchInteractiveEvent @ react-dom.development.js:4880

Use of <Redirect> outside a <Router>

Environment:

• Windows 10
• Node 10.15.1
• Visual Studio 2017 v 15.9.9
• .NET Core 2.2.105

I got the template installed and building (both from "npm run build: dev" and in VS), When I run the app, I get the following exception:

Microsoft.AspNetCore.NodeServices.HostingModels.NodeInvocationException: You should not use <Redirect> outside a <Router>
Invariant Violation: You should not use <Redirect> outside a <Router>
    at invariant (webpack://%5Bname%5D_%5Bhash%5D/./node_modules/invariant/invariant.js?:40:15)
    at Object.eval [as children] (webpack://%5Bname%5D_%5Bhash%5D/./node_modules/react-router/Redirect.js?:81:50)
    at ReactDOMServerRenderer.render (webpack://%5Bname%5D_%5Bhash%5D/./node_modules/react-dom/cjs/react-dom-server.node.development.js?:3292:55)
    at ReactDOMServerRenderer.read (webpack://%5Bname%5D_%5Bhash%5D/./node_modules/react-dom/cjs/react-dom-server.node.development.js?:3059:29)
    at renderToString (webpack://%5Bname%5D_%5Bhash%5D/./node_modules/react-dom/cjs/react-dom-server.node.development.js?:3526:27)
    at renderApp (Z:\src\React Core Boilerplate1\React Core Boilerplate1\ClientApp\dist\main-server.js:158:496)
    at Z:\src\React Core Boilerplate1\React Core Boilerplate1\ClientApp\dist\main-server.js:158:504
    at new Promise (<anonymous>)
    at Z:\src\React Core Boilerplate1\React Core Boilerplate1\ClientApp\dist\main-server.js:153:800
    at eval (webpack://%5Bname%5D_%5Bhash%5D/./node_modules/aspnet-prerendering/Prerendering.js?:37:35)
   at Microsoft.AspNetCore.NodeServices.HostingModels.HttpNodeInstance.InvokeExportAsync[T](NodeInvocationInfo invocationInfo, CancellationToken cancellationToken)
   at Microsoft.AspNetCore.NodeServices.HostingModels.OutOfProcessNodeInstance.InvokeExportAsync[T](CancellationToken cancellationToken, String moduleName, String exportNameOrNull, Object[] args)
   at Microsoft.AspNetCore.NodeServices.NodeServicesImpl.InvokeExportWithPossibleRetryAsync[T](String moduleName, String exportedFunctionName, Object[] args, Boolean allowRetry, CancellationToken cancellationToken)
   at Microsoft.AspNetCore.NodeServices.NodeServicesImpl.InvokeExportWithPossibleRetryAsync[T](String moduleName, String exportedFunctionName, Object[] args, Boolean allowRetry, CancellationToken cancellationToken)
   at AspNetCore.Views_Main_Index.ExecuteAsync() in Z:\src\React Core Boilerplate1\React Core Boilerplate1\Views\Main\Index.cshtml:line 7
   at Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderPageCoreAsync(IRazorPage page, ViewContext context)
   at Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderPageAsync(IRazorPage page, ViewContext context, Boolean invokeViewStarts)
   at Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderAsync(ViewContext context)
   at Microsoft.AspNetCore.Mvc.ViewFeatures.ViewExecutor.ExecuteAsync(ViewContext viewContext, String contentType, Nullable`1 statusCode)
   at Microsoft.AspNetCore.Mvc.ViewFeatures.ViewExecutor.ExecuteAsync(ActionContext actionContext, IView view, ViewDataDictionary viewData, ITempDataDictionary tempData, String contentType, Nullable`1 statusCode)
   at Microsoft.AspNetCore.Mvc.ViewFeatures.ViewResultExecutor.ExecuteAsync(ActionContext context, ViewResult result)
   at Microsoft.AspNetCore.Mvc.ViewResult.ExecuteResultAsync(ActionContext context)
   at Microsoft.AspNetCore.Mvc.Internal.ResourceInvoker.InvokeResultAsync(IActionResult result)
   at Microsoft.AspNetCore.Mvc.Internal.ResourceInvoker.InvokeNextResultFilterAsync[TFilter,TFilterAsync]()
   at Microsoft.AspNetCore.Mvc.Internal.ResourceInvoker.Rethrow(ResultExecutedContext context)
   at Microsoft.AspNetCore.Mvc.Internal.ResourceInvoker.ResultNext[TFilter,TFilterAsync](State& next, Scope& scope, Object& state, Boolean& isCompleted)
   at Microsoft.AspNetCore.Mvc.Internal.ResourceInvoker.InvokeResultFilters()
   at Microsoft.AspNetCore.Mvc.Internal.ResourceInvoker.InvokeNextResourceFilter()
   at Microsoft.AspNetCore.Mvc.Internal.ResourceInvoker.Rethrow(ResourceExecutedContext context)
   at Microsoft.AspNetCore.Mvc.Internal.ResourceInvoker.Next(State& next, Scope& scope, Object& state, Boolean& isCompleted)
   at Microsoft.AspNetCore.Mvc.Internal.ResourceInvoker.InvokeFilterPipelineAsync()
   at Microsoft.AspNetCore.Mvc.Internal.ResourceInvoker.InvokeAsync()
   at Microsoft.AspNetCore.Builder.RouterMiddleware.Invoke(HttpContext httpContext)
   at Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware.Invoke(HttpContext context)
   at Microsoft.AspNetCore.SpaServices.Webpack.ConditionalProxyMiddleware.Invoke(HttpContext context)
   at Microsoft.AspNetCore.SpaServices.Webpack.ConditionalProxyMiddleware.Invoke(HttpContext context)
   at Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.Invoke(HttpContext context)

I get this error whether I run the app through IIS Express or from the "MyProject" debug profile (runs in console).

I am very much a noob at this, so I don't know if it is relevant, but I could never resolve this issue from the npm install:

npm WARN [email protected] requires a peer of react-router@^4.3.1 but none is installed. You must install peer dependencies yourself.

It appears that [email protected] as configured in package.json does not fulfill the dependency for connected-react-router. Trying to change the versions to get it working always seemed to invalidate some other dependency. Nonetheless, connected-react-router is present in node-modules. This may be unrelated.

Any idea why I am getting this error?

Set "ASPNETCORE_ENVIRONMENT": "Production", => site.css not created, file missing error

site.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)
react-dom.development.js:20065 Download the React DevTools for a better development experience: https://fb.me/react-devtools
2(index):1 EventSource's response has a MIME type ("text/html") that is not "text/event-stream". Aborting the connection.
site.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)
(index):1 EventSource's response has a MIME type ("text/html") that is not "text/event-stream". Aborting the connection.

ASP.NET Core 3.0

Awesome repo. Learned a lot from your code. Any chance you would be updating this repo to use ASP Core 3? I wonder what would change.