Deploying React app via FTP to Azure WebApp

0
votes

I followed this tutorial to deploy a react app to and Azure WebApp

https://medium.com/@to_pe/deploying-create-react-app-on-microsoft-azure-c0f6686a4321

After I uploaded the Build folder via FTP, when I access the url i get the following message:

"You do not have permission to view this directory or page."

I tried with and without the web.config file.

Log Presented by the App

I then tried adding this to the web.config file but then it just renders a white page with the correct Page Title. 

<defaultDocument enabled="true">
         <files>
            <add value="build/index.html" />
         </files>
</defaultDocument>

I assume because it can't access the referenced .js files in the index.html.

2
reactjsazureftpazure-web-app-service
Tried adding <directoryBrowse enabled="true" /> to the web.config file. but still renders blank – Vincenz Lachner
You could refer to this article. – Joy Wang-MSFT
Have you see something in index.html in your local build folder? – Joey Cai
When i run it locally I am in fact able to see something. – Vincenz Lachner
Could you show me your index.html content. Because I follow the tutorial you provided and the index did not show anything. – Joey Cai

2 Answers

0
votes

I went to deployment options. Configured my local Git Repository. Configured my local Git. Then inside the build folder ran:

git init
git add .
git commit -m "initial build"
git remote add <azure your-git-clone-url>
git push azure master

And it now runs

0
votes

I've also followed the tutorial that you've tried.

Sometimes it works and sometimes it doesn't work.

Problem

Even after I've restarted my server, the new static content was not reflected to endpoint. (eg. https://my-endpoint.azurewebsites.net)

Or routing is not updated properly with my web.config.

Environment

Solution

  1. Copy and paste all files in build directory into server's webroot directory except web.config

  2. Then, copy and paste web.config

Comment

  • I don't know why Azure not works as my expectation. I've made several Azure Web app for deployment. Whenever I've created new Azure web app, some instance is updated with web.config trigger and other instance is updated with index.html trigger. However, depending on my experience, web.config looks final trigger.
  • If you trouble with some 4xx, 5xx error which is not mentioned in tutorial page from your Web app , just delete web app and create another new one. I also tried to connect DevOps CI/CD pipeline in Azure to Web app. However, after success build and deployment process, my site is not updated and there was no files in directory of server(I checked via FileZilla) After that, direct FTP deployment not working. The only solution for me was deleting it and creating new Web app.
  • I spent my 2-3 days due to this issue. If anybody have advice or right guide or right information about Azure's internal logic for my case, please comment it for saving my few weeks in future.

Web.config

Below is mine from the tutorial

<?xml version="1.0"?>
<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>