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>,
)
Top comments (0)