Uno dei problemi più frequenti, che si incontrano nel deploy di applicazioni react su server, è sicuramente quello relativo al refresh delle pagine. Il comportamento che ci si aspetta è quello di effettuare il refresh del browser e di veder ricaricata la propria pagina. Un pò come avviene durante le fasi di sviluppo, utilizzando localhost come server. Ma non è proprio così.
Un applicazione react è un’applicazione SPA (single page application), ed il server web non è conoscenza dei file statici che dovrà caricare: per questo motivo verrà ritornato un errore 404.
Come si può risolvere questo problema?
Da parte sua React gestisce le rotte a partire dal file statico index.html.
In un server IIS la configurazione può essere fatta utilizzando il file web.config, posizionato all’interno root di ogni singolo sito. Utilizzando il rewrite delle rotte, possiamo far in modo che tutte le richieste fatte ad IIS utilizzino la riscrittura verso il file statico index.html, che gestirà le rotte nel modo adeguato.
Il primo passo da eseguire è l’installazione del modulo Rewrite all’interno di IIS e scaricabile da questo link.
A questo punto è possibile creare le configurazioni direttamente all’interno del file web.config nel seguente modo:
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="ReactRouter Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
</conditions>
<action type="Rewrite" url="index.html" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>La regola all’interno del web.config, può anche essere riscritta in questo modo, dove è stata aggiunta anche la gestione delle directory:
<rule name="React Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
<add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>In questo modo tutte le richieste vengono riscritte verso il file dell’applicazione index.html.