React JS CI/CD with Azure Devops to Azure App Service
HTML-код
- Опубликовано: 16 ноя 2024
- In this video I show you how to create, build, and deploy your react js app to Azure App
Service using Azure Devops.
If you want to support me, I like coffee ☕ ko-fi.com/bill...
Update Video:
• React, Vue, Angular on...
Watch the setup video here:
• Azure App Service & De...
History Mode Routing:
• Video
Azure Devops:
dev.azure.com
Create-React-App:
github.com/fac... 
Наука
Thank you very much for this tutorial. I think I learn more here than then I did reading there docs and watching there video.
Your tutorials are to the point, concise, time efficient and crips clear!
wow, you have no idea how much i learn with this single video, you make my day thank you for your work, keep up
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.
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.
Thanks for this tutorial!, i was having trouble with the webpack dist folder, your comment on it was exactly my issue.
Thank you Billy. It was very helpful and easy to follow. However, please be so kind to zoom in while you record :)
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 :)
Amazing. To the point. Great tutorial Mr Billy Tech. Keep up the good work. :)
Legend mate. There is not way I would have managed this from Microsoft's complicated documentation - so many dead-ends you can go down.
I come here every few weeks to look back at one thing or another 😂
Love you Man . Really appreciate your work
thanks a lot for sharing your knowledge with us, the tutorial was very helpful.
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!
Very useful video. Thank you Sir🙂
That build-prod script though.
Thanks a lot! How do you also run a server (MERN) through Devops?
Excellent
you are a live saver
@@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
@@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
Simple n great
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?
What about setting up automated testing?
Awesome tutorial, thank you!
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?
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.
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.
0:15 I don't see any link in the description. What video covers your app service and repo set up? thanks
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
You were too fast but I love this video
Damn, I can only give you one like :(... great job dude
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!!
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
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.
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?
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?
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.
Nice one !
Hay I'm facing a error code 1. I'm not getting what to do.
Thanks a lot!
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
Great tutorial. However, did you run into issue with Azure stating "You do not have permission to view this directory or page."
Great tutorial, but it won't work if you are using routing. For instance www.yoursite.com/user will not navigate.
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
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!
@@BillyTech0 Awesome video!
I actually have the same issue. I have valid credentials (which I provided when I imported from github)
I still see the default page of web app service -Using linux here
I still see the default page of web app service -Using linux here