Azure App Service Static Website routes.json doesn't work - reactjs

I deployed my static website (React app) to Azure App Service with routes.json to enable HTML5 routing fallback. My routes json is located in /public and is available under URL https://mywebsite.azurewebsites.net/routes.json.
{
"routes": [
{
"route": "/*",
"serve": "/index.html",
"statusCode": 200
}
]
}
The redirect doesn't work. What am I doing wrong?

Newest
I think you confuse the two services Web App and Static Web App. The routes.json file only takes effect in Static Web App.
According to the React documentation, execute the following command to create the my-app project.
npx create-react-app my-app
cd my-app
npm run start
Then create index2.html in the public folder.
Create a new repository in github with the name reacttest.
In the my-app directory, open cmd and execute the following command to upload the code to github.
git init
git add.
git commit -m'init'
git remote add origin https://github.com/yourname/reacttest.git
git push -u origin master
Follow the official documentation to create Azure Static Web Apps Preview. Check the release status in Action in github. You can see the default page after publishing.
At this time, directly add the routes.json file in the public folder in github. Continue to check the publishing status in Action. After the publishing is completed, you can see that the route is in effect.
When we visit the default homepage, we can see the content of index2.html.
If want see index.html, we can add /index.html in url.

Related

Fetching in reactjs doesn't work after deploying in github pages

