All Projects → NickMaev → React Core Boilerplate

NickMaev / React Core Boilerplate

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

Programming Languages

javascript
154013 projects - #8 most used programming language
typescript
26699 projects

Projects that are alternatives of or similar to React Core Boilerplate

Razzle Material Ui Styled Example
Razzle Material-UI example with Styled Components using Express with compression
Stars: ✭ 117 (-30.77%)
Mutual labels:  webpack, boilerplate, template, ssr, server-side-rendering
React App
Create React App with server-side code support
Stars: ✭ 614 (+263.31%)
Mutual labels:  webpack, boilerplate, template, ssr, server-side-rendering
Suicrux
🚀 Ultimate universal starter with lazy-loading, SSR and i18n. [not maintained]
Stars: ✭ 958 (+466.86%)
Mutual labels:  webpack, boilerplate, template, ssr
Sing App
💥Free and open-source admin dashboard template built with Bootstrap 4.5 💥
Stars: ✭ 1,187 (+602.37%)
Mutual labels:  boilerplate, bootstrap, template, sass
Angularwebpackvisualstudio
Template for ASP.NET Core, Angular with Webpack and Visual Studio
Stars: ✭ 497 (+194.08%)
Mutual labels:  webpack, aspnetcore, aspnet-core, template
Reactql
Universal React+GraphQL starter kit: React 16, Apollo 2, MobX, Emotion, Webpack 4, GraphQL Code Generator, React Router 4, PostCSS, SSR
Stars: ✭ 1,833 (+984.62%)
Mutual labels:  webpack, sass, ssr, server-side-rendering
React Universal Boiler
A bold way to begin your next great universal React application. Uses Webpack 3, React 16, Redux, and more for a great developer experience.
Stars: ✭ 65 (-61.54%)
Mutual labels:  webpack, boilerplate, ssr, server-side-rendering
Js Stack Boilerplate
Final boilerplate code of the JavaScript Stack from Scratch tutorial –
Stars: ✭ 145 (-14.2%)
Mutual labels:  webpack, boilerplate, bootstrap, server-side-rendering
Mern
🎉 This is boilerplate for MERN stack with integrations like Redux and SSR 🎉
Stars: ✭ 77 (-54.44%)
Mutual labels:  webpack, boilerplate, ssr, server-side-rendering
Frontie Webpack
Front-end Boilerplate | Gulp 4 + Webpack 4 + Babel + ITCSS Architecture + BEM Methodology + Twig.js
Stars: ✭ 102 (-39.64%)
Mutual labels:  webpack, boilerplate, bootstrap, sass
Seven
Eleventy template using Bootstrap, Sass, Webpack, Vue.js powered search, includes lots of other features
Stars: ✭ 114 (-32.54%)
Mutual labels:  webpack, bootstrap, template
Light Blue Dashboard
🔥 Free and open-source admin dashboard template built with Bootstrap
Stars: ✭ 110 (-34.91%)
Mutual labels:  boilerplate, bootstrap, sass
Static Site Boilerplate
A better workflow for building modern static websites.
Stars: ✭ 1,633 (+866.27%)
Mutual labels:  webpack, boilerplate, sass
React Redux Graphql Apollo Bootstrap Webpack Starter
react js + redux + graphQL + Apollo + react router + hot reload + devTools + bootstrap + webpack starter
Stars: ✭ 127 (-24.85%)
Mutual labels:  webpack, boilerplate, bootstrap
Php Sf Flex Webpack Encore Vuejs
A simple app skeleton to try to make every components work together : symfony 4 (latest stable at the date, but work with sf 3.3+ if you just change the versions in composer.json), symfony/flex, webpack-encore, vuejs 2.5.x, boostrap 4 sass
Stars: ✭ 118 (-30.18%)
Mutual labels:  webpack, bootstrap, sass
Aspnetcore Angular Universal
ASP.NET Core & Angular Universal advanced starter - PWA w/ server-side rendering for SEO, Bootstrap, i18n internationalization, TypeScript, unit testing, WebAPI REST setup, SignalR, Swagger docs, and more! By @TrilonIO
Stars: ✭ 1,455 (+760.95%)
Mutual labels:  aspnetcore, aspnet, ssr
Webpack Starter
✨ A lightweight foundation for your next webpack based frontend project.
Stars: ✭ 1,745 (+932.54%)
Mutual labels:  webpack, boilerplate, sass
Universal Native Boilerplate
Build apps for every native platform with React and React Native
Stars: ✭ 131 (-22.49%)
Mutual labels:  webpack, boilerplate, server-side-rendering
Es6 Webpack2 Starter
🚀 A template project for es6/7, webpack2/3, sass and postcss
Stars: ✭ 106 (-37.28%)
Mutual labels:  webpack, template, sass
Koa React Isomorphic
Boilerplate for Koa & React
Stars: ✭ 128 (-24.26%)
Mutual labels:  webpack, boilerplate, ssr

Build Status

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

Visual Studio Marketplace Installs - Azure DevOps Extension Visual Studio Marketplace Installs - Azure DevOps Extension

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
  1. 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.
  2. 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
  1. Build your container.
  2. 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:

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected]