Deploying React apps to Azure Web App with Azure DevOps

[@damianusdeni1449]

Concise, clear and great explanation. Only following this tutorial, I managed to deploy my application without opening stack overflow or other forum sites. This is my first deployment using azure.

[@TechiesLounge]

Glad it helped. Thanks for your support.

[@poojanpatel6885]

Self-explanatory ! A perfect video for freshers in Azure Devops . Thank you!

[@jl-dq5ch]

This guy rocks! Even going through the Microsoft blog post on this and multiple vids left me in the dark but now I can see the issue was with where the build file is and how to go about pointing to it. Lifesaver buddy. Thanks!

[@TechiesLounge]

Glad I could help you.

[@k3agan]

That's what tripped me up as well 😂

[@family.vibes.unleashed]

Simple and precise tutorial. A perfect video for a beginner who wants to experience their first hands-on! Thank you so much!

[@TechiesLounge]

Glad you enjoyed it!

[@nathennk474]

Best Tutorial Ever, Really straight forward and easy to follow. Much appreciated !

[@TechiesLounge]

Glad you think so ! Really appreciate your support.

[@techbrother5815]

The is the best. Quick and precise.

[@whatwouldjesusdrive]

Thanks, this video was very helpful, everything worked first time for me on a project I made using create-react-app, but then I made another that used Vite instead. Everything was the same except I got an error that the publish artifact: drop step couldn't find the path to publish "build", after a while i realized Vite doesn't name the build folder "build" it names it "dist". So on the Publish Artifact: Drop > Path to Publish > i entered "dist" instead and it worked

[@3litepker]

Nice story

[@joshuaoloton2468]

You're a lifesaver

[@julfinch]

Thank you so much for this one. So easy to follow and no BS. Subscribed!

[@hareshkumar7703]

He is an absolute great tutor

[@TechiesLounge]

Glad you think so..

[@jaideepsingh8109]

Great tutorial. Straight to point. Thanks

[@malakali-kx3uy]

🎉🎉 you are really super ,Thank you

[@febithomas9115]

Good information for techies 👍

[@sruthimystic1834]

Thank you very much. Your tutorial saved my day

[@toulchinski]

Very Cool! Greay tutorial! Thank you! 🙏

[@abhishekaryan7575]

very very helpful, you saved my day. Thanks great work

[@TechiesLounge]

Glad it helped!

[@chaosknight3175]

This is done the right way. Thanks man!

[@anandhu5082]

why do we select Runtime stack ASP.NET? instead of Node JS @6:30

[@TechiesLounge]

Runtime Stack: Select the platform or framework you used to create and run your web app. When we are deploying a React application , we just need a web server which renders the ReactJS code to the client side browser and browser executes the ReactJS code. So we can use any web server to deploy a FrontEnd applications.

[@anandhu5082]

@@TechiesLounge sorry, actually that was exactly why I asked that question, we created react app using NodeJS right?.. so the runtime stack should be NodeJS right? why asp.net??

[@TechiesLounge]

Hi @@anandhu5082, We are not using NodeJS to create the ReactJS application, instead we are using NPM (Node Package Manager) to create the ReactJS application. But Once we create the release files using NPM RUN BUILD, there is no dependency with NPM as well and it will be a pure ReactJS application with HTMLs, Javascript and CSS.

[@anandhu5082]

@@TechiesLounge perfect thankyou!.

[@rickybailey6157]

Great video. Got me a lot further than other instructions, but I have an issue I just can't get past. Just as the video has at 5:05, I have the build artifacts 'drop' folder containing files (but not a zip file). It's at 10:02, with the release, where things differ. In my log, the next line after "Got service connection details for Azure App Service:'testmyreact'", I get the line "Package deployment using ZIP Deploy initiated." I don't have the references to WEBSITE_RUN_FROM..... And it definitely doesn't go to "Successfully deployed web package to App Service". Instead it has "Preparing deployment...", references to oryx build, and eventually "Detecting platforms...", "Could not detect any platform in the source directory.", "Error: Couldn't detect a version for the platform 'nodejs' in the repo.". A few other errors that eventually leads to "##[error]Error: Package deployment using ZIP Deploy failed. Refer logs for more details". I've been researching this for a few days without luck. I'm guessing I'm missing something simple. Any ideas out there?

[@anilashivasankaran6402]

Good presentation..👍

[@TechiesLounge]

Thank you 🙂

[@harithathalapaneni9990]

Is it possible to trigger the aab and ipa files using the Titanium application. I don't see an option for custom apps.

[@chityalasrikanth8030]

That was clean and neat explanation.

[@emmanuelbamidele5064]

i did the same thing and i am still seeing the default page when i browse to the azurewebsite

[@christopherskogfeldt8831]

