Deployar en una subcarpeta React con React-Router-Dom en servidor Nginx con Vite

Hola a todos

En esta ocasión les traigo un nuevo tutorial para poder deployar su aplicación en una subcarpeta

NGINX

Dentro de Nginx debemos de configurar nuestro servidor de la siguiente manera

        location /[AQUÍ VA EL NOMBRE DE LA SUBCARPETA]{
            try_files $uri $uri/ /[SUBCARPETA]/index.html?$args;
        }

Dentro del location tendremos que poner el nombre de la subcarpeta para cuando accedan ahí cargue los archivos necesarios accediendo a Nombre de la subcarpeta/index.html y que cargue el archivo html.

Con esto garantizamos que se carguen los archivos que queremos al momento de acceder a una ruta de la subcarpeta

vite.config.js

Si no existe el archivo de configuración lo creamos

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

// https://vitejs.dev/config/
export default defineConfig({
  base: 'https://[RUTA DEL SERVIDOR]/[Nombre de la subcarpeta]/',
  plugins: [react()],
})

Nota: La ruta del servidor es ejemplo: rodrigo.hgo.mx

main.jsx

En el main.jsx de nuestra aplicacion debemos de definir el publicPath para todas nuestras rutas

const publicPath = '/[NOMBRE DE TU SUBCARPETA]/';

const router = createBrowserRouter([
  {
    path: publicPath,
    element: <Root/>,
    errorElement: <ErrorPage />, 
  },
  {
    path: `${publicPath}encuesta`,
    element: <Contact />,
  },

]);



// AQUI EN EL ROUTER PROVIDER DEBEMOS DE PONER EL BASENAME 

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <RouterProvider router={router} basename="/[NOMBRE DE TU SUBCARPETA]">
    </RouterProvider>
  </React.StrictMode>,
)