Página Inicial>Código fonte ASP>Outras categorias
Baixar



Descrição

O React Core Boilerplate é um ponto de partida para a criação de aplicativos da Web Universal/Isomorphic React com o ASP.NET Core 3 e a renderização do lado do servidor. Tudo funciona bem fora da caixa. Também é útil para iniciantes. O projeto contém um sistema de autorização falso. Assim, você pode alterá -lo para identidade ou outro.
As versões TypeScript e JavaScript estão disponíveis.

Visual Studio Marketplace

Capturas de tela

Mudanças

v. 2.0.3 (2020-07-03)
  • Adicionado suporte do Docker. ?
  • Adicionado a prevenção de ataques do XSS, graças a Xuhaojun.
  • Dependências atualizadas, removidas namespaces não utilizados.
v. 2.0.0 (2020-05-08)
  • Migrou para .NET Core 3.1 . ?
  • Migrou para Bootstrap 4 usando o react-bootstrap.
  • Migrou para o Formik.
  • As lojas Redux migraram para o Redux Toolkit para aumentar o desenvolvimento com o Redux. Código reduzido.
  • Melhorias de registro e configuração de Serilog .
  • Adicionado suporte HTTPS à server-side rendering .
  • Adicionado código de status editável em rotas para SEO.
  • Atualizou algumas dependências.
  • Correções de estabilidade.
  • Removido dependências desnecessárias do NPM.
v. 1.7.1 (2019-06-02)
  • React atualizado, Redux , React-Router e outros pacotes NPM conectados a eles.
  • Dependências críticas de NPM atualizadas.
  • Removido dependências desnecessárias do NPM.
v. 1.7.0 (2019-05-05)
  • Reestruturação do repositório.
  • Versão JavaScript adicionada do React Core Boilerplate. ?
  • Correções de estabilidade.
  • Dependências críticas atualizadas.
v. 1.6.3 (2019-03-19)
  • Removido de image-webpack-loader devido à instabilidade.
v. 1.6.2 (2019-03-15)
  • Instalado o plug -in estável Terser .
  • React atualizado e outros pacotes para ele (incl. Tipos).
  • WebPack atualizado.
  • Config Webpack atualizado para o modo de desenvolvimento.
v. 1.6.0 (2019-03-13)
  • Atualizado .NET Core Dependência para v. 2.2 .
  • Pacotes npm críticos atualizados.
  • Dependências WebPack atualizadas.
  • As configurações aprimoradas de fornecedores WebPack e pacote.
  • Arquivo .csproj aprimorado para a construção e publicação de cenários.
  • Geração de mapa de origem fixa no modo de desenvolvimento.
  • Compilação de pacote corrigida no modo de produção.
  • Outras correções de estabilidade.
v. 1.5.4 (2019-02-04)
  • Adicionou alguns recursos menores.
  • Correções de bug: collapsing of the Bootstrap navigation bar , fixed controller and frontend's service in person update case .
  • Dependências atualizadas.
v. 1.5.3 (2018-12-04)
  • Polyfills adicionados para suportar IE9, IE11: @babel/polyfill , custom-event-polyfill .
  • Dependências atualizadas.
v. 1.5.2 (2018-12-01)
  • Adicionado pesquisa ao vivo do FullText ao exemplo.
  • Plugins de webpack adicionados: case-sensitive-paths-webpack-plugin , react-dev-utils
  • Plugins adicionados com exemplos: awesome-debounce-promise para evitar fazer consultas frequentes em busca ao vivo, formik para criar formulários no React sem lágrimas.
  • Corrigido alguns erros funcionais e de texto.
v. 1.5.0 (1) (2018-11-07)
  • Adicionado hosting.json , que contém configurações de hospedagem e será usado na construção da produção.
  • Adicionado pacote bind-decorator e exemplos com ele.
  • Acelerou o edifício Webpack Bundle.
  • Pacote atualizado de domínio-espera. Esta atualização permite que você impeça o pedido de solicitações isomórficas de busca duas vezes (no servidor Prerender e depois dele - no lado do cliente).
  • Pacote Redux-Thunk atualizado.
  • Adicionado novos componentes do React para evitar uma dor de cabeça ao criar aplicativos da Web: ModalComponent , Input , MultiSelect , Form . Esses componentes são usados ​​em exemplos.
v. 1.4.5 (2018-11-02)
  • O novo recurso adicionado permite que um aplicativo da Web compartilhe o cookie do navegador com os serviços SodeServices. Agora, o SSR gera código HTML para usuários autenticados e faz solicitações isomorficas autenticadas.
  • Adicionado método sendFormData ao ServiceBase.ts , que permite fazer upload de arquivos no servidor.
v. 1.3.5 (2018-10-26)
  • Pacotes NPM atualizados: react , redux , react-router .
  • Substituído devido à depreciação react-router-redux pelo novo connected-react-router .
  • Componente Loader fixo que teve problemas em alguns casos.
v. 1.3.2 (2018-10-25)
  • Removeu pacotes NPM não utilizados.
  • Adicionado pacote lock.json.
  • Projeto fixo.
v. 1.3.0 (2018-10-22)
  • Pacote react atualizado.
  • Adicionado o componente AppComponent , que permite fazer a "atualização de força" dos componentes "presos" (para o componente Loader Ex. No LoginPage ).
  • Adicionado serilog logger que efetua login nos arquivos ( logs/ diretório) e também no fornecedor de nuvem do Azure.
