react core boilerplate



Descripción

React Core Boilerplate es un punto de partida para construir aplicaciones web React Universal/Isomorfic con ASP.NET Core 3 y la representación del lado del servidor. Todo funciona bien fuera de la caja. También es útil para los novatos. El proyecto contiene un sistema de autorización falso. Para que pueda cambiarlo a identidad u otra.
Las versiones mecanografiadas y JavaScript están disponibles.

Visual Studio Marketplace

Capturas de pantalla

Cambios

v. 2.0.3 (2020-07-03)

• Soporte de Docker agregado. ?
• Se agregó la prevención del ataque XSS, gracias a Xuhaojun.
• Dependencias actualizadas, espacios de nombres no utilizados.

v. 2.0.0 (2020-05-08)

• Migrado a .NET Core 3.1 . ?
• Migró a Bootstrap 4 usando React-Bootstrap.
• Migrado a Formik.
• Las tiendas Redux migraron a Redux Toolkit para aumentar el desarrollo con Redux. Código reducido.
• Mejoras de registro y configuración de Serilog .
• Se agregó soporte HTTPS a server-side rendering .
• Código de estado editable agregado en rutas para SEO.
• Actualizó algunas dependencias.
• Soluciones de estabilidad.
• Eliminó dependencias innecesarias de NPM.

v. 1.7.1 (2019-06-02)

• React actualizado, Redux , React-Router y otros paquetes NPM conectados a ellos.
• Dependencias críticas de NPM actualizadas.
• Eliminó dependencias innecesarias de NPM.

v. 1.7.0 (2019-05-05)

• Reestructura del repositorio.
• Se agregó la versión JavaScript del react Core Boilerplate. ?
• Soluciones de estabilidad.
• Dependencias críticas actualizadas.

v. 1.6.3 (2019-03-19)

• Relacionó image-webpack-loader debido a la inestabilidad.

v. 1.6.2 (2019-03-15)

• Complemento Terser estable instalado.
• React actualizado y otros paquetes para él (tipos incluidos).
• WebPack actualizado.
• Configuración actualizada de Webpack para el modo de desarrollo.

v. 1.6.0 (2019-03-13)

• La dependencia actualizada .NET Core a v. 2.2 .
• Paquetes de NPM críticos actualizados.
• Dependencias actualizadas WebPack .
• Configuraciones mejoradas de proveedores y paquetes WebPack .
• Archivo .csproj mejorado para escenarios de construcción y publicación.
• Generación de mapa de origen fijo en modo de desarrollo.
• Se corrigió la compilación del paquete en modo de producción.
• Otras correcciones de estabilidad.

v. 1.5.4 (2019-02-04)

• Se agregó algunas características menores.
• Soluciones de errores: collapsing of the Bootstrap navigation bar , fixed controller and frontend's service in person update case .
• Dependencias actualizadas.

v. 1.5.3 (2018-12-04)

• Se agregaron polyfills para soportar IE9, IE11: @babel/polyfill , custom-event-polyfill .
• Dependencias actualizadas.

v. 1.5.2 (2018-12-01)

• Se agregó FullText Live Search al ejemplo.
• Se agregó complementos de Webpack: case-sensitive-paths-webpack-plugin , react-dev-utils
• Complementos agregados con ejemplos: awesome-debounce-promise para evitar consultas frecuentes en la búsqueda en vivo, formik para crear formularios en React sin lágrimas.
• Se corrigió algunos errores funcionales y de texto.

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

• Se agregó hosting.json que contiene configuraciones de alojamiento y se utilizará en la compilación de producción.
• Se agregó el paquete bind-decorator y ejemplos con él.
• Acelerado de la construcción de paquetes de webpack.
• Paquete actualizado de dominio-ahait. Esta actualización le permite evitar llamar a las solicitudes de búsqueda isomórfica dos veces (en el servidor Prerender y después de ella, en el lado del cliente).
• Paquete Redux-Thunk actualizado.
• Se agregaron nuevos componentes React para evitar un dolor de cabeza cuando crea aplicaciones web: ModalComponent , Input , MultiSelect , Form . Estos componentes se utilizan en ejemplos.

v. 1.4.5 (2018-11-02)

• Se agregó una nueva función permite que una aplicación web comparta la cookie del navegador con nodeservices. Ahora SSR genera código HTML para usuarios autenticados y realiza solicitudes isomórficas autenticadas.
• Método agregado sendFormData a ServiceBase.ts que le permite cargar archivos en el servidor.

v. 1.3.5 (2018-10-26)

• Paquetes NPM actualizados: react , redux , react-router .
• Reemplazado debido a la deprecación react-router-redux por el nuevo connected-react-router .
• Componente Loader fijo que tenía problemas en algunos casos.

v. 1.3.2 (2018-10-25)

• Los paquetes NPM eliminados no utilizados.
• Paquete agregado-Lock.json.
• Proyecto fijo.

v. 1.3.0 (2018-10-22)

• Paquete React actualizado.
• Se agregó el componente AppComponent que le permite hacer la "actualización de fuerza" de los componentes "atascados" (para el componente Loader ex en LoginPage ).
• Se agregó Serilog Logger que inicia sesión en archivos ( logs/ directorio) y también en el proveedor de nube de Azure.

v. 1.2.1 (2018-10-20)

• Componente Loader fijo que funcionó incorrecto con SSR en algunos casos.

