​
Introdução

  • Antes de começar, certifique-se de que o Node.js e o npm estão instalados no seu sistema. Caso ainda não os possua, faça o download através do site oficial do Node.js.
  • Em seguida, será necessário criar uma conta na Square Cloud, o que pode ser feito através da página de cadastro. Você pode utilizar seu e-mail para criar a conta.
  • Por fim, é obrigatório possuir um plano pago ativo em sua conta. Consulte nossos planos e adquira o mais adequado às suas necessidades aqui.

​
Criando um Projeto React

Para criar um novo projeto React, execute o seguinte comando: 
npx create-react-app minha-app-react
No comando acima, minha-app-react é o nome do seu novo projeto. Você pode substituir minha-app-react por qualquer nome desejado para o seu projeto. O create-react-app é um pacote disponível no registro npm que configura um novo projeto React automaticamente. Ele cuida de toda a configuração inicial, como criação do diretório do projeto, instalação das dependências necessárias e configuração dos arquivos básicos.

​
Configurando o Ambiente de Produção com Serve

Após ter seu projeto React criado e configurado, é hora de prepará-lo para produção. Para isso, utilizaremos uma biblioteca chamada serve. Esta biblioteca é um servidor estático que pode servir seu projeto React após ter sido construído (build).

​
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 serve@14.2.3
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": "react-scripts start",
  "start:prod": "serve -s build -l 80",
  ...
}
No script start:prod, o comando serve -s build -l 80 executa as seguintes funções:
  • serve: Este é o comando para iniciar o servidor serve.
  • -s build: A opção -s serve o diretório build no modo single-page application. Isso significa que todas as requisições não encontradas serão redirecionadas para index.html. O diretório build é 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.
Agora, quando desejar iniciar seu projeto em modo de produção, você pode executar o comando npm run start:prod. Este comando primeiro constrói seu projeto React e depois serve os arquivos construídos usando serve na porta 80.

​
Criando o arquivo de configuração squarecloud

Aprenda sobre: como fazer o arquivo de configuração para a Square Cloud.

O arquivo squarecloud.app é um arquivo de configuração que será usado para configurar sua aplicação; ele será usado para definir o nome, descrição, versão, arquivo principal, entre outras coisas.

​
Configurando o Campo START

No arquivo de configuração da Square Cloud, o campo START é essencial para personalizar o comando de inicialização. Se você deseja construir e iniciar sua aplicação na Square Cloud, configure o campo START da seguinte forma:
squarecloud.app
START=npm run build && npm run start:prod
Este comando executará os scripts “build” e “start:prod” definidos no seu package.json:
package.json
{
  "name": "minha-app-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-scripts": "5.0.1",
    "serve": "^14.2.3",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "start:prod": "serve -s build -l 80",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

​
Adquirindo um Plano Antes do Upload do Projeto

Antes de enviar seu projeto para a Square Cloud, é importante compreender que você precisa adquirir um plano. O tipo de plano escolhido dependerá dos recursos exigidos pela sua aplicação. Você pode visualizar nossos planos aqui.
Está se perguntando quanta RAM e CPU seu plano precisa para hospedar um website React? Não se preocupe, estamos aqui para ajudar. O React é um framework JavaScript conhecido por sua velocidade e flexibilidade. Ele permite que desenvolvedores construam aplicações web grandes que podem atualizar e renderizar eficientemente em resposta a mudanças de dados. É também relativamente fácil de aprender, tornando-o acessível para iniciantes. Nosso plano Standard oferece 4GB de RAM e 4vCPU, o que deve ser suficiente para a maioria dos websites React. No entanto, se você está trabalhando em um projeto maior ou precisa de mais estabilidade, recomendamos considerar nosso plano Pro. Com recursos adicionais, você pode garantir um desempenho suave mesmo sob alta demanda. Para adquirir, simplesmente clique aqui.

​
Enviando o Projeto para a Square Cloud

Após preparar os arquivos do seu projeto, você pode agora enviá-los para a Square Cloud e hospedar seu projeto.
Acesse o Painel da Square Cloud e envie os arquivos do seu projeto.

​
Recursos Adicionais

Para mais informações sobre React e suas ferramentas, visite a documentação oficial do React. Lá, você encontrará guias detalhados, tutoriais e documentação de API para ajudá-lo a aproveitar ao máximo o React.

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