Essa é a aplicação front-end padrão de desenvolvimento, englobando todos os módulos existentes dentro do mesma.
A stack utilizada, foi montada utilizando um agrupamento de tecnolgias para melhor flexibilização e personalização do sistema. Abaixo uma lista breve com as tecnologias utilizadas:
- Npm
- Webpack
- WebPack Dev Server
- Babel
- React
- Sass
- Material UI
- StoryBook
- ESLint
- JSDoc
- Husky
A seguir descrevo passo-a-passo os seguintes comandos para iniciar a aplicação em modo de desenvolvimento. Partindo da raiz do projeto execute os seguintes comandos:
Na pasta raiz do projeto executo o seguinte comando em seu terminal:
npm installApós a execução da instalação das dependências, ainda na pasta raiz do projeto execute o seguinte comando para executar a aplicação em modo de desenvolvimento. A aplicação iniciará utilizando a porta 3000.
npm run start Após a finalização do desenvolvimento, é possível gerar um pacote para ser enviado para o ambiente de homologação ou produção. Para compilar esse pacote, utilize o comando abaixo:
npm run build:prodO projeto possui um pequena área aonde é possível gerar uma documentação visual de todos os métodos utilizados que não sejam no modelo JSX. Para realizar a visualização desse documento, basta utilizar a seguinte linha de comando em seu terminal:
npm run docsApós o documento ser gerado com sucesso, uma nova pasta chamada .docs será adicionada a raiz do projeto e dentro da mesma, alguns arquivos .html serão criados com uma aplicalção visual interna para navegação dos métodos que o projeto contém.
O projeto também possui um analisador de bundles e chunks. Essa função permite verificar quais arquivos tem mais peso dentro da aplicação e o que cada um contém. Para realizar o uso dessa funcionalidade utilize a seguinte linha de comando em seu terminal:
npm run analyzerNão utilizo um webpack proprio. Tem algum tempo que utilizo do Bruno, até que deixei ele como autor.
Você poderá navegar por cada arquivo em uma aplicação totalmente visual e verificar se algo está errado.