Por que raios fazer o deploy no Apache/Hostgator?

Pra ver se dá certo. Simples assim.

E dá certo? Lógico que dá certo, mas precisa de algumas coisinhas para poder funcionar corretamente.

Vamos do começo

É um site simples, mas que ficará em uma subpasta. Por exemplo:
https://meu-dominio.com.br/site2

Definido isto, as chances são grandes de você usar um Router (react-router-dom, TanStack Router, etc). Eu uso muito o react-router-dom, portanto, neste caso não é diferente.

Configurações

configurando o package.json

Como o website ficará em uma subpasta, é preciso adicionar a tag homepage ao seu arquivo package.json, caso contrário, o build assumirá que seu projeto está hospedado na raiz do servidor.

{
  ...
  "homepage": "https://meu-dominio.com.br/site2/",
  ...
  }

Configurando o BrowserRouter

Agora é a vez do BrowserRouter, com a propriedade basename:

import { BrowserRouter } from 'react-router-dom';
import { Router } from './routes/Router';

export const App = () => {
  return (
    <BrowserRouter basename='/site2'>
      <Router />
    </BrowserRouter>
  )
}

Configurando o vite.config.js

Sem este passo, não importa o que você faça, ao rodar o vite build, o arquivo index.html gerado, ficará com as referências de link erradas. Portanto é crucial esta configuração.

Tudo o que você precisa fazer é adicionar a opção base no arquivo vite.config.js:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  base: '/site2/',
  plugins: [react()],
})

Ou através da flag vite build --base=/my/public/path/.

Bem difícil, heim?

Por fim, só rodar o build. No meu caso, uso o pnpm:
pnpm run build

Configurando o Apache

Certo. Mas para tudo isto funcionar online, ainda é preciso configurar o Apache, através do arquivo .htaccess.

É preciso ter este arquivo na pasta que o index.html irá ficar. Portanto, crie o arquivo na pasta, no meu caso, /site2, com o seguinte conteúdo:

RewriteEngine On
RewriteBase /site2
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [L]

Finalizando

Por fim, faça o upload dos arquivos da pasta dist do seu projeto para a sua pasta no Apache. Não se esqueça dos arquivos na pasta assets.

Considerações

Espero que seja útil para alguém, nem que seja só para teste também.

Posteriormente, quero testar uma plataforma completa. Na verdade duas:

• utilizando o Express e operações CRUD com PHP
• e outra utilizando recursos do Firebase (auth, firestore, etc)

Se alguém aqui já testou isto, por favor, compartilha.

Obrigado por ler e sejam gentis nos comentários 😝