Déployer une application React dans un sous-dossier

Récemment, nous avons été confrontés à un problème : déployer notre application React dans un sous-dossier ! Après plusieurs recherches et des informations recueillies à plusieurs endroits, nous avons finalement réussi :)

Nous allons essayer de vous résumer tout ça, en espérant que cela puisse aussi vous aider !

1. La balise base
2. La propriété homepage
3. Le Router
4. Le fichier .htaccess
5. C'est tout ! ;)

npm run build crée un dossier build avec un version de production de l'application. Par défaut, cette version est produite en supposant que notre application sera hébergée à la racine du serveur.

Ce que nous ne voulons pas !

1. La balise base

Dans le fichier public/index.html, vérifiez que la propriété href de la balise <base> soit %PUBLIC_URL%, ou bien ajoutez cette balise si elle ne s'y trouve pas.

<!-- index.html -->
<head>
  ...
  <base href="%PUBLIC_URL%/">
  <title>%REACT_APP_WEBSITE_NAME%</title>
</head>

2. La propriété homepage

Modifiez la propriété homepage dans votre fichier package.json pour y spécifier le nom de votre sous-dossier.

// package.json
{
  ...
  "homepage": "/subdirectory/",
  ...
}

Ce paramètre sera utilisé comme variable d'environnement %PUBLIC_URL%, qui est utilisé dans la balise <base> que nous venons de voir. Cette valeur est appliquée uniquement lors de la génération du build de production (avec la commande npm run build) et n'affecte pas votre serveur de développement local.

3. Le Router

Nous utilisons connected-react-router, nous devons donc également définir la propriété basename du routeur pour qu'ils fonctionnent correctement dans l'environnement local comme en production.

// configureStore.js
...
import { connectRouter, routerMiddleware } from 'connected-react-router';
import { createBrowserHistory } from 'history';
import { applyMiddleware, compose, createStore } from 'redux'
...
export const history = createBrowserHistory({
  basename: process.env.PUBLIC_URL
});

export default function configureStore() {
  ...
  const store = createStore(
    connectRouter(history), // root reducer with router state
    persistedState,
    compose(
      applyMiddleware(
        routerMiddleware(history), // for dispatching history actions
     // ... other middlewares ...
      ),
    ),
  )

  return store
}

4. Le fichier .htaccess

Notre dernier problème était le routage de l'application sur le serveur. Lorsque nous avons essayé d'accéder directement à la page http:/exemple.com/subdirectory/test, le serveur a recherché le dossier /subdirectory/test/ et, évidemment, il ne l'a pas trouvé.

Nous utilisons Apache HTTP Server, nous avons donc créé un fichier .htaccess pour ajouter cette règle et lui indiquer de diriger toutes les requêtes vers /subdirectory/index.html :

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

Vous devez ajouter le fichier .htaccess dans le dossier public de votre projet. Il sera copié lors du npm run build vers le dossier build.

5. C'est tout ! ;)

Plus d'info sur la documentation de Create React App.

Partager sur