Azure App Service Deploy does not deploy web app successfully

Question

I am a newbie to React

I created a node app service in the Azure Portal using the Node JS Empty web App Starter web app.

When I go to the URL I see

Hello, world!

Which I note is in the contents of server.js

var http = require('http');

http.createServer(function (req, res) {

    res.writeHead(200, { 'Content-Type': 'text/html' });
    res.end('Hello, world!');

}).listen(process.env.PORT || 8080);

I see that web.config refers to server.js

<configuration>
    <system.webServer>

  <handlers>
            <!-- indicates that the app.js file is a node.js application to be handled by the iisnode module -->
            <add name="iisnode" path="server.js" verb="*" modules="iisnode" />
        </handlers>

        <rewrite>
            <rules>
                <!-- Don't interfere with requests for logs -->
                <rule name="LogFile" patternSyntax="ECMAScript" stopProcessing="true">
                    <match url="^[a-zA-Z0-9_\-]+\.js\.logs\/\d+\.txt$" />
                </rule>

                <!-- Don't interfere with requests for node-inspector debugging -->
                <rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">                    
                    <match url="^server.js\/debug[\/]?" />
                </rule>

                <!-- First we consider whether the incoming URL matches a physical file in the /public folder -->
                <rule name="StaticContent">
                    <action type="Rewrite" url="public{REQUEST_URI}" />
                </rule>

                <!-- All other URLs are mapped to the Node.js application entry point -->
                <rule name="DynamicContent">
                    <conditions>
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True" />
                    </conditions>
                    <action type="Rewrite" url="server.js" />
                </rule>
            </rules>
        </rewrite>

    </system.webServer>
</configuration>

When I deploy my static react website files to the site, I can see the files are there but the web site itself does not change when I go to the URL.

I think what I need is for the website to start src\app.js instead of server.js

How do I do that?

I tried replacing server.js with ./src/App.js but then the App.js just displays as text.

https://medium.com/microsoftazure/deploying-create-react-app-as-a-static-site-on-azure-dd1330b215a5 — Kirsten, Oct 27 '18 at 05:20
https://stackoverflow.com/questions/36002413/conventions-for-app-js-index-js-and-server-js-in-node-js — Kirsten, Oct 27 '18 at 05:54

score 0 · Accepted Answer · answered Oct 27 '18 at 19:24

This Burke Holland shows how to set up the pipeline ( near the bottom) And also links to this article by Tony Patrina that shows how to set up web.config.

As follows;

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

Azure App Service Deploy does not deploy web app successfully

1 Answers1