Pular para o conteúdo principal

​
Desenvolvimento Profissional de Sites Gatsby

  • Antes de começar, verifique se 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.
  • Gatsby é um gerador de sites estáticos baseado em React com suporte a renderização dinâmica (SSR) e builds incrementais. Escolha um starter ao inicializar seu projeto.
  • Crie uma conta no Square Cloud na página de cadastro e garanta que tem um plano pago ativo se necessário aqui.

​
Configuração do Gatsby

Inicialize um novo projeto Gatsby usando o inicializador oficial: 
npm create gatsby@latest
Siga os prompts para escolher um starter e opções (TypeScript, Tailwind, etc.). Após a criação, entre no diretório do projeto e instale as dependências: 
cd my-gatsby-site
npm install

​
Criando um Projeto Gatsby

Inicie o servidor de desenvolvimento: 
npm run develop
O servidor de desenvolvimento do Gatsby geralmente roda em http://localhost:8000. Para gerar uma página simples, adicione src/pages/index.js com: 
import * as React from 'react'

export default function Index() {
  return <h1>Olá do Gatsby!</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 site Gatsby no Square Cloud, confirme se possui um plano ativo que atenda às necessidades de recursos da sua aplicação. Sites Gatsby estáticos são eficientes em recursos e normalmente funcionam bem nos planos Basic ou Standard. Se usar renderização no servidor, features de preview ou builds pesados, considere Standard ou Pro.
Não tem certeza de quanta RAM e CPU um site Gatsby precisa? Para sites estáticos as necessidades são pequenas; sites com SSR ou builds pesados dependem do tamanho do conteúdo e da concorrência. Comece com Standard para casos dinâmicos.

​
Build do Gatsby para Produção

Faça o build de produção antes de enviar: 
npm run build
O Gatsby gerará a saída estática dentro da pasta public/ por padrão.

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

​
SSR

Para builds SSR que emitem um bundle de servidor, basta indicar o server.js como arquivo principal.

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