Is it possible to change the config from let´s say if I use Maven but I suppose to use React instead. Is that possible or do I need to create a total new project and do everything from the beginning again?

[@TranHoang-tj7rb]

sorry sir ! where can I put variable in .env?

[@oluwakemidada9239]

You are the best. Thank you!

[@TechiesLounge]

Glad you think so !!

[@ajaysh73]

Can you do a video on next js deployment on Azure with a local agent as MS doesn't provide free parallism. I'm getting an internal error after following all the steps.

[@uttamchaturvedi]

Thanks for sharing.. While building react pipeline, I am getting this warning ##[warning]Directory '/home/vsts/work/1/a' is empty. Nothing will be added to build artifact 'drop'. This causing my release pipeline to fail.

[@TechiesLounge]

This must be because of the folder structure difference in your project. Where exactly your project.json file present? Open your Azure Repository and check your folder structure and see if it is different at the 2:20 minutes in this video? If your package.json folder is inside any folder (which is different from this video), go to the video 3:27 minutes where you are setting up the "npm install" job and select the 3 dots after the "working folder that contains the package.json" and choose the right folder where your package.json file present. Same action required for "npm build" job as well. If you are still getting this error you can send me the screenshots to my mail id "[e-mail]" and I am happy to help you. Please message if this issue resolved.

[@jinhe620]

you saved my life man!!!!!

[@TechiesLounge]

Glad it helped!

[@bhavya5759]

please create video on Build once Deploy Many with ReactJs and Azure with different environment

[@trustlang_ua]

what about react-router-dom? If I have a few routes do I need to make additional steps?

[@Milpatel11]

you need to add web.config file in your public folder checkout stack overflow someone has posted the answer what to write in that file

[@uaena182]

Thanks for this. However when I successfully deployed my react app on Azure App service via Azure DevOps, I get the error "The service is unavailable" on a white screen upon accessing the Azure URL. Kindly advise. thanks

[@adedolapookunsanmi6152]

Hi, Also wondering how we can pass enviroment variables using this step.

[@Joelpyro]

hey, I've been getting a warning and immediately after that an error... the only message for the warning and error I get is "Couldn't find a debug log in the cache or working directory" I've been following your tutorial step by step but I got stuck in the pipelines... not that I have done anything wrong, but I think there's a setting required maybe? Does it have to do that I am doing this on a Mac computer?

[@TechiesLounge]

This must be because of the folder structure difference in your project. Where exactly your project.json file present? Open your Azure Repository and check your folder structure and see if it is different at the 2:20 minutes in this video? If your package.json folder is inside any folder (which is different from this video), go to the video 3:27 minutes where you are setting up the "npm install" job and select the 3 dots after the "working folder that contains the package.json" and choose the right folder where your package.json file present. Same action required for "npm build" job as well. If you are still getting this error you can send me the screenshots to my mail id "[e-mail]" and I am happy to help you. Please message if this issue resolved.

[@Joelpyro]

@@TechiesLounge Thank you for how quickly you replied. You were right about the folder structure. Azure doesn't allow empty folders so what I did is I created the deployment folder myself and then added and empty file. After that I changed the directory address in the pipeline settings. The deployment process works fine now. However, I have a new issue. When I follow the url of my web app I get this "You do not have permission to view this directory or page." Any ideas how I can solve this issue? Thanks again for all your help!

[@TechiesLounge]

@@Joelpyro because of the folder structure change, the website also might have added some additional folder in the URL. What you can do is, go to the Azure portal and open then the Kudu tool from the Web app and see where exactly the files are deployed. One on my another video I have mentioned how to deploy using Kudu admin tool. Seeing that you can understand how to see the folder structure once after you deployed using Azure DevOps. Please share me the screenshots to my mail id if the issue still persists. You can refer this URL kzbin.info/www/bejne/aaipamydq6d5mdk To resolve the folder structure issue, you can make changes in the Publish Artifacts Task and remove the additIonal folder if it is adding.

[@Joelpyro]

@@TechiesLounge I finally found the problem. It seems that the building process goes through, but no files are created in the directory I pointed. When I look inside the "drop" folder, there's nothing there. So even though the building process is completed, the files are not in the "drop" folder, and I have no idea where they are.

[@lucasmunoz4861]

Does this work for next js?

[@shrutibramhankar5902]

Not a git repository (or any of the parent directories): .git how to resolve this

[@carlossiles5609]

This is a great video! I followed every step, the drop was created and in the Development Center I see a message "Deployed Successfully to production", but for some reason is not updating production. Any ideas?

[@TechiesLounge]