So I have a reactjs app publish in github pages, is this one https://bernardoolisan.github.io/PyOcr/
The problem is that the app fetch data, but when I deploy it on github pages it give this error:
And it was working:(
And now my page doesn't work too, it was working but right now is blank i dont know why
I guess you are deploying the react project the wrong way to hosting providers such as github or netlify . First you must build your react project and then only push the files inside the build folder to hosting provider . Github pages can only serve static html css js files so it can only serve the build folder of your react project .
Note
To build a react app you can run npm run build and a build folder will be generated . Then you can push the files inside of the build folder to github repository and enable github pages for it .
I was having a similar issue, and I too though gh-pages can't fetch data. But what I did was I added cors to my server. I allowed cross-origin requests. Now it retrieves data from my server on heroku.

public directory is not deployed on AWS Amplify

I am working on a project built by React/IONIC. Now I'm trying to add social sign in to the application, and to do so I need to put a file in the following directory:
/.well-known/apple-app-site-association
But the issue is, whenever I try to deploy the app on Amplify (it's connected to github repo), it doesn't deploy /public folder.
My Amplify.yml file is as follows:
version: 1.2.9 env: variables: REACT_APP_API_ENDPOINT: https://******.execute-api.ca-central-1.amazonaws.com/staging frontend: phases: preBuild: commands: ['npm ci'] build: commands: ['npm run build'] artifacts: baseDirectory: build files: - '**/*' cache: paths: - 'node_modules/**/*'
I would really appreciate your help here.
contents of public folder are deployed on root folder. So you /.well-known/apple-app-site-association will be available from https://<yourdomian.com>/.well-known/apple-app-site-association
You will have to add custom Rewrites and Redirect in AWS Amplify in AWS Console as the default Rewrite will redirect all request to Index.html for React App to handle
So far I just deployed a React app on Amplify.
And I do not ask in amplify.yml the deployment of the public/ folder. Rather I create a build of my project with a yarn build, which embeds the content of the public folder inside the new build/ folder.
So I hope Ionic does not ask to deploy the public folder on top of build/ folder.
I figured out as well that I needed to configure the URL routes inside rewrite and redirect menu of Amplify whenever my react app makes GET requests like my-domain.com/privacy.pdf.
As long as I did not specify the ".pdf" in the previously existing...
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/> /index.html 200 (Rewrite)`
...rule, the routing was not able to fetch the privacy.pdf file.
I would suggest to look at the file extension of your logo too if the file extension of the sign you try to load is not included in the rewrite rule.
TL;DR
Remove all of your redirects, so it will host the public folder and its contents.
There's no need to redeploy the server. The changes are made on the fly.

Process for React App deployment to Azure Web?

I am currently trying to deploy the default react web app to Azure and I am encountering an issue where though I deploy the contents of my build folder to the azure hosted /site/wwwroot folder I end up on the following page when going to my hosted address: https://[project_name].azurewebsites.net/
Landing Page :
I intend to deploy the default create-react-app react application so that I may have the process down for when I deploy my real site.
The process I have followed is pretty much exactly what is mentioned in this article https://medium.com/#to_pe/deploying-create-react-app-on-microsoft-azure-c0f6686a4321
Create the default React App with create-react-app
Run "npm run build" to get the build folder
Go into the Azure React Portal and create a new Web App ***
FTP / Git deploy the contents of the local build folder into the Azure website's /site/wwwroot/ folder
For overkill I added the below web.config file to handle future routes, but have also tried without this step
In the end my Azure site's contents look like this
Folder contents :
At this point when I try to access the Azure site I get the "Hey, Node developers!" page which implies my code is not deployed. Any thoughts as to why this might be the case?
*** I have a hunch that during the configuring of the Azure Web Api something is not set up correctly perhaps because I select Node 10.14 as my Runtime stack simply because that is the version of Node that I have installed and am using with my local React app.
Thank you folks for your time.
Another approach is to configure Azure Linux Web App Service to run a startup command to serve your React app in "Settings > General settings > Startup Command":
pm2 serve /home/site/wwwroot/ --no-daemon
Remember to change the path to your build path (The path to your index.html file).
If you use react-router and wants to make any direct access on custom routes be handled by index.html you need to add --spa option on the same command.
pm2 serve /home/site/wwwroot/ --no-daemon --spa
Using --spa option pm2 will automatically redirect all queries to the index.html and then react router will do its magic.
You can find more information about it in pm2 documentation: https://pm2.keymetrics.io/docs/usage/pm2-doc-single-page/#serving-spa-redirect-all-to-indexhtml
I've coped with the same problem recently: React router direct links not working on Azure Web App Linux
You have created a Linux App Service - your web.config won't work because there is no IIS.
If you don't select node as the runtime stack, your app will work for the most part because it serves the files like a static web host. However I would suggest to keep the runtime stack as node and add the following file to your deployment in the wwwroot folder:
ecosystem.config.js
module.exports = {
apps: [
{
script: "npx serve -s"
}
]
};
https://burkeknowswords.com/this-is-how-to-easily-deploy-a-static-site-to-azure-96c77f0301ff
There's an extremely simple way to overcome this problem, and although it is not perfect, it works both on AWS, Microsoft Azure, and probably any other hosting:
Just point the error document to: index.html
I found it out here:
https://stackoverflow.com/a/52343542/3231884
Disclaimer: This solution is not perfect and impacts SEO. Google doesn't rank well sites that throw 404s.

React App Hosting - Host Prerequisites

Generic: What kind of services must a hosting vendor provide in order to make it possible to have a React app hosted?
More Specific: If I create a website with React and React Router, is it possible to deploy it by just uploading the bundled output folder? This could be for example a dist folder containing index.html, bundle.js and an images folder.
Could this be as simple as deploying a simple web page (like one built with plain HTML, CSS and JS)?
Sure just do: npm run build
and you will have a folder with the static files. Upload those with your choice of file transfer method and set the permissions to the web host appropriately.
100% Working Example.
React App Hosting in Firebase .
You can read this blog
Host Your React Web App in few minutes.
Command runnning in Wrong sequence =>
firebase login
firbase init
firebase deploy
npm run build
Command runnning in Correct sequence =>
firebase login
firbase init
npm run build
firebase deploy

IBM Cloud (Bluemix) React deploy routing error

I've managed to deploy a react app (create-react-app) to Bluemix using cloud foundry with a sataticfile, everything is working fine except form one thing: routing.
I'm using BrowserRouter to manage routing so when you write the url's path manually I get a 404 error. I know I have to configure the staticfile to use the index.html as default, the question is how to configure this file on bluemix.
My build configuration looks like this:
And my deploy:
For now I've solved it using HashRoute, but that hash is awful and really bad for SEO as I read somewhere here.
I solved it, just create a file called: Staticfile with pushstate: enabled and save it on the public folder. I was saving it on the src folder so, when the react-app was built the Staticfile wasn't on the root directory.

Resources