v. 1.2.1 (2018-10-20)
  • Componente Loader fixo que funcionou incorreto com o SSR em alguns casos.
v. 1.2.0 (2018-10-18)
  • Dependência atualizada do pacote "Asp.net Core" devido à vulnerabilidade.
  • Recurso adicionado que permite passar objetos JSON para a consulta URL para obter métodos Get e Excluir.
v. 1.1.0 (2018-10-16)
  • Componente AppRoute fixa. Resolvido Problema com parâmetros de passagem para componentes do roteador React. Se você quiser consertá -lo manualmente, consulte o compromisso aqui.

Uso

Instalação

  1. Instale mais recente .NET Core SDK e Runtime By Link.
  2. Instale o mais recente Node.JS.
  3. Na primeira execução, você deve fechar o projeto se ele for executado no Visual Studio ou em outro IDE. Pasta do Open Project no console e execute o comando npm install .
  4. Execute o seguinte comando de desenvolvimento no diretório do seu projeto. Ele compilará o pacote principal e o fornecedor. 
npm run build:dev
  1. Se você estiver usando o Visual Studio 20xx, em vez de IIS Express , selecione o YourProjectName ou ReactCoreBoilerplate : clique na seta para baixo perto do IIS Express e escolha o docker ou outra opção.
  2. Construir e executar o projeto. Ele começará no console do Windows.

Modificar configuração de fornecedor de webpack

Se você modificar a configuração do fornecedor do WebPack, deverá recomitar manualmente o pacote de fornecedores. Execute o seguinte comando no diretório do seu projeto para fazer isso: 

npm run build:dev

Corra com o Docker

Visual Studio 20xx

Basta selecionar a opção Docker na barra de ferramentas.

Construir um recipiente

Execute o seguinte comando no diretório do seu projeto: 

docker build -t [my image name] .

Onde [my image name] é o nome da imagem do Docker.

Execute um contêiner de produção no Windows com suporte HTTPS (para teste)

  1. Confie no Certificado de Desenvolvimento HTTPS do ASP.NET Core no Windows e MacOS: 
dotnet dev-certs https -ep %USERPROFILE% . aspnet h ttps a spnetapp.pfx -p [my password]

onde [my password] é a sua senha.
2. Execute: 

dotnet dev-certs https --trust
  1. Construa seu contêiner.
  2. Executar: 
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]

Onde [my password] - sua senha de certificado (na primeira etapa), [my image name] - seu nome de imagem do Docker.

Elementos

Bibliotecas de terceiros:

  • TypeScript - Todo o front -end com base no TypeScript.
  • Plug-in WebPack-plug-in WebPack que executa o TypeScript Type Checker em um processo separado.
  • React - Biblioteca Principal que funcionou como isomórfico.
  • React roteador - roteador para reação.
  • React -Bootstrap - Bootstrap 4 para React.
  • React -Helmet - Ajudantes isomórficos de SEO.
  • Redux - Loja.
  • Redux Toolkit - Biblioteca para aumentar o desenvolvimento com o Redux.
  • Formik - Biblioteca para formulários de construção para reação.
  • Roteador de reação conectada - ligação redux para roteador react.
  • SASS - pré -processador CSS.
  • Webpack 4 - Bundler.
  • Axios - Fetch Isomorphic Util.
  • TS-NAMEOF-permite que você use nomes de entradas seguras de tipo no formulário.
  • JSON-TO-URL-Permite passar objetos JSON para a consulta URL para obter métodos Get e Excluir.
  • Serilog - permite fazer login nos arquivos ( logs/ diretório) e também no fornecedor de nuvem do Azure.

Bibliotecas próprias / garfos fixos:

  • Substituição do domínio-espera-Tarefa de domínio por suportes assíncronos/aguardar e novos recursos.
  • NVAL-Validador JS de baunilha do tipo Validação JQuery.
  • NVAL -Tippy - Validação de baunilha JS com dicas de ferramentas impressionantes.
  • NSerializejson - Formulário flexível para o serializador JSON baseado em baunilha JS.

Problemas

Questões conhecidas

  • Erro em ./clientapp/styles/loaders/xxx.scss (./node_modules/css-loader/dist/cjs.js! [...]): Erro: enoent: nenhum arquivo ou diretório, scandir 'xxx node_modules node-sass vendor'
    Execute npm rebuild node-sass npm i e NPM no diretório do seu projeto.

  • Webpack Hot Module Substituição [HMR] não funciona com IIS
    Será consertado. Use Kestrel para desenvolvimento.

  • Erro HTTP 500
    Provavelmente você não tem a versão mais recente do Node.js.

  • Erro HTTP 502.5
    Você deve instalar o mais recente "ASP.NET Core SDK" e "Runtime e Hosting Bundle" usando este link: https://www.microsoft.com/net/download/dotnet-core/2.1

  • Erro HTTP 500 quando hospedado no Azure
    Defina o "site_node_default_version" como 6.11.2 nas "Configurações do aplicativo" no Azure.

  • Erros ao executar no modo de desenvolvimento após a publicação
    Execute npm run build:dev comando no diretor do projeto.

Outros problemas

  • Se você tiver algum problema com o início do projeto, poderá ver erros nos logs ("/logs" do diretório). Por favor, faça isso antes de abrir um problema no Github. Não se esqueça de mencionar a versão do React Core Boilerplate ( JavaScript ou TypeScript )

Licença

Mit

Expandir
Informações adicionais
Aplicativos Relacionados
Recomendado para você
Informações Relacionadas Todos