mernboilerplate antd
1.0.0
Neste repositório continuarei adicionando as melhores práticas de produção que devemos seguir em um projeto MERN (MongoDB, Express.js, React.js e Node.js). Também para uma melhor experiência do usuário, estou usando o Antd Pro para a IU. Talvez mais tarde eu use o MUI também.
Abaixo está um exemplo de uma página de lista de exemplo:
Como o nome sugere, este repositório é construído sobre Express.js e React.js, porém nos detalhes de implementação encontraremos outras tecnologias de suporte também.
Detalhes de estruturas e pacotes podem ser encontrados nos arquivos package.json no diretório do servidor e do cliente.
Este projeto pode ser executado basicamente de duas maneiras. Uma delas é usar o docker, a outra é executar manualmente via vscode.
Dependendo da opção de hospedagem MongoDB, escolhemos o arquivo docker-compose apropriado.
Atualmente temos dois arquivos docker-compose:
docker-compose.mongocloud.yml - Cluster hospedado em MongoDB.comdocker-compose.yml - Contêiner MongoDB local MONGODB_CLOUD_URL em docker-compose.mongocloud.yml para o URL apropriado do MongoDB.REACT_APP_API_URL em docker-compose.yml para o URL da API apropriado. Se quisermos expor nosso cliente à Internet, precisamos alterar REACT_APP_API_URL para o URL da API apropriado. Caso contrário, mantenha REACT_APP_API_URL como http://localhost:8002 .Execute comandos docker-compose
Espera-se que a máquina tenha o docker e o docker-compose instalados. Vá para a raiz do repositório e execute os comandos apropriados. Isso irá ativar os contêineres do servidor e do cliente junto com o contêiner MongoDB (se estivermos usando o servidor MongoDB local) dentro do ambiente Docker.
Usando contêineres docker com MongoDB hospedado na nuvem
> cd project-root
> docker-compose -f docker-compose.mongocloud.yml build
> docker-compose -f docker-compose.mongocloud.yml upUsando contêineres docker com MongoDB local
> cd project-root
> docker-compose build
> docker-compose upO cliente e o servidor estão funcionando e devemos ver a tela a seguir se navegarmos até o URL do cliente.
dados iniciais Vá para dentro do contêiner do docker e execute os comandos abaixo. Eles irão semear o banco de dados com dados roles , users e products .
docker exec -it appserver bash
npm run db:seed
npm run db:migrate Você deverá ver a seguinte saída: 
Agora você deve fazer login no aplicativo e ver a lista de produtos.
Para executar via vscode, devemos executar os projetos do servidor e do cliente separadamente e também garantir que o mongodb esteja instalado e funcionando.
Crie um arquivo .env dentro do diretório server . Adicione as entradas abaixo ou altere de acordo. Você pode seguir o arquivo .env.sample para ver o formato.
DB_HOST=localhost
DB_PORT=27017
DB_NAME=appdb
JWT_SECRET=secret
JWT_EXPIRES_IN=3600
PORT=5000
IS_MONGODB_CLOUD_URL=false
MONGODB_CLOUD_URL=mongodb+srv:// <USER >: <PASSWORD >@cluster0.abcd.mongodb.net/myFirstDatabase?retryWrites=true
Presumimos que executamos o MongoDB no contêiner docker.
cd server
npm i
npm run db:up
npm start cd client-pro
nvm use --lts
yarn
yarn startPara propagar o banco de dados, precisamos executar os seguintes comandos no contêiner docker. Você também pode executar esses comandos no terminal se estiver executando o servidor e o cliente fora do ambiente docker. Presumo que estamos executando o appserver no contêiner do docker.
docker exec -it appserver bash
npm run db:seed
npm run db:migrate Você deverá conseguir ver o nome de usuário e a senha no arquivo /server/setup/users.json .
Introduzi uma interface de gerenciamento de permissão para o aplicativo. A imagem de exemplo é fornecida abaixo.
Sentry.io Também podemos enviar os logs para sentry.io. Para usar esse recurso, precisamos adicionar a entrada dsn em client/src/env.config.js . O snippet de configuração é como abaixo no arquivo index.js
Sentry . init ( {
dsn : Config . dsn ,
integrations : [ new Integrations . BrowserTracing ( ) ] ,
tracesSampleRate : 1.0 ,
} ) ; server teste Para visualizar a API, abra seu navegador e visite http://localhost:5000/api-docs Idealmente, deveríamos adicionar todos os endpoints da API ao swagger, mas para fins de demonstração, adicionamos apenas o endpoint da API de produtos.
Para testar as APIs, podemos reutilizar a coleção postman. Abra docs/rbac-mern-boilerplate.postman_collection.json no Postman e você deverá ver os endpoints com cargas apropriadas.
| Projeto | Comando | Tarefa |
|---|---|---|
| raiz | npm run build | Constrói os contêineres |
| raiz | npm run start | Inicie os projetos e banco de dados em contêineres docker |
| raiz | docker exec -it appserver /bin/sh então npm run db:seed | Executa produtos de sementes dentro do contêiner |
| servidor | npm i | Instale dependências do lado do servidor |
| servidor | npm run db:up | Inicie o banco de dados em um contêiner docker |
| servidor | npm run test | Execute testes usando jest |
| cliente | npm i | Instale dependências do lado do cliente |
| cliente | npm run start | Inicie o aplicativo de reação |
| cliente | npm run build | Crie o aplicativo react em modo de produção |
| cliente | npm run test | Execute testes usando Testing Library |
Neste repositório, incluímos testes de unidade e testes de integração. Por enquanto, a cobertura de código é muito baixa, mas estamos trabalhando nisso para aumentar mais de 90% em algum momento no futuro
localStorage e axios . Para executar os testes, podemos executar o comando npm run test .
Jest como biblioteca de teste e adicionamos pacotes supertest e mongodb-memory-server para facilitar o teste de integração.Jest para testar as camadas de serviço e simular as dependências externas como MongoDB . Para executar os testes, podemos executar o comando npm run test .
Este projeto é licenciado pelo MIT.
Por enquanto, não estou aceitando nenhuma contribuição da comunidade em termos de código. Mas se você tiver alguma sugestão ou encontrar algum bug, sinta-se à vontade para abrir um problema ou uma solicitação pull.
Por outro lado, se você quiser saber algo, ou quiser iniciar uma discussão sobre este projeto, por favor inicie uma discussão no nosso fórum de discussão do GitHub.
Tenho gravado na tela as etapas de codificação deste projeto. Você pode encontrar os vídeos na lista de reprodução do YouTube. Esses vídeos estão apenas em bangla , mas estou feliz em fazer sessões especiais dedicadas e pagas em inglês para o público internacional interessado. Sinta-se à vontade para entrar em contato comigo em [email protected] para qualquer tipo de ajuda.
Obrigado. Saúde.
