CODEWITHSUNDEEP
azureazure-web-app-service
mightycode Newton
mightycode Newton

Reputation: 3949

How to deploy react native for web app to azure environment?

I try to deploy a Azure react native for web app to the Azure environment.

So I created a web app in azure. And I am using a ftp program for uploading the files.

The address of the remote server is:

ftps://waws-prod-am2-781.ftp.azurewebsites.windows.net/site/wwwroot

But now comes the strange thing. I deleted in the www root folder of the remote site the standard html file(hostingstart.html). And I uploaded the files from the created web-build react folder on my local host to the remote host to the wwwroot folder.

But if I go the the URL of the remote server: ```https://dierenwelzijnapp.azurewebsites.net````

I still see the text:

Hey, Python developers!
Your app service is up and running.
Time to take the next step and deploy your code.
Have your code ready?
Use deployment center to get code published from your client or setup continuous deployment.

How is this even possible? Because I deleted the file hostingstart.html.

And even when I go to

https://dierenwelzijnapp.scm.azurewebsites.net/newui/fileManager#

I see filemanager --> site --> wwwroot with all the files and folders.

Question: In which directory from the remote site I have to upload the files?

Upvotes: 3

Views: 895

Answers (1)

SiddheshDesai
SiddheshDesai

Reputation: 8195

Updated with react native:-

I created one expo react-native app and then built it with expo build:web command and deployed web-build folder in my Azure Web App Windows OS based app. As React-native requires different folder structure in Linux based OS. It is recommended to use Windows OS:-

My Azure Web App:-

enter image description here

Transferred the contents of web-build folder and not the entire web-build folder via FTP like below:-

enter image description here

enter image description here

The Web app runs successfully:-

enter image description here

With React App:-

Make sure you are Deploying build folder in your Azure Web app like below:-

After I created one sample react App locally, I created a build folder that is a deployable Folder for my Azure Web app and uploaded the build folder content to my Azure Web App.

Command:-

npm run build

After running npm build, build folder is created:-

enter image description here

In your Azure Web App Deployment Center > Visit FTP Credentials and connect to your Azure Web App remote server via Filezilla or WinScp FTP tool :-

enter image description here

Make sure Basic Auth is set to On and FTP only setting is enabled:-

enter image description here

My Web app is created on Runtime - Node 18 as React works better with Node rather than Python and I am using ***Windows OS:***-

enter image description here

My Filezilla setting:-

enter image description here

My React App got loaded successfully after copying the contents:-

enter image description here

My Web App > Kudu>

enter image description here

Upvotes: 1

Related Questions