Menu
I have a react app that works perfectly fine locally, when I deploy it to Azure, I have a few 404 errors, on the index.html
All of them with the tag %PUBLIC_URL%
According to the documentation, they will be replaced in the build process, but not sure how this is done, so that when deployed, the correct urls are put in place
<!doctype html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon.png">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700" rel="stylesheet" async>
<link async rel="stylesheet" href="%PUBLIC_URL%/css/ionicons.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/style.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
crossorigin="" async/>
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Isomorphic</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
807
To update your React version, install the latest versions of the react and react-dom packages by running npm install react@latest react-dom@latest . If you use create-react-app , also update the version of react-scripts . Copied! The command will update the versions of the react-related packages.
As the name suggests, the platform hosts static web apps that don't require a back end. Azure supports React, Angular, Vue, Gatsby, and many more, out of the box. However, you may run into situations where you want some back-end support, such as when you need the backend to run one or two API calls.
HOW TO REPLACE %PUBLIC_URL%
By default, Create React App produces a build assuming your app is hosted at the server root. example.com
If your website isn't served from this root, (maybe you want to serve from example.com/relativepath, you can override this by specifying the homepage in your package.json
"homepage": "http://example.com/relativepath",
This will let Create React App correctly infer the root path to use in the generated HTML file.
In your case, however, I think you get a 404 error because the Azure is trying to find an index.html (or some other index.* named). To fix this, Azure needs to know how to pass the intended route to the one and only index.html placed at the site's root. Create a new file named web.config inside /site/wwwroot folder with the following content:
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<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>
</rules>
</rewrite>
</system.webServer>
</configuration>
This will tell Azure to rewrite all urls as if they are pointing to our root file and our SPA application can handle the links correctly.
References:
https://facebook.github.io/create-react-app/docs/deployment#building-for-relative-paths
https://medium.com/@to_pe/deploying-create-react-app-on-microsoft-azure-c0f6686a4321
I hope this may help you
132
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
