React JS CI/CD with Azure Devops to Azure App Service

[@bakiwebdev]

wow, you have no idea how much i learn with this single video, you make my day thank you for your work, keep up

[@pzlotorzynski]

Thank you very mauch for this tutorial. With your help I managed to set up Azure DevOps with VS CODE and Azure App Service. Very, very good material. Keep on doing more videos.

[@2ndx]

Thank you very much for this tutorial. I think I learn more here than then I did reading there docs and watching there video.

[@larrevick]

Your tutorials are to the point, concise, time efficient and crips clear!

[@jarosawjusiak6716]

Thank you so much for both parts (this one and setup). It helped a lot to setup an azure pipeline for my react app without learning complete azure course.

[@Dimon333x2]

Thanks for this tutorial!, i was having trouble with the webpack dist folder, your comment on it was exactly my issue.

[@tajnijjar20021]

Amazing. To the point. Great tutorial Mr Billy Tech. Keep up the good work. :)

[@muratasarslan2359]

Thank you Billy. It was very helpful and easy to follow. However, please be so kind to zoom in while you record :)

[@aalekhpradeep6968]

Very useful video. Thank you Sir🙂

[@NasserMaliks]

Love you Man . Really appreciate your work

[@mattmarkus4868]

0:15 I don't see any link in the description. What video covers your app service and repo set up? thanks

[@ben4d85]

You do not need to install create-react-app globally if you use `npx create-react-app`. That's the whole point of using npx instead of npm :)

[@asmabenbrahem6]

thanks a lot for sharing your knowledge with us, the tutorial was very helpful.

[@shantnuagarwal7416]

I come here every few weeks to look back at one thing or another 😂

[@thwaitesvideo]

Legend mate. There is not way I would have managed this from Microsoft's complicated documentation - so many dead-ends you can go down.

[@sivas4861]

Excellent

[@shaneomoore]

What about setting up automated testing?

[@ParmeshwarJadhao]

Simple n great

[@fernon]

Thanks a lot! How do you also run a server (MERN) through Devops?

[@Sellolite]

Awesome tutorial, thank you!

[@dayanr.5950]

you are a live saver

[@dayanr.5950]

@@BillyTech0 bro, I am having a situation, I followed your tutorial, awesome btw, and everything worked, but now when you enter to the url: url.com/section, i get 404, but if you go to url.com and I redirect to you with react router everything goes ok, do you know what is happening? please i need help

[@dayanr.5950]

@@BillyTech0 I tryed that, but didn't work for me, I mean, I followed a couple of tutoriales of how to fix that and didn't worked for me. this is my demo app: futbetinapp.azurewebsites.net/ and there is where I am having the issue

[@kensleylewis7498]

Under NPM install, what if package.json wasn't in your react-app, what if it was just the parent directory itself. just leave that field blank?

[@luanau]

I had to use a .NET core run time stack when creating the azure web app for the new create-react-app app to work!

[@bandarurohithkumar439]

Hay I'm facing a error code 1. I'm not getting what to do.

[@kensleylewis7498]

How did you get all the options displayed under "Agent Pool"? Mine only shows "Default". And what can I do to confirm if Default as node.js installed on it?

[@josegregoriomoyaurpin3949]

Damn, I can only give you one like :(... great job dude

[@jl-dq5ch]

didn't work for me. Tried opening in browser and it sends me to a page that says that service is running and gives me two buttons: Deployment center and Quickstart

[@robbiedevries1939]

That build-prod script though.

[@justintran0411]

Great tutorial. However, did you run into issue with Azure stating "You do not have permission to view this directory or page."

[@riteshprasad2580]

Thanks, this was a great tutorial. However, I am facing an issue. The build and deployment is working(no errors there). But there's nothing reflected on the app url. It simply shows the default content rather than displaying the contents of my react app. Can you please point out possible issues?? Thank yo so much!!

[@bizarrEaster]

I have the exact same problem, I have tried to ssh to the container to change the startup script, but doesn't help, it always point to hostingstart.html

[@luanau]

Use a web app with a .net core run stack. The linux one (nodejs) does not work in this case. This is what I discovered when testing this scenario. I don't yet know why the Linux one does not work.

[@rudeadyet1992]

Hey Billy, thanks for this awesome tutorial. Just wondering if "npm install and npm build" could be done automatically in the Azure DevOps when pushing new changes to the repo, instead of doing those locally?

[@arieheinrich3457]

Yes and its actually a must as the agent you are running on is its own machine. You use NPM task and choose the command. NPM Install to make sure you have the version you need, and the NPM Build to run the build. ANy command you have package .json you can execute as a step in azure devops using the NPM task.

[@theodorn]

Not sure if anyone is reading this, but I followed this tutorial accurately, and my release pipeline is NOT triggered. The build triggered, but not a release from git push. I may be doing something wrong, this is the second tutorial I follow, without being able to git push to a new release.

[@theodorn]

Think I solved the problem, needed to delete the path filter, as I have only one (React TS) app in the folder. Also needed to add the build branch, the same as the build pipeline's default branch (which is named default, I deploy to default, not master). Great tutorial, though a bit hard to follow it, the UI has changed a lot after three years.

[@RK-ss4lf]

Great video. How to add and show test files and code coverage report. How to build pipeline through .yml file? I tried through build from.yml file, throwing errors, anyhelp can be appreciated. thanks

[@BerikAssylbekov]

Great tutorial, but it won't work if you are using routing. For instance www.yoursite.com/user will not navigate.

[@gvsocialmedia2379]

Hi Billy, great tutorial. Thanks for this. Initially I tried with Web App (Linux OS), and failed - then followed Windows Web App, and it works fine. Need a support - for everyone's knowledge - can you share what needs to be changed for Linux Web Apps - for ex: should we add apache?

[@claudit13]

Thanks a lot!

[@kingsadmin]

Nice one !

[@victorafiesimama9221]

You were too fast but I love this video

[@Malcolm777-i]

I still see the default page of web app service -Using linux here

[@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

[@alecmartin5292]

Great video! I had so much trouble with this, but this video made it so clear. I am however having a small issue in that it won't update when I push to my git hub repo. Maybe I am missing something, but I am unable to get the automatic update, nor can I get it to make it manually. It just seems like devops doesn't grab any changes that are made to the git hub repo which is kinda weird. Also seems like I am not the only one with this issue developercommunity.visualstudio.com/content/problem/394970/azure-devops-repo-not-getting-updated.html anyways great video!

[@fernon]

@@BillyTech0 Awesome video! I actually have the same issue. I have valid credentials (which I provided when I imported from github)

[@coordinates_]

I still see the default page of web app service -Using linux here