If the Drop folder is having the proper build files, the issue must be with the deployment part or App settings. As a first step, you can check it out the deployed folder in Azure Web App has the right files. For that you can use the Admin tool Kudu. This tool will allow you to see the folder structure where you deployed in Azure. You can refer this Video to understand how to connect and see the folder structure using Kudu or FileZilla. kzbin.info/www/bejne/aaipamydq6d5mdk . If the deployed folder has all the files, then the issue must be with your Web app setup Or can be because of some extra folders added in the deployed location (This can be because of your folder structure you are using in the source code). In that case you have to either remove that folder in the Drop folder or access the website with the extra folder in the URL. Let me know if this resolved your issues. Else we will dig into details..

[@angrishdeepty]

@Techies Lounge I got a warning "Directory 'D:\a\1\a' is empty. Nothing will be added to build artifact 'drop'. but build pipeline got succeeded. Please suggest. Many thanks.

[@TechiesLounge]

This must be because of the folder structure difference in your project. Where exactly your project.json file present? Open your Azure Repository and check your folder structure and see if it is different at the 2:20 minutes in this video? If your package.json folder is inside any folder (which is different from this video), go to the video 3:27 minutes where you are setting up the "npm install" job and select the 3 dots after the "working folder that contains the package.json" and choose the right folder where your package.json file present. Same action required for "npm build" job as well. If you are still getting this error you can send me the screenshots to my mail id "[e-mail]" and I am happy to help you. Please message if this issue resolved.

[@damonwu9658]

Good one 👍

[@DhanyasHomeKitchen]

Good video

[@TechiesLounge]

Thanks

[@ap_nerd]

Thank you for such a great video, are you planning to make any video on ASP.NET core as backend API and React as a frontend to deploy on the server?

[@TechiesLounge]

Sure

[@rasplili129]

Everything up-to-date Branch 'master' set up to track remote branch 'master' from 'origin'. But your project is emty

[@vivekmurli5137]

Appreciate the video !! I have been trying to deploy nextjs app to Azure DevOps and experiencing challenges at the time of publishing artifacts. While adding The Publish Artifact to the pipeline , I entered build under under Path to Publish and got the error "Publishing build artifacts failed with an error: Not found PathtoPublish: D:\a\1\s\build" I also replaced build with next and got the same error Can you please suggest what needs to be entered under "Path to publish"? Any help would be appreciated

[@ludovicbenard8679]

I have the same error

[@vivekmurli5137]

@@ludovicbenard8679 I managed to fix it with the help of the article parveensingh.com/next-js-deployment-on-azure-app-service/

[@TechiesLounge]

Hi Vivek Murli, issue is because your "Publish build artifacts" task (3rd Task) is not able to locate the "build" folder. This must be because, your package.json may not be on the root folder ! Suppose your package.json file is under a different folder eg. "Sample/package.json", you have to do the following two steps : 1) In the Build pipeline, 2nd Task ie. "npm build" -> "Working folder that contains package.json" field you should mention "Sample" 2) in the Build pipeline, 3rd Task ie "Publish build artifacts" -> "Path to publish" field you can mention "Sample\build" This should resolve your problem. Let me know if the error still not resolved!

[@TechiesLounge]

Hi @@ludovicbenard8679, issue is because your "Publish build artifacts" task (3rd Task) is not able to locate the "build" folder. This must be because, your package.json may not be on the root folder ! Suppose your package.json file is under a different folder eg. "Sample/package.json", you have to do the following two steps : 1) In the Build pipeline, 2nd Task ie. "npm build" -> "Working folder that contains package.json" field you should mention "Sample" 2) in the Build pipeline, 3rd Task ie "Publish build artifacts" -> "Path to publish" field you can mention "Sample\build" This should resolve your problem. Let me know if the error still not resolved!

[@emanuelsuarez7002]

extremely useful!!! thanks for sharing. what if i want to add a second member to deploy form his computer?

[@emanuelsuarez7002]

i want to deploy to the same app from another account

[@ludovicbenard8679]

Hi, thanks for the video. Is it the same process with a GRANDstack app ? (GrapQL, React, Apollo, Neo4j Database)

[@TechiesLounge]

Yes. But the Pipeline Tasks you choose to install and build may be different for other project types like GrapQL, .NET etc.

[@RohitSaini-go3cr]

Thank you very much.

[@TechiesLounge]

Glad you enjoyed it ! Really appreciate your support.

[@iisrrael1993]

Excelente

[@MaziSaidSo]

beautiful

[@dekcode2824]

This should be the default Azure documentation

[@anoop.225]

Getting below error, How to fix ? 32 error code EBADPLATFORM 33 error notsup Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) 34 error notsup Valid OS: darwin 34 error notsup Valid Arch: any 34 error notsup Actual OS: win32 34 error notsup Actual Arch: x64

[@ZeusGroup]

Don't think it is simple. But nice tutorial!

[@TechiesLounge]

It is simple.. watch two more times and everything will be clear for you !

[@pottanatgeorge]

my react build now needs to say, "run-script build " be aware.

[@FullStackPro]

Thank you ❤️