2

I'm following this link below on how to deploy React app to App Service Azure. How to deploy React app to App service Azure

However, I couldn't see my application page but the Azure App service default page. "Hey, Node developers!"

Here, I have attached screenshots about the deployment condition and logs. [App service 1App service

Please advise.

enter image description here

enter image description here

enter image description here

David
  • 607
  • 1
  • 6
  • 19
  • @BowmanZhu- Thank you for replying my message. May I know where can I set the default file? The app is running on Linux. – David Mar 27 '20 at 02:24
  • Hi, if you are based on linux, then there is no settings of default file. You need to add a .htaccess in the root directory. And this is the content of the file: `DirectoryIndex yourfilefolder/thedefaultfile`. – Cindy Pau Mar 27 '20 at 05:40
  • This may not completely solve your problem, but if you are based on Linux you must pay attention to this. – Cindy Pau Mar 27 '20 at 05:42
  • @BowmanZhu - I still unclear what you mentioned here. Could you please be more specific on how to create the htaaccess? I tried to google on how to deploy React app to Azure app service, but, no one mentioned that. – David Mar 27 '20 at 05:48
  • Have a look of this blog: https://medium.com/microsoftazure/deploying-create-react-app-as-a-static-site-on-azure-dd1330b215a5 – Cindy Pau Mar 27 '20 at 06:07
  • I have post an answer, that should help you see the application page of your react app. – Cindy Pau Mar 27 '20 at 06:27
  • `.htaccess` is just a file. Just upload it to the physical folder is ok. – Cindy Pau Mar 27 '20 at 06:31

1 Answers1

3

Update:

Another method:

The premise of this method is you have Node.js env and have installed npm tools.

1.add a file name index.js under the site/wwwroot.

index.js:

var express = require('express');
var server = express();
var options = {
index: 'index.html'                                             //Fill path here.
};
server.use('/', express.static('/home/site/wwwroot', options));
server.listen(process.env.PORT);

2.install express:

run this command under the wwwroot directory,

npm install -save express

3.restart your app service and wait for minutes.

Original Answer:

First of all, you can follow this link to know how to deploy your react app to azure.

https://medium.com/microsoftazure/deploying-create-react-app-as-a-static-site-on-azure-dd1330b215a5

All of the files will be upload to D:/site/wwwroot, the physical folder.

Default page setting of the web app based on Linux os is very similar.

enter image description here

For example, I have a file named index.php under public_html folder and I want to set it as the default page of my web app.

You need to create a file named .htaccess under the wwwroot.

This is the content of the .htaccess file:

DirectoryIndex public_html/index.php

Then, Success set the default page:

enter image description here

Cindy Pau
  • 13,085
  • 1
  • 15
  • 27
  • still not solving my issue. – David Mar 27 '20 at 07:01
  • @David Is your problem that the web app didn't display the page you want or something else? – Cindy Pau Mar 27 '20 at 07:03
  • @David Can you show the structure of your web app on azure? – Cindy Pau Mar 27 '20 at 07:05
  • 1
    @BowmanZhu- The App service still showing app service default page, ' Hey, Node developers!" page. Not the index.html. My guess is the app service instance pointing to the HostingStart.html instead of the index.html. – David Mar 27 '20 at 07:06
  • I have posted the folder structure that I deployed onto the app service. – David Mar 27 '20 at 07:08
  • @David If you don't set it, it will indeed point to HostingStart.html. What is the content of your .htaccess file? have you put it to the root folder? – Cindy Pau Mar 27 '20 at 07:12
  • @BowmanZhu- Could you please show me what contents do I need to place into the .htaccess file? – David Mar 27 '20 at 07:15
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/210415/discussion-between-bowmanzhu-and-david). – Cindy Pau Mar 27 '20 at 07:15
  • I have tried the above solution still no luck. Perhaps, someone could advise me on how to set the default document on Linux environment. I've seen many examples all are about Windows environment. – David Mar 27 '20 at 15:17
  • @David I have upload a new way, please have a try of that.:) – Cindy Pau Mar 30 '20 at 04:50
  • 1
    @BowmanZhu- It means a lot to me, let me try on that method and keep you posted. – David Mar 31 '20 at 01:46
  • @BowmanZhu- I have given a try on that alternative method that you shared above. The outcome is still not working. I added an index.js file, as mentioned above, added a PORT(80) setting value in the app service settings. No luck! – David Mar 31 '20 at 01:54
  • @David Sorry David, I haven't been able to help you. These two methods are the methods I have used before. In fact, the method I just updated is the official method, and the first method is often used by myself (because it is simpler, just need to add a file), here is the link: https://learn.microsoft.com/en-us/archive/blogs/waws/things-you-should-know-web-apps-and-linux#set-your-default-document-in-a-nodejs-app-using-javascriptapplies-to-azure-app-service-on-linuxapplies-to-web-app-for-containers – Cindy Pau Mar 31 '20 at 02:03