O app utiliza os seguintes serviços:
MongoDB Cloud: Armazenagem de dados Circle CI: Integração contínua Zeit: Plataforma de deploy
Node.js: v10.14.2 npm: 6.4.1 Vue: 2.6.10
Para mais detalhes, conferir package.json
Uma aplicação Stitch deve ser criada para ser usada pelo app como serviço de armazenagem de dados:
- Crie uma conta no MongoDB Atlas
- Crie um Cluster (com qualquer configuração)
- Crie uma Aplicação Stitch linkada ao Cluster - durante a criação, guarde o valor do campo Stitch Service Name (default 'mongodb-atlas')
- Ative a Autenticação Anônima
- Crie um banco de dados chamado trivia e uma coleção chamada profile
Para que o o banco de dados seja acessado no ambiente de desenvolvimento, o endereço do servidor deverá ser adicionado à lista de origens autorizadas no Stitch:
Settings > Allowed Request Origins > + Add Allowed Request Origin
Digite: http://localhost:8080
Save
Deploy > Review & Deploy Changes > Deploy
- Faça um fork ou clone deste repositório.
npm install
para instalar as dependências- Crie um arquivo chamado
.env.local
na raiz do projeto com o seguinte conteúdo, substituindo os valores:VUE_APP_STITCH_APP_ID: App ID, encontrado na barra lateral do gerenciador da aplicação Stitch VUE_APP_STITCH_SERVICE: Campo 'Stitch Service Name' no formulário de criação da aplicação Stitch (geralmente 'mongodb-atlas') VUE_APP_DB: Nome do banco de dadosVUE_APP_STITCH_APP_ID=trivia-xxxxx VUE_APP_STITCH_SERVICE=mongodb-atlas VUE_APP_DB=trivia
npm run dev
para conferir se está tudo OK
Os testes unitários utilizam o framework de testes Jest.
Para executá-los: npm run test:unit
Os testes de UI utilizam a ferramenta Cypress.
Para executar no navegador: npm run test:ui
Para executar somente no terminal (headless): npm run test:hlui
O app está configurado para rodar na plataforma Zeit.
Para fazer deploy manual para o Zeit, você deve possuir uma conta e usar o programa now:
npm install -g now
now login
npm run build
now dist -local-config ../now.json
Foi utilizado o CircleCI para CI/CD.
A configuração pode ser conferida no arquivo .circleci/config.yml
.
Há apenas um job, executado sempre que é feito um git push
para o repositório do Github.
Porém é necessário configurar algumas coisas primeiro:
Gerar um token de acesso que será utilizado pelo CircleCI para autenticação. Na tela inicial do dashboard:
Settings > Tokens > Create New Token Name: CI Create Token > Copy token
Assim como foi feito com o servidor de desenvolvimento, o endereço do app no Zeit deverá ser adicionado à lista de origens autorizadas no Stitch:
Settings > Allowed Request Origins > + Add Allowed Request Origin
Digite: https://trivia.<username>.now.sh
Save
Deploy > Review & Deploy Changes > Deploy
Por último, entre com sua conta do Github e adicione o projeto sas-trivia ao CircleCI.
Add Projects > Set Up Project (no projeto sas-trivia) > Start Building
A primeira build quebrará, porque ainda falta configurar as variáveis de ambiente.
Clique em Project Settings (a engrenagem à direita do nome do projeto), depois em Build Settings > Environment Variables e adicione as seguintes variáveis:
- Name: NOW_TOKEN Value: <token do Zeit>
- Name: VUE_APP_STITCH_APP_ID Value: <mesmo valor de .env.local>
- Name: VUE_APP_STITCH_SERVICE Value: <mesmo valor de .env.local>
- Name: VUE_APP_DB Value: <mesmo valor de .env.local>
Para refazer a build clique Jobs, depois clique na build que falhou e por fim em Rebuild no canto superior direito.
A aplicação estará em https://trivia.<username>.now.sh
.