Pular para o conteúdo principal

Desenvolvimento Profissional de Aplicações Remix

  • Antes de começar, certifique-se de que você tem Node.js (>= 18.x) e npm instalados no seu sistema. Se ainda não os tem, faça o download no site oficial do Node.js.
  • Em seguida, será necessário criar uma conta no Square Cloud através da página de cadastro.
  • Por fim, garanta que sua conta possua um plano pago ativo. Você pode ver os planos disponíveis e escolher o que atende ao seu projeto aqui.

Instalando o Remix CLI

Para criar e gerenciar aplicações Remix, instale o Remix CLI globalmente:
npm install -g create-remix

Criando um Projeto Remix

Agora crie um novo projeto Remix com:
create-remix myapp
Selecione o alvo de deployment preferido.
Para o Square Cloud, a opção Node.js server é a recomendada.
Após a criação, entre na pasta do projeto:
cd myapp
Instale as dependências:
npm install
Inicie o servidor de desenvolvimento:
npm run dev
Normalmente sua aplicação ficará disponível em http://localhost:5173/.

Exemplo de Rota Básica

As rotas no Remix são baseadas em arquivos. Aqui está um exemplo simples de rota em: app/routes/_index.tsx
export default function Index() {
  return <h1>Olá Mundo do Remix!</h1>;
}

Configurando o Campo START

No arquivo de configuração do Square Cloud, o campo START é opcional e só é necessário se sua aplicação exigir um comando de inicialização personalizado. Para aplicações Remix, o comando de start típico é:
npm run start
Certifique-se de que seu package.json contém:
"scripts": {
  "start": "remix-serve build",
  "build": "remix build",
  "dev": "remix dev"
}

Comprar um Plano Antes de Enviar o Projeto

Antes de enviar seu projeto, verifique se você possui um plano ativo com CPU e RAM suficientes. Aplicações Remix são leves e, normalmente, funcionam bem nos planos Basic ou Standard, mas aplicações mais pesadas ou APIs podem se beneficiar do plano Pro.
Não tem certeza de quanta RAM e CPU precisa para Remix? Remix é altamente otimizado e eficiente, mas o uso de recursos depende da sua lógica de backend e das integrações com bancos de dados ou APIs. O plano Standard é recomendado para a maioria das aplicações reais.

Recursos Adicionais

Para mais informações sobre o Remix, consulte a documentação oficial aqui. Ela inclui guias completos, tutoriais, referências de API e boas práticas.

Uploading the Project to Square Cloud

After preparing your project, you can upload it to Square Cloud using the dashboard or the CLI.
  • Upload via Dashboard
  • Upload via CLI
Access the Square Cloud Dashboard and upload your project files.

Solução de Problemas

Custom Domain

To use a custom domain (e.g., mysite.com) instead of the default URL https://mysite.squareweb.app/, you need the Standard plan or higher. The subdomain is defined by the SUBDOMAIN field in the configuration file. See: How to set up your custom domain.

Minimum RAM Requirements

Minimum: 512MB RAM for simple websites/APIs. For sites with frameworks (Next.JS, React, Vue, Angular, etc.), we always recommend at least 1GB RAM. For larger applications, use more RAM to avoid LACK_OF_RAM error and ensure performance.

Could not find this site.

Check if the subdomain/domain matches what's configured in the SUBDOMAIN field or in the custom domain settings. If you just uploaded the site, wait up to 60 seconds for Square to enable first access.

Site took too long to respond...

Check if you correctly configured port 80 and host 0.0.0.0 in the application. We recommend using Square's forced environment variables: PORT and HOST from the .env file.
If you continue facing technical difficulties, our specialized support team is available to assist you. Contact us and we'll be happy to help you resolve any issue.