Deploy ReactJS em Servidor Apache

Salve clã! 😁 

Este post é como resolvi um problema que tive essa semanal quando tive que fazer o deploy de um projeto ReactJS em um servidor Apache. Acho interessante compartilhar com vocês.

Sem mais enrolação! 🚀

Todo o processo de criação e produção de seu projeto continua o mesmo. Entretanto temos alguns pontos pra ressaltar.

Devemos adicionar no arquivo .htaccess, que deve ficar no diretório que contem o arquivo index.html, o seguinte:

Options -MultiViews RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^ index.html [QSA,L] 

Outro ponto importante, e foi onde eu empaquei é 🤔, caso seu projeto fique como um subdominio do site como: https://myapp.com/the-app, você deve especificar isso no seu Router dentro do seu projeto.
Esta informação deverá estar presente no BrowserRouter na opção basename="/the-app", caso contrario o React interpretará que seu projeto estará na raiz do domínio.

Abaixo temos um exemplo:

import React from "react"; import { BrowserRouter, Switch, Route } from "react-router-dom"; import Home from "./pages/home"; import Support from "./pages/support"; export default function Routes(){ return( <BrowserRouter basename="/the-app"> <Switch> <Route path="/" exact component={Home} /> <Route path="/support" component={Support} /> </Switch> </BrowserRouter> ); } 

Além disso devemos também adicionar no arquivo package.json a tag homepage com a url completa que seu projeto estará hospedado. Ex: https://myapp.com/the-app 

Não mencionei porém todos já devem estar cientes que depois de todas as alterações feitas, devemos executar o script build para a criação de uma versão otimizada pronta para ser posta em produção. Devemos mover apenas os arquivos que estarão dentro da pasta build para o servidor Apache, não se esqueça disso! 😅

Este pequeno detalhe de adicionar o basename no BrowserRouter me custou algumas horas de pesquisa, espero que eu tenha te ajudado. 🥰

Para mais veja meu Github. 😎