Pular para o conteúdo principal

​
Desenvolvimento Profissional de Aplicações com Preact

  • Antes de começar, certifique-se de que você possui Node.js e npm instalados no seu sistema. Se ainda não tiver, você pode baixá-los pelo site oficial do Node.js.
  • Em seguida, crie uma conta na Square Cloud através da página de cadastro. Você pode usar seu e-mail para registrar rapidamente.
  • Por fim, garanta que você possui um plano pago ativo em sua conta. Você pode visualizar e adquirir um plano conforme suas necessidades aqui.

​
Configuração do Preact

Para criar um novo projeto Preact, use o Preact CLI. Instale-o globalmente: 
npm install -g preact-cli
Crie um novo projeto Preact: 
preact create default my-preact-app
Em seguida, instale as dependências: 
cd my-preact-app
npm install

​
Criando um Projeto Preact

Inicie o servidor de desenvolvimento local com: 
npm run dev
Your Preact app will start at http://localhost:8080 (or another available port). To edit a simple component, modify: 
src/components/app.js
Exemplo:
app.js
export default function App() {
  return (
    <div>
      <h1>Hello from Preact!</h1>
    </div>
  );
}

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

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

O arquivo squarecloud.app é um arquivo de configuração que define o nome, descrição, versão, arquivo principal e outras configurações da sua aplicação.

​
Comprar um Plano Antes de Enviar o Projeto

Antes de implantar sua aplicação Preact no Square Cloud, certifique-se de ter um plano ativo que atenda à CPU e memória necessárias. Para a maioria das aplicações, o plano Standard é um bom ponto de partida; aplicações de alto tráfego ou intensivas em CPU devem considerar o plano Pro.
Não tem certeza de quanta RAM e CPU uma aplicação Preact precisa? Depende da concorrência, conexões em pool e jobs em background. Comece com o Standard para aplicações web típicas e escale conforme observar limites de recursos.

​
Gerando o Build de Produção do Preact

Antes de enviar, gere o build de produção: 
npm run build
O Preact gerará os arquivos estáticos otimizados dentro do diretório build/.

​
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.

​
Additional Resources

For more information about Preact, visit the official documentation here

​
Troubleshooting

​
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.