Powerful ASP.NET Core 3 templates with React, true server-side rendering and Docker support
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.
Bootstrap 4using react-bootstrap.
Reduxstores migrated to Redux Toolkit for boosting development with Redux. Reduced code.
React-Routerand other NPM packages connected to them.
image-webpack-loaderdue to instability. ##### v. 1.6.2 (2019-03-15)
Reactand other packages for it (incl. types).
.NET Coredependency to
WebPackvendor and bundle configurations.
.csprojfile for building and publishing scenarios.
collapsing of the Bootstrap navigation bar,
fixed controller and frontend's service in person update case.
awesome-debounce-promiseto prevent doing frequent queries in live search,
formikto create forms in React without tears.
hosting.jsonwhich contains hosting settings and will be used in the production build.
bind-decoratorpackage and examples with it.
Form. These components are used in examples. ##### v. 1.4.5 (2018-11-02)
ServiceBase.tswhich allows you to upload files to the server. ##### v. 1.3.5 (2018-10-26)
react-router-reduxby the new
Loadercomponent which had trouble in some cases. ##### v. 1.3.2 (2018-10-25)
AppComponentcomponent which allows you to do the "force update" of the "stucked" components (for ex.
logs/directory) and also into Azure Cloud Provider. ##### v. 1.2.1 (2018-10-20)
Loadercomponent which worked incorrect with SSR in some cases. ##### v. 1.2.0 (2018-10-18)
AppRoutecomponent. Solved issue with passing params to components from React Router. If you want to fix it manually, see the commit here.
bash npm run build:dev
IIS Expressselect the
ReactCoreBoilerplate: click on the down arrow near the
IIS Expressand choose Docker or other option.
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:
bash npm run build:dev
Just select the
Dockeroption in the toolbar.
Execute the following command in your project's directory:
bash docker build -t [my image name] .where
[my image name]is your Docker image name.
bash dotnet dev-certs https -ep %USERPROFILE%\.aspnet\https\aspnetapp.pfx -p [my password]
[my password]is your password.
bash dotnet dev-certs https --trust
bash 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]
[my password]- your certificate password (from the 1st step),
[my image name]- your Docker image name.
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.
ERROR in ./ClientApp/styles/loaders/xxx.scss (./nodemodules/css-loader/dist/cjs.js![...]): Error: ENOENT: no such file or directory, scandir 'xxx\nodemodules\node-sass\vendor'
npm rebuild node-sassin 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 "WEBSITENODEDEFAULT_VERSION" to 6.11.2 in the "app settings" in Azure.
Errors when running in development mode after publishing
npm run build:devcommand in the project's dir.