Como Hospedar Aplicações React

​

Introdução

​

Pré-requisitos

• Conta Square Cloud: Cadastre-se através da página de cadastro usando seu e-mail.
• Plano Pago Ativo: Garante recursos dedicados e desempenho otimizado para seu aplicativo. Confira nossos planos disponíveis e escolha o mais adequado às suas necessidades.

​

Criando o projeto

npm create vite@latest my-react-app -- --template react

cd my-react-app
npm install

​

Compilando o projeto

npm run build

​

Escolhendo um servidor de produção

​

Biblioteca Express

import express from 'express';
import path from 'path';

const app = express();
const distPath = path.join(import.meta.dirname, 'dist');

app.use(express.static(distPath));

// Fallback SPA: serve o index.html para qualquer rota não atendida acima
app.use((req, res) => {
  res.sendFile(path.join(distPath, 'index.html'));
});

app.listen(80, () => console.log('Server running on port 80'));

​

Biblioteca Serve

​

Instalando a Biblioteca Serve

npm install serve@14.2.3

​

Configurando o Script de Inicialização

"scripts": {
  "start:prod": "serve -s dist -l 80",
  ...
}

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

​

Fazendo o deploy

​

Via dashboard

1

Acesse a página de upload

Acesse a página de upload e envie seu arquivo zip.

2

Configure seu ambiente

Após fazer o upload do seu arquivo zip, você precisará configurar o nome, o arquivo principal ou o ambiente de execução e outras configurações do seu projeto.
Se você estiver enviando um projeto web, certifique-se de selecionar “Publicação na Web” e definir um subdomínio para o seu projeto.

3

Faça o deploy do projeto

Por fim, clique no botão “Deploy” para hospedar seu projeto no Square Cloud. Após o deploy, você poderá monitorar o status e os registros do seu projeto no painel.

4

Confirme que seu app está no ar

Seu primeiro deploy geralmente leva menos de um minuto. No dashboard, aguarde o status da sua aplicação mudar para em execução e verifique os registros em busca de erros de inicialização.
Se você fez deploy de um site ou API, abra https://<seu-subdominio>.squareweb.app no navegador — você deve ver sua aplicação respondendo. Se você fez deploy de um bot, envie um comando para confirmar que ele está online.

Seu app não está iniciando? Veja o guia de solução de problemas para as causas e correções mais comuns.

​

Via CLI

npm install -g @squarecloud/cli

squarecloud update

curl -fsSL https://cli.squarecloud.app/install | bash

squarecloud auth login

squarecloud upload

squarecloud upload --file <caminho/para/zip>

squarecloud app status
squarecloud app logs

​

Solução de Problemas

​

Recursos Adicionais

​

Contate-nos