Pular para o conteúdo principal

​
Desenvolvimento Profissional de Aplicações Qwik

  • Antes de começar, certifique-se de que você tem Node.js (>=16.x) e npm instalados no seu sistema. Se ainda não os tem, faça o download no site oficial do Node.js.
  • Qwik foca em resumability e hidratação mínima. Ao inicializar o projeto, escolha um starter adequado (recomenda-se Qwik City para apps full‑stack).
  • Crie uma conta no Square Cloud através da página de cadastro e verifique se sua conta possui um plano pago ativo quando necessário aqui.

​
Configuração do Qwik

Inicialize um novo projeto Qwik usando o inicializador oficial: 
npm create qwik@latest
Siga os prompts para escolher Qwik City (aplicação completa) ou Qwik App (estático) e as integrações que desejar. Após a criação, entre no projeto e instale as dependências: 
cd my-qwik-app
npm install
Se você escolheu Qwik City, o projeto incluirá pontos de entrada de servidor e adapters para Node, Cloudflare, etc.

​
Criando um Projeto Qwik

Inicie o servidor de desenvolvimento: 
npm run dev
O servidor de desenvolvimento normalmente fica em http://localhost:5173 (Vite) ou conforme informado pelo inicializador. Crie uma página simples em src/routes/index.tsx (Qwik City) ou componentes em src/components/: 
export default function Index() {
  return <h1>Olá do Qwik!</h1>;
}

​
Criando o Arquivo de Configuração do Square Cloud

Saiba mais: como criar o arquivo de configuração para o Square Cloud.

O arquivo squarecloud.app define o nome da aplicação, descrição, versão, ponto de entrada e outras configurações essenciais.

​
Comprar um Plano Antes de Enviar o Projeto

Antes de implantar seu projeto Qwik no Square Cloud, confirme se possui um plano ativo que atenda às necessidades de recursos da aplicação. Sites estáticos Qwik são muito eficientes e normalmente funcionam bem nos planos Basic ou Standard. Se você usar um adapter de servidor ou esperar alta concorrência, prefira Standard ou Pro conforme o tráfego.
Não tem certeza de quanta RAM e CPU um app Qwik precisa? Sites estáticos/resumable exigem poucos recursos; aplicações Qwik City com renderização no servidor dependem da lógica do backend e da concorrência. O plano Standard é um bom ponto de partida para apps dinâmicos.

​
Build do Qwik para Produção

Faça o build de produção antes de enviar: 
npm run build
Se estiver usando Qwik City com um adapter (por exemplo @builder.io/qwik-city/middleware/node), o comando de start em produção normalmente executa a entrada de servidor gerada, por exemplo: 
node build/index.mjs
Para sites puramente estáticos, você pode usar um servidor para serví-lo.

​
Biblioteca express

Para hospedar corretamente no Square Cloud, você deve garantir que o servidor entregue arquivos estáticos. Para usar um servidor Node com Express, é comum algo como:
server.js
import express from 'express';
import path from 'path';

const app = express();

app.use(express.static({'dist/'}));

app.get('*', (req, res) => {
  res.sendFile('dist/index.html');
});

app.listen(80, () => console.log('Server running on port 80'));
Ajuste os parâmetros dist para a pasta de build do seu projeto. Se os arquivos estiverem em uma subpasta dentro de build ou dist, use o caminho até ela em vez de dist.

​
Biblioteca serve

​
Instalando a Biblioteca Serve

Para instalar a biblioteca serve, navegue até o diretório do seu projeto no terminal e execute o seguinte comando: 
npm install [email protected]
Este comando instala a versão 14.2.3 da biblioteca serve. Se desejar instalar a versão mais recente, você pode omitir o @14.2.3.

​
Configurando o Script de Inicialização

Após instalar a biblioteca serve, você precisa configurar o script de inicialização do seu projeto para usar o serve. Para isso, abra o arquivo package.json do seu projeto e adicione um novo script chamado start:prod: 
"scripts": {
  "start:prod": "serve -s dist -l 80",
  ...
}
No script start:prod, o comando serve -s dist -l 80 executa as seguintes funções:
  • serve: Este é o comando para iniciar o servidor serve.
  • -s dist: A opção -s serve o diretório dist no modo single-page application. Isso significa que todas as requisições não encontradas serão redirecionadas para index.html. O diretório dist é comumente criado quando você executa npm run build.
  • -l 80: A opção -l seguida de 80 instrui o serve a escutar na porta 80. A porta 80 é a porta padrão para tráfego HTTP.
Ajuste os parâmetros dist para a pasta de build do seu projeto. Se os arquivos estiverem em uma subpasta dentro de build ou dist, use o caminho até ela em vez de dist.

​
Upload do Projeto para a Square Cloud

Após preparar todos os arquivos do projeto, proceda com o upload para a Square Cloud e hospede sua aplicação profissionalmente.
  • Upload via Dashboard
  • Upload via CLI
Acesse o Dashboard da Square Cloud e faça o upload dos arquivos do seu projeto.

​
Recursos Adicionais

Para mais informações sobre Qwik, visite a documentação oficial aqui.

​
Solução de Problemas

​
Domínio Personalizado

Para usar domínio personalizado (ex: meusite.com) ao invés da URL padrão https://meusite.squareweb.app/, você precisa do plano Standard ou superior. O subdomínio é definido pelo campo SUBDOMAIN no arquivo de configuração. Veja: Como configurar seu domínio personalizado.

​
Requisitos Mínimos de RAM

Mínimo: 512MB de RAM para websites/APIs simples. Para sites com frameworks (Next.JS, React, Vue, Angular, etc.), sugerimos sempre pelo menos 1GB de RAM. Para aplicações maiores, use mais RAM para evitar erro LACK_OF_RAM e garantir performance.

​
Não foi possível encontrar esse site.

Verifique se o subdomínio/domínio corresponde ao configurado no campo SUBDOMAIN ou nas configurações de domínio personalizado. Se você acabou de enviar o site, aguarde até 60 segundos para a Square liberar o primeiro acesso.

​
Site demorou demais para responder...

Verifique se configurou corretamente a porta 80 e host 0.0.0.0 na aplicação. Recomendamos usar as variáveis de ambiente forçadas da Square: PORT e HOST do arquivo .env.
Se você continuar enfrentando dificuldades técnicas, nossa equipe de suporte especializada está disponível para auxiliá-lo. Entre em contato conosco e teremos prazer em ajudá-lo a resolver qualquer questão.