{"id":134,"date":"2021-11-10T17:00:24","date_gmt":"2021-11-10T16:00:24","guid":{"rendered":"http:\/\/guillemrueda.com\/blog\/?p=134"},"modified":"2021-11-10T17:05:35","modified_gmt":"2021-11-10T16:05:35","slug":"enroutament-i-react","status":"publish","type":"post","link":"https:\/\/guillemrueda.com\/blog\/2021\/11\/10\/enroutament-i-react\/","title":{"rendered":"Enroutament i React"},"content":{"rendered":"\n<p>Tenir l&#8217;aplicaci\u00f3 ben enroutada no significa qu\u00e8 despr\u00e9s el enlla\u00e7 amigable sigui funcional al 100%: si no es dins del context de la aplicaci\u00f3 React. Per a aquesta ra\u00f3 s&#8217;haur\u00e0 de dir al servidor HTTP que redireccioni qualsevol petici\u00f3 diferent a la ruta de index a la mateixa qu\u00e8 el propi index que executa la aplicaci\u00f3.<\/p>\n\n\n\n<p>En alguns casos com pot ser ASP MVC amb l&#8217;extensi\u00f3 de SPA, el propi host IIS o autohost de NET Core es configura per redireccionar aquestes peticions. En NodeJS passa exactament el mateix al desplegar-lo com una aplicaci\u00f3 React Client.  <\/p>\n\n\n\n<p>En altres entorns no es ben b\u00e9 aix\u00ed, com pot ser Apache o Azure Static Web Apps.<\/p>\n\n\n\n<p><strong>Apache<\/strong>: <\/p>\n\n\n\n<p>Caldr\u00e0 crear un fitxer <em>.htaccess <\/em>pr\u00f2pi a la carpeta on es situ\u00ef el build i dins caldr\u00e0 especificar les seg\u00fcents l\u00ednies<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;IfModule mod_rewrite.c&gt;\nRewriteEngine On\nRewriteBase \/subdirectory\nRewriteRule ^index\\.html$ - &#91;L]\nRewriteCond %{REQUEST_FILENAME} !-f\nRewriteCond %{REQUEST_FILENAME} !-d\nRewriteCond %{REQUEST_FILENAME} !-l\nRewriteRule . \/index.html &#91;L]\n&lt;\/IfModule&gt;<\/code><\/pre>\n\n\n\n<p><strong>Azure Static Web Apps:<\/strong> <\/p>\n\n\n\n<p>Caldr\u00e0 crear un fitxer amb el nom <em>staticwebapp.config.json<\/em> i afegir les seg\u00fcents l\u00ednies de configuraci\u00f3:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n    \"navigationFallback\": {\n        \"rewrite\": \"index.html\",\n        \"exclude\": &#91;\"\/static\/*\"]\n    },\n    \"mimeTypes\": {\n        \".json\": \"text\/json\"\n    }\n}<\/code><\/pre>\n\n\n\n<p>Per a m\u00e9s informaci\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Apache htaccess files <a href=\"https:\/\/httpd.apache.org\/docs\/2.4\/howto\/htaccess.html\">https:\/\/httpd.apache.org\/docs\/2.4\/howto\/htaccess.html<\/a><\/li><li>Azure Static Apps configuration: <a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/static-web-apps\/configuration\">https:\/\/docs.microsoft.com\/en-us\/azure\/static-web-apps\/configuration<\/a><\/li><\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Tenir l&#8217;aplicaci\u00f3 ben enroutada no significa qu\u00e8 despr\u00e9s el enlla\u00e7 amigable sigui funcional al 100%: si no es dins del context de la aplicaci\u00f3 React. Per a aquesta ra\u00f3 s&#8217;haur\u00e0 de dir al servidor HTTP que redireccioni qualsevol petici\u00f3 diferent a la ruta de index a la mateixa qu\u00e8 el propi index que executa la &hellip; <a href=\"https:\/\/guillemrueda.com\/blog\/2021\/11\/10\/enroutament-i-react\/\" class=\"more-link\">Continua la lectura de <span class=\"screen-reader-text\">Enroutament i React<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,10],"tags":[],"class_list":["post-134","post","type-post","status-publish","format-standard","hentry","category-azure","category-nodejs"],"_links":{"self":[{"href":"https:\/\/guillemrueda.com\/blog\/wp-json\/wp\/v2\/posts\/134","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/guillemrueda.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/guillemrueda.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/guillemrueda.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/guillemrueda.com\/blog\/wp-json\/wp\/v2\/comments?post=134"}],"version-history":[{"count":4,"href":"https:\/\/guillemrueda.com\/blog\/wp-json\/wp\/v2\/posts\/134\/revisions"}],"predecessor-version":[{"id":138,"href":"https:\/\/guillemrueda.com\/blog\/wp-json\/wp\/v2\/posts\/134\/revisions\/138"}],"wp:attachment":[{"href":"https:\/\/guillemrueda.com\/blog\/wp-json\/wp\/v2\/media?parent=134"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/guillemrueda.com\/blog\/wp-json\/wp\/v2\/categories?post=134"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/guillemrueda.com\/blog\/wp-json\/wp\/v2\/tags?post=134"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}