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.
TypeScript and JavaScript versions are available.⚡️
Bootstrap 4
using react-bootstrap.Redux
stores migrated to Redux Toolkit for boosting development with Redux. Reduced code.Serilog
configuration improvements.server-side rendering
.React
, Redux
, React-Router
and other NPM packages connected to them.image-webpack-loader
due to instability.Terser
plugin.React
and other packages for it (incl. types).WebPack
..NET Core
dependency to v. 2.2
.WebPack
dependencies.WebPack
vendor and bundle configurations..csproj
file for building and publishing scenarios.collapsing of the Bootstrap navigation bar
, fixed controller and frontend's service in person update case
.@babel/polyfill
, custom-event-polyfill
.case-sensitive-paths-webpack-plugin
, react-dev-utils
awesome-debounce-promise
to prevent doing frequent queries in live search, formik
to create forms in React without tears.hosting.json
which contains hosting settings and will be used in the production build.bind-decorator
package and examples with it.ModalComponent
, Input
, MultiSelect
, Form
. These components are used in examples.sendFormData
to the ServiceBase.ts
which allows you to upload files to the server.react
, redux
, react-router
.react-router-redux
by the new connected-react-router
.Loader
component which had trouble in some cases.AppComponent
component which allows you to do the "force update" of the "stucked" components (for ex. Loader
component in LoginPage
).logs/
directory) and also into Azure Cloud Provider.Loader
component which worked incorrect with SSR in some cases.AppRoute
component. Solved issue with passing params to components from React Router. If you want to fix it manually, see the commit here.npm install
.npm run build:dev
IIS Express
select the YourProjectName
or ReactCoreBoilerplate
:
click on the down arrow near the IIS Express
and 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:
npm run build:dev
Just select the Docker
option in the toolbar.
Execute the following command in your project's directory:
docker build -t [my image name] .
where [my image name]
is your Docker image name.
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
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.
Third-party libraries:
logs/
directory) and also into Azure Cloud Provider.Own libraries / fixed forks:
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.
JavaScript
or TypeScript
)MIT