v. 1.2.0 (2018-10-18)

• Dependencia actualizada del paquete "ASP.NET Core" debido a la vulnerabilidad.
• La función agregada que le permite pasar objetos JSON a la consulta URL para obtener métodos Get and Eliminar.

v. 1.1.0 (2018-10-16)

• Componente AppRoute fija. Problema resuelto con el paso de parámetros a los componentes del enrutador React. Si desea arreglarlo manualmente, vea el compromiso aquí.

Uso

Instalación

1. Instale el último SDK de .NET Core y el tiempo de ejecución por enlace.
2. Instalar el último nodo estable.js.
3. En la primera carrera debe cerrar el proyecto si se ejecuta en Visual Studio u otro IDE. Abra la carpeta del proyecto en la consola y ejecute npm install .
4. Ejecute el siguiente comando para el desarrollo en el directorio de su proyecto. Compilará el paquete principal y de proveedores.

npm run build:dev

5. Si está utilizando Visual Studio 20XX, en lugar de IIS Express seleccione su YourProjectName o ReactCoreBoilerplate : haga clic en la flecha hacia abajo cerca del IIS Express y elija Docker u otra opción.
6. Proyecto de construcción y ejecución. Comenzará en la consola de Windows.

Modificar la configuración del proveedor de webpack

Si modifica la configuración del proveedor webpack, debe recompilar manualmente el paquete de proveedores. Ejecute el siguiente comando en el directorio de su proyecto para hacer esto:

npm run build:dev

Correr con Docker

Visual Studio 20xx

Simplemente seleccione la opción Docker en la barra de herramientas.

Construir un contenedor

Ejecute el siguiente comando en el directorio de su proyecto:

docker build -t [my image name] . 

donde [my image name] es el nombre de su imagen de Docker.

Ejecute un contenedor de producción en Windows con soporte HTTPS (para prueba)

1. Confíe en el certificado de desarrollo ASP.NET Core HTTPS en Windows y MacOS:

dotnet dev-certs https -ep %USERPROFILE% . aspnet h ttps a spnetapp.pfx -p [my password]

donde [my password] es su contraseña.
2. Ejecutar:

dotnet dev-certs https --trust

3. Construye tu contenedor.
4. Ejecutar:

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 h ttps:/https/ [my image name]

donde [my password] - su contraseña de certificado (desde el primer paso), [my image name] - su nombre de imagen Docker.

Elementos

Bibliotecas de terceros:

• TypeScript: todo frontend basado en mecanografiado.
• FORK-TS-CHECKER-WEBPACK-Plugin-Plugin Webpack que ejecuta el comprobador de tipo TypeScript en un proceso separado.
• React: biblioteca principal que funcionó como isomórfica.
• REACT ROUTER - Router para React.
• React -Bootstrap - Bootstrap 4 para React.
• React -Helmet - ayudantes de SEO isomórficos.
• Redux - Almacena.
• Redux Toolkit - Biblioteca para aumentar el desarrollo con Redux.
• Formik - Biblioteca para formularios de construcción para React.
• REACT REACT CONECTADO - Unión Redux para el enrutador React.
• Sass - Preprocesador CSS.
• Webpack 4 - Bundler.
• Axios - ISomórfica Fetch Util.
• TS-NameOF: le permite usar nombres tipo seguros de entradas en el formulario.
• JSON-TO-URL: le permite pasar objetos JSON a URL Consuly para obtener y eliminar métodos.
• SERILOG: le permite iniciar sesión en archivos ( logs/ directorio) y también en el proveedor de nube de Azure.

Propias bibliotecas / horquillas fijas:

• Dominio-WAIT-Reemplazo de tareas de dominio con soporte de async/esperanza y nuevas características.
• NVAL-Validador JS JS JS JS Validation JQuery-Validation.
• Nval -Tippy - Validación de Vanilla JS con impresionantes información sobre herramientas.
• NSerializeJson - Forma flexible para JSON Serializer basado en Vanilla JS.

Asuntos

Problemas conocidos

• Error en ./clientapp/styles/loaders/xxx.scss (./node_modules/css-loader/dist/cjs.js! [...]): Error: enoent: no tal archivo o directorio, scandir 'xxx node_modules node-sass proveor'
  Ejecute npm i y npm rebuild node-sass en el directorio de su proyecto.

• Webpack Hot Module Reemplazo [HMR] no funciona con IIS
  Será arreglado. Use el cernícalo para el desarrollo en su lugar.

• Error HTTP 500
  Probablemente no tenga la última versión de Node.js.

• Error HTTP 502.5
  Debe instalar el último "ASP.NET Core SDK" y "Runtime and Hosting Bundle" usando este enlace: https://www.microsoft.com/net/download/dotnet-core/2.1

• HTTP Error 500 cuando se aloja en Azure
  Establezca el "sitio web_node_default_version" en 6.11.2 en la "Configuración de la aplicación" en Azure.

• Errores al ejecutar en modo de desarrollo después de publicar
  Ejecutar npm run build:dev Command en el Dir del proyecto.

Otros problemas

• Si tendrá algún problema con el inicio del proyecto, puede ver errores en el directorio de registros ("/registros"). Por favor, haga esto antes del Abierto de un problema en GitHub. No olvide mencionar la versión del react Core Boilerplate ( JavaScript o TypeScript )

Licencia

MIT