CODEWITHSUNDEEP
gitazurereactjsreact-router
FacundoGFlores
FacundoGFlores

Reputation: 8118

Deploying on azure with create-react-app

I am using create-react-app for developing my React app. Now I want to publish the bundle on the cloud. So I did:

npm run build

it created a build folder where I initialized a repo:

git init

then added the origin

git remote add origin https://mysiteonazure.com/app.git

finally committed and pushed the files. So I was able to view my app. The problem emerged when I wanted to navigate using URLs, so moving to:

http://mysiteonazure.com/login

did not work.

So I came to the following article Deploying create-react-app on Microsoft Azure

So my build had:

build-azure
|_.git
|_static
|_asset-manifest-json
|_favicon.ico
|_index.html

And now I added web.config

build-azure
|_.git
|_static
|_asset-manifest-json
|_favicon.ico
|_index.html
|_web.config

With:

<?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>

But now when I go to the main page: http://mypage.azurewebsite.net I get:

The page cannot be displayed because an internal server error has occurred.

How can I solve this problem? Or, how can I publish my app correctly?

Upvotes: 3

Views: 3777

Answers (1)

FacundoGFlores
FacundoGFlores

Reputation: 8118

Given the detailed information, the problem was the quotes, I copied the web.config from the given source, and it had other quotes, so the real web.config is:

<?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>

Upvotes: 7

Related Questions