Documentação para começar a trabalhar no projeto no frontend da iTFLEX.

Obs: Caso conheça razoavelmente bem javascript e seu ecossistema, recomendamos que clone o repositório e verifique os comandos no package.json

Diretórios

Em sua máquina, crie um diretório chamado git e dentro dele outro diretório chamado itflex, e nele, você irá realizar os próximos passos.

Clone

Para pegar o código da aplicação, deve ser utilizado o seguinte comando:

Caso tenha uma chave SSH configurada no Gitlab:

git@git.itflex.com.br:itflex/itflex.git

Caso não tenha, é possível clonar utilizando usuário e senha com o seguinte comando:

https://git.itflex.com.br/itflex/itflex.git

O código do frontend se encontra no diretório server/frontend/admin

Instalação de dependências

Para instalar as dependências do projeto basta entrar no diretório e rodar:

yarn install

Por padrão utilizamos yarn

Execução

Após clonar o repositório e instalar as dependências, já é possível rodar a aplicação em modo de desenvolvimento, ou gerar os arquivos para serem rodados em produção.

Para rodar a aplicação em modo de desenvolvimento e ter acesso ao devTools e hot module replacement, basta rodar os seguintes comandos:

yarn serve

Estes comandos farão com que a aplicação rode em modo de desenvolvimento na porta 8080. Sendo assim, possível acessar a aplicação através da URL localhost:8080

Configurações da execução em modo de desenvolvimento

Estão pré-configurados alguns comandos para facilitar o desenvolvimento:

• yarn serve:demo: Roda a aplicação utilizando o DEMO como backend
• yarn serve:staging: Roda a aplicação utilizando o staging como backend
• yarn serve:staging:1: Roda a aplicação utilizando o staging-1 como backend
• yarn serve:staging:2: Roda a aplicação utilizando o staging-2 como backend
• yarn serve:staging:3: Roda a aplicação utilizando o staging-3 como backend
• yarn serve:staging:4: Roda a aplicação utilizando o staging-4 como backend
• yarn serve:staging:5: Roda a aplicação utilizando o staging-2 como backend

Também, podemos utilizar a variável PROXY_HOST caso precise de algo mais customizado.

Além disso também é possível configurar porta, host entre outras coisas na hora de rodar a aplicação. É possível ver as opções disponíveis por padrão através do help do comando serve

yarn serve --help

  --open    open browser on server start
  --copy    copy url to clipboard on server start
  --mode    specify env mode (default: development)
  --host    specify host (default: 0.0.0.0)
  --port    specify port (default: 8080)
  --https   use https (default: false)
  --public  specify the public network URL for the HMR client

Então para alterar o host e a porta, pode ser utilizado, por exemplo:

yarn serve --port 8000 --host [seuhostname].[qualquercoisa].com.br --port 10000

https://leonardom.itflex.com.br:10000
yarn serve --host leonardom.itflex.com.br --port 10000 --https

Também é possível alterar aonde serão feitas as consultas no backend. Por padrão, está configurado para ser feito no localhost:3000 ou conforme descrito em cima. Isso pode ser modificado alterando o arquivo vue.config.js:

...
devServer: {
  proxy: {
    '/api': {
      target: 'http://localhost:3000',
    },
  },
},

Basta alterar o target para o que desejar.

Por exemplo, se quisesse que minhas consultas para as urls que comecem com /api sejam feitas para um sevidor de staging, basta eu alterar o target para http(s)://staging.itflex.lan. Assim as requisições para a api estarão utilizando o backend do servidor de staging.

Para mais informações sobre o devServer consultar:

https://webpack.js.org/configuration/dev-server/

Testes

Os testes podem ser rodados de diferentes maneiras. As principais maneiras são:

Para ficar acompanhando mudanças, tanto do projeto todo, como de um diretório específico:

yarn test:watch
ou
yarn test:watch src/pages/auth

Ou como testes unitários, que rodarão uma única vez:

yarn test:unit
ou
yarn test:unit src/pages/auth

Além dos testes, é importante que seja rodado o linter também.

yarn lint:js

e para corrigir alguns erros que o linter identifica e consegue corrigir sozinho, pode ser utilizado:

yarn lint:js --fix

Gerar arquivos para produção

Caso queira gerar os arquivos para simular o ambiente de produção, ou seja, fazer o build da aplicação. É necessário rodar o comando:

yarn build

Após o comando de build, se o comando finalizou sem erros, os arquivos gerados estarão disponíveis na pasta dist/js/* e dist/css/*