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