DEV Community 👩‍💻👨‍💻

Tobias Mesquita for Quasar Framework Brasil

Posted on

QPANC - Parte 9 - Quasar - Criação e Configuração do Projeto

QPANC são as iniciais de Quasar PostgreSQL ASP NET Core.

15 Adaptando um Projeto NodeJS para o Quasar Framework.

Esta etapa pode ser desnecessária para alguns, pois assim como eu, pode ser que você prefira usar o Visual Studio Code do que o Visual Studio 2019 para codificar em JavaScript.

De toda forma, é importante abordamos este aspecto, pois felizmente não vivemos na ditadura do VSCode ou VS2019.

Primeiro, precisamos criar um projeto NodeJS, pode ser qual quer um, por exemplo: "Basic Node.js Express 4 Application" ou "Basic Vue.js Web Application". Aqui iremos chama-lo de QPANC.App.

Você pode criar o projeto usando TypeScript ao invés de JavaScript se preferir

O projeto em si não importa, uma vez que não iremos usar o Visual Studio para publicar ou debugar o mesmo, se limitando apenas a edição do Código Fonte. A publicação será feita usando o docker-cli e o debug será feito pelo Chromium/Vue.js Dev Tools.

Alt Text
Alt Text
Alt Text

Não criamos o projeto usando o dotnet-cli, pois é possível criar projetos Node apenas pelo Visual Studio para Windows. Isto não será um problema para os devs que usam o VSCode, já que estamos criamos o NJSProj apenas para que os devs que usam o VS2019 possam editar os arquivos JS por ele.

Após criar o projeto, faça o unload do mesmo, remova a referencia a todos os arquivos do projeto, e por fim, apague todos os arquivos na pasta QPANC.App, exceto pelo QPANC.App.njsproj e QPANC.App.njsproj.user.

Alt Text
Alt Text

Agora, através do terminal, instale a versão mais recente do Quasar CLI, e crie um novo projeto na pasta QPANC.App usando o Quasar CLI.

npm i -g @quasar/cli@latest
quasar create QPANC.App
cd QPANC.App
quasar mode add ssr

Você pode escolher as opções que melhor lhe atender, na duvida, pode copiar as minhas escolhas. E claro, se optou por TypeScript durante a criação do NJSProj, opte pelo TypeScript aqui também.

Alt Text

Por fim, no NJSProj, adicione a seguinte seção no lugar daquela que você excluiu a pouco.

<ItemGroup>
  <Content Include=".docker/**/*" />
  <Content Include="src/**/*" />
  <Content Include="src-ssr/**/*" />
  <Content Include="src-pwa/**/*" />
  <Content Include="src-electron/**/*" />
  <Content Include="src-cordova/**/*" />
  <Content Include="*.*" Exclude="QPANC.App.njsproj.user;yarn.lock;package-lock.json" />
</ItemGroup>

O projeto no Visual Studio deve está com a seguinte aparência.:

Alt Text

16 Configurando docker compose para o Quasar

Antes de continuamos, precisamos entender que o yarn/npm irá baixar pacotes diferentes no Windows, quando comparados ao Linux. O mesmo pode vir a acorrer, mesmo dentre distribuições diferentes do Linux.

Então antes de continuamos, apague as pastas node_modules e os arquivos yarn.lock e package-lock.json do projeto QPANC.App. aconselho que faça isto com o Visual Studio 2019 fechado, ou pelo menos, com o projeto QPANC.App descarregado.

Lembrando que, caso instale algum pacote usando o yarn add ou npm install será preciso repetir o passo acima, então o ideal é adicionar as dependências direto no package.json e deixar que o docker baixe estas dependências.

Outro aspecto importante, é que a aplicação não vai está rodando direto no seu SO principal, e sim dentro de uma VM, então é importante que o quasar não tente abrir um browser.

E por fim, precisamos fazer um pequeno ajuste, para que o hot reload funcione de forma satisfatória, que é excluir o node_modules dos arquivos observados pelo hot reload.

QPANC.App/quasar.config.js

module.exports = function (ctx) {
  return {
    devServer: {
      https: false,
      port: 8080,
      open: false, // opens browser window automatically
      watchOptions: {
        ignored: /node_modules/,
        aggregateTimeout: 300,
        poll: 1000
      }
    }
  }
}

Agora podemos trabalhar na configuração do docker, Inclua o seguinte service no QPANC/docker-compose.yml:

services:
  qpanc.app:
    restart: always
    image: ${DOCKER_REGISTRY-}qpancapp
    networks:
      - qpanc.network

Assim como, no QPANC/docker-compose.override.yml:

version: '3.4'

services:
  qpanc.app:
    container_name: qpanc_app_dev
    build:
      context: ./QPANC.App
      target: 'develop-stage'
      dockerfile: .docker/dev.Dockerfile
    volumes:
      - ./QPANC.App:/app
    ports:
      - "8080:8080"
    command: /bin/sh -c "yarn && quasar dev -m ssr"

Assim como o seguinte Dockerfile

QPANC.App/.docker/dev.Dockerfile

# develop stage
FROM node:12.16-alpine as develop-stage
WORKDIR /app
COPY package*.json ./
RUN npm i -g @quasar/cli@latest
COPY . .

Note que no exemplo acima estamos usando o Node 12.16, porém é recomendado que mantenha o node sempre atualizado, assim como, escolha uma versão de numero par (e.g: Node 10, 12, 14, 16, etc).

Agora execute o projeto normalmente, a primeira execução irá demorar, já que precisaremos baixar a imagem do node, instalar o quasar-cli, baixar todas as dependências, etc.

Alt Text

As próximas execuções serão mais rápidas, desde que não precise adicionar um novo pacote, ou pior, reinstalar todas as dependências.

Alt Text

Agora, para testar se o hot reload está funcionando, vá até o arquivo QPANC.App/src/pages/index.vue e insira um texto aleatório logo após a imagem:

<template>
  <q-page class="flex flex-center">
    <img alt="Quasar logo"
         src="~assets/quasar-logo-full.svg"> UID: {{uid}}
  </q-page>
</template>

<script>
import { uid } from 'quasar'
export default {
  name: 'PageIndex',
  data () {
    return {
      uid: uid()
    }
  }
}
</script>

A pagina inicial do App deve ter se atualizado sozinha:

17 Usando o VSCode e o VS2019 lado a lado

Por mais que seja possível editar o projeto do Quasar no VS2019, você descobrirá que é bem mais comodo, pratico e produtivo usar o VSCode.

Porém o VS2019 redefine o nome do projeto ao executar o comando do docker-compose, que por default seria o nome da pasta de onde o comando é executado.

Alt Text

Então, para usar o VSCode você terá 2 opções.:

17.1 - Executar o comando do docker-compose sempre pelo VS2019.

Neste caso, mesmo que não tenhamos a intenção de editar arquivos da API, precisaremos abrir o VS2019, para que possamos dá start nos projetos de backend e frontend.

O que na pratica, transforma o VS2019 em um grande elefante branco.

17.2 - Remover todos os containers

Neste caso, sempre que houver a necessidade de alternar entre o VSCode e o VS2019, você terá de limpar todos os containers, desta forma, ao executar o comando docker-compose up, não irá surgir conflitos.

para listar todos os containers, pode usar o seguinte comando.:

docker container ls

Ao faze-lo, será listado todos os containers, com os seus respectivos ids, names, etc. aqui apenas nos interessa os ids.

agora, podemos parar os containers desejados, e logo após remover os mesmos, para tal podemos usar os seguintes comandos.:

docker container stop ${id}
docker container rm ${id}

por exemplo:

docker container stop bb25672a550b
docker container rm bb25672a550b

Então, você terá de repetir este comando para todos os containers, o que não é nada pratico.

Porém, você pode executar o comando acima, para todos os containers, o primeiro passo é listar apenas o id dos containers, e remover o cabeçalho.:

docker container ls -aq

Onde -a (ou --all) serve para listar todos os containers, não somente aqueles em execução, e o -q (ou --quiet) serve para exibir apenas os ids.

O próximo passo, é executar o rm e o stop para cada id retornado pelo comando acima.:

docker container stop $(docker container ls -aq)
docker container rm $(docker container ls -aq)
docker system prune

Apesar de não ser necessário, você pode usar o mesmo principio, para remover todas as images, volumes, networks, etc. por exemplo:

docker image rm $(docker image ls -aq)
docker image rm $(docker image ls -aq) --force
docker volume rm $(docker image ls -q)
docker network rm $(docker network ls -q)

E caso queria fazer uma faxina após remover estes artefatos.:

docker system prune

Alt Text

após realizar a limpeza dos containers, pode executar o comando do docker-compose para inicializar a aplicação:

cd QPANC.App
docker-compose -f ../docker-compose.yml -f ../docker-compose.override.yml up

Alt Text

17.3 - Considerações

Particularmente, prefiro prefiro manter o Elefante Branco na sala.

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Good news! You can update to dark mode in your DEV settings.