Criando aplicação VueJS usando Flask como servidor web. (Python/Javascript)

Quando comecei a estudar VueJS, logo pensei: Vou criar uma aplicação com a API + Backend feitos em Python, o frontend em VueJS e vai ficar muito foda!

Só que na hora que eu fui tentar, acabei apanhando um tanto. Especialmente por estar usando o vue-cli3, pois os exemplos que eu encontrava utilizavam versões mais antigas.

 

Conforme eu pesquisava, fui chegando a conclusão de que estava fazendo algo de errado. Então resolvi começar o projeto novamente e descobri que sim: Estava problematizando algo simples.

Então, para evitar que você perca tanto tempo quanto eu perdi, fiz este tutorial para mostrar como montei meu projeto VueJS + Flask .

 

Para este tutorial, vou presumir que você já possui o Python 3.6+ e o Node (+npm) instalado em sua maquina.

 

 

Pré-requisitos

Um aviso para todos os comandos desta seção: Se estiver no Linux/Mac, provavelmente vai precisar colocar sudo na frente deste comando. Se estiver no Windows, vai precisar de estar com uma janela do prompt aberta com privilégios de administrador.

 

1. Instalar Flask

 

2. Instalar VueJS

(Se o VueJS já estiver instalado na sua maquina, ignore este passo.)

 

3. Atualize o Vue CLI para a versão 3

 

 

Preparando ambiente

1. Local para o projeto.

A primeira coisa que precisamos fazer é criar um local para o nosso projeto. Você (provavelmente) tem uma estrutura de diretórios propria que gosta de utilizar, mas para este exemplo, vamos criar da seguinte forma:

  1.  c:\\Flask-VueJS: Este diretório vai ser o root do projeto;
  2. .\backend: Vai armazenar o código em python e o código pronto (após build) do VueJS.
  3. .\frontend: Onde o fonte da aplicação VueJS vai ficar.

Eu sei que estes nomes não condizem exatamente com os conceitos de frontend/backend, mas acho que fica assim fica mais simples (em termos didáticos).

No Windows:

No Linux, utilize:

 

 

Tanto  o comando para Windows quanto o para Linux vão criar tanto o diretório Flask-Vue quanto o backend de uma vez. Você deve ter reparado que eu não criei o diretório frontend. Foi de propósito. O Vue irá cria-lo para nós.

 

 

Criando o projeto em VueJS (e o diretório frontend).

No diretório raiz do nosso projeto, utilize o vue-cli para criar o projeto.

 

Neste caso, frontend é o nome do projeto em VueJS que estamos criando.  a interface do vue-cli vai cuidar de criar um diretório com o nome do projeto (que, no nosso caso, é o frontend) e vai colocar lá os arquivos necessários.

 

Opcional: As configurações que utilizei para o projeto em VueJS

Esta seção do post é opcional, apenas para mostrar as opções que escolhi na hora de criar o projeto. O bloco abaixo representa a última “tela” das configurações e ela mostra todas as opções que marquei.

 

1. Incluindo o VuetifyJS

Se você não conhece, VuetifyJS é um framework de componentes visuais que utiliza o estilo Material Design (da Google).  Você não precisa instalar este framework mas, na minha opinião, ele é muito bom, fácil de usar e possui uma quantidade grande de componentes.

Se quiser instalar, acesse o diretório do projeto e utilize o comando abaixo:

 

Opcional: As configurações que utilizei para instalar o VuetifyJS

Assim como na criação do projeto VueJS, vou listar aqui as opções que escolhi na hora de instalar o framework. Você pode alterar as opções da forma que preferir. Novamente, para não poluir demais o post, vou deixar apenas a última “tela” da configuração, mas ela mostra todas as opções que escolhi.

 

 

Alterando configurações de build do projeto VueJS

Quando você realiza o build do projeto, ou seja, prepara o projeto do VueJS para ser utilizado em produção, os scripts executados apagam o diretório de saída dos arquivos. Todavia, os arquivos gerados pelo VueJS devem ficar nos diretórios templates e static (do Flask).

 

Para conseguir fazer isso, devemos criar o arquivo vue.config.js, que vai sobrescrever algumas configurações padrão do framework.

No diretório frontend, adicione um arquivo com o nome vue.config.js e inclua o seguinte conteúdo:

 

Acima estamos exportando algumas variáveis:

  • outputDir: Indica o diretório base onde os arquivos ‘de produção’ serão gerados. Lembrando que este arquivo está no diretório frontend, o que eu fiz foi voltar um diretório, acessar o diretório backend, depois o templates e defini o diretório vue como o local onde os templates serão salvos para o Flask consumir;
  • indexPath: Indica o caminho para o arquivo index.html. Este caminho é relativo ao que você definiu na variável outputDir;
  • assetsDir: Indica o caminho onde os recursos (assets) da aplicação serão salvos. Estes assets são as imagens, arquivos .js, .css e outros. Como este também é um valor relativo ao que foi definido na outputDir. Neste caso, para aderir aos padrões do Flask, precisamos colocar os assets dentro do diretório static, que  existe dentro do backend. Como o diretório do output (outputDir) está definido para backend/templates/vue e nós precisamos chegar no diretório /backend/static/vue, temos que voltar dois diretórios primeiro.

 

Caso tenha ficado confusa a explicação acima, veja os caminhos absolutos equivalentes aos que  inseri nas variáveis acima:

  • outputDir: c:\Flask-Vue\backend\templates\vue
  • indexPath: c:\Flask-Vue\backend\templates\vue\index.html (outputDir + index.html)
  • assetsDir: c:\Flask-Vue\backend\static\vue

 

Você deve ter reparado que eu inclui o diretório vue nestes caminhos. Fiz isso por duas razões:

  1. Como mencionei anteriormente, toda vez que você executar o build, o diretório que foi definido no outputDir será deletado. Para evitar que arquivos importantes do backend sejam apagados, melhor deixar os arquivos do VueJS isolados.
  2. Falando em isolar arquivos. Esta foi a outra razão pela qual deixei estes arquivos em lugares separados. Desta forma, evitamos que os arquivos criados pelo VueJS ou utilizados por ele acabem se misturando com os que (eventualmente) serão criados no Flask.

Para executar o build do seu frontend, utilize o comando:

 

 

 

Criando o servidor web usando Flask

Sei que este post está grande, mas estamos quase terminando. 🙂

 

No diretório backend, crie um arquivo chamado app.py e inclua o seguinte conteúdo nele:

 

No código acima faço as importações necessárias e crio uma instância do Flask. Não vou me preocupar muito com configurações do Flask ou nos procedimentos para criar/utilizar um virtualenv, mas isso não deve se rum problema. O código deve funcionar da forma que está. (Caso queira, faça as alterações que achar importantes.)

 

Nesta aplicação que criamos, quem vai gerenciar as rotas será a propria aplicação VueJS, o Flask disponibilizará os arquivos dele e acesso à urls de API. Sendo assim, precisamos criar uma rota que capture todos os endereços utilizados na nossa aplicação. Para isso, vou utilizar o snippet “catch-all” (não é da minha autoria, mas funciona e é o exemplo mais comum que encontramos pelo Google a fora.)

 

A única alteração que fiz neste snippet foi utilizar a função render_template, passando o caminho do template que quero renderizar. Como no passo anterior, salvei o index.html dentro do diretório templates/vue, precisei passar o caminho “vue/index.html” para que a função retorne o template correto.

 

Para testar, vou adicionar outra rota, mas ela deve retornar um json e não o template (index.html).

A rota acima vai retornar a string ‘API V1 FOO’ com o status code 200, mas qualquer outra rota vai cair no ‘catch all’ e quem vai gerenciar é o VueJS.

 

Para executar sua aplicação toda usando o Flask, basta executar o run() do Flask:

 

Lembre-se de que você precisa ter feito o build no frontend primeiro.

 

Espero ter ajudado.

The following two tabs change content below.
Breno RdV
Ex-Psicólogo, com quase uma década de experiência em Recursos Humanos e Gestão de Pessoas, atual desenvolvedor e Analista de Sistemas, trabalhando com PowerBuilder, C#, PowerShell e expandindo horizontes para Python, Xamarin, PHP, Angular e (por que não?) Unity.

Comments

comments

Posted in Dev, JavaScript, Python and tagged , , , , , .