Here is a link to the Azure DevOps project - This should give access to the source code and the pipeline setup. Drop a comment in case you need any help! rahulpnath.visualstudio.com/build-deploy
@@RahulNath ##[error]Error: ENOENT: no such file or directory, stat '/home/vsts/work/1/s/src/build' ##[error]ENOENT: no such file or directory, stat '/home/vsts/work/1/s/src/build'
There should be a option in TH-cam to like the video multiple times. I would have like it at least 100 times. You just saved weeks effort for me to set up the all this. You are awesome. Please continue the good work.
I like that in all the videos of yours that I've watched, you don't start with a half-baked solution, you actually start with nothing. There were some Azure artefacts in this one you had created earlier, but I'm guessing you have a previous video for all that stuff. It's really nice to have a repeatable process from scratch. You're doing a great job with these videos.
Thank you again Steve for your support. Which artefacts were created earlier? I set up from a blank create react app and set up the pipeline end to end in this. There are a few other follow up videos though that build up on this video. Happy to clarify if you could point me the artefact you are referring to.
I m quite impressed at most of your content and how you find way to present them in an easy to understand. Oh and it helps tremendously that you don’t have such a heavy Indian accent which most of the other same background TH-camrs will be struggled with followers ! And most of all you chose Aussie land as the place to be!
Thank you Vinh! Very happy to hear this especially because you find the content easy to understand and well introduced. This is something I spend a lot of time and try hard when I make new content. Do let me know if you have any specific topic suggestions.
Hi Rahul, amazing video very concise to the point. I have one questions. Is it possible to add build or release number to somewhere to release react web.
Glad it helped and thank you for the feedback. I will add it to my list of videos, but can't guarantee when I will be able to do it. Will let know back here once I publish.
@@RahulNath , Sure no worries. I am missing this exact connection between Azure DevOps (CI/CD) and Azure App Service. Appreciate your response, Thanks!
Yes there are ways to achieve this. Easiest might be to replicate the same folder structure in your build package and deploy the whole package, so that it will maintain the folder structure. Can you elaborate on what you are trying to achieve here by deploying to a specific folder within wwwroot?
Awesome video Rahul . one question how to use build artifacts in ymal. I saw you just picked from the location but same I have to do in ymal any help please..?
hey Gaurav, glad you liked it. Can you point to me the video location that you are referring to, might help to understand better what you are looking for.
@@RahulNath these is respect to release pipeline its start from 7.24 when you are adding artifacts from source type. _build-deploy I want the same process in the ymal file. I have release pipeline where I'm consuming two artifacts in Devops UI it pretty straightforward just like you explained the video but I have to migrate my release pipeline to ymal file and here I'm stuck wondering what is the correct syntax. resources: pipelines: - pipeline: _ABCpipeline project: test servicing source: PackageInfrastructure
@@gauravjoshi5054 Does this doc help? docs.microsoft.com/en-us/azure/devops/pipelines/yaml-schema?view=azure-devops&tabs=schema%2Cparameter-schema#resources&WT.mc_id=AZ-MVP-5003875 One way I have found easy is to manually define this on a sample pipeline and export it to YAML to check for the syntax. Let know if that helps you
I have a video here covering setting up tests in the pipeline. I cover npm test as well th-cam.com/video/FFxww1-M25E/w-d-xo.html Kindly let me know if you have additional questions
Glad you like them - I’ve a few in my series th-cam.com/play/PL59L9XrzUa-m7AFDgjWuwm6exyCklc03U.html that shows SPA template , with webjobs etc. Let me know if that helps
Wow thanks. I am an M&E specialist and I am thinking developing data collection app to collect field data and power it on Power BI using the Azure server. Is this doable and tips on how to go about it. Thanks
Thank you Jonah. That is a very broad question. I am sure it is doable. Is there anything in particular that you are stuck with or need help? Suggest breaking it down into smaller parts and handling itone by one if you are new to it.
Thanks Prasad and glad you liked it. For creating the release only, you can turn the trigger on the stage to be manual only. I show that in this video here - th-cam.com/video/eGcosoC43vI/w-d-xo.html You can also read about it here -docs.microsoft.com/en-us/azure/devops/pipelines/release/triggers?view=azure-devops#stage-triggers Let know if that helps
Thanks Rahul for your wonderful explanation. I have created a release pipeline which is used to deploy package in ten web servers. All servers are added in a deployment group. I want to restart application polls of all servers after IIS Web App Deploy step. How I can configure that? (From IIS Web App Manage under the section Additional appcmd.exe commands, I can write app pool recycle command to do that. But I want to do it after IIS Web App Deploy step)
Glad you like it. Are you looking to deploy to a Virtual Machine? You can check out this video where I show how to do that. th-cam.com/video/uSEx5QiuOCw/w-d-xo.html . You can also use the IIS Web App Deploy task if that is what you are looking for - docs.microsoft.com/en-us/azure/devops/pipelines/tasks/deploy/iis-web-app-deployment-on-machine-group?view=azure-devops. Let know if you have further questions.
@@RahulNath I'm looking to deploy to a IIS in a VPS but not an asp.net application. I'm looking to deploy a react application. I do a CI correctly but in CD only have to deploy a React App to Azure.
Hi Rahul, Thank you for your good content! I am facing an issue with the build artifacts after the build has been completed: ##[error]Error: ENOENT: no such file or directory, stat '/home/vsts/work/1/s/src/build' I've double checked and tried different alternatives for build folder, but as suggested I've used same variable paths Any suggestions?
Hello very nice explanation, I followed your steps but still getting the following error. can U pls help? ##[error]Error: ENOENT: no such file or directory, stat '/home/vsts/work/1/s/src/build'
Thanks for the really helpful video and subbed! I've started learning Azure DevOps for my small React & .Net project and been trying to figure how to setup azure-pipelines.yml to automate pipelines without clicking things in portal eg. environments. Would be helpful if you can go deeper with multi branch, environments and things you can do with azure-pipelines.yml for automation and IaC perspective :).
Glad it helped and thank you for the feedback! The yml files lives as part of the repository and can be authored directly in your code editor. I will do a video showing this and link back here once done. Did you have anything in particular in mind around 'multi branch, environments' ? I talk about release and release management in the DevOps variables video here (th-cam.com/video/OFr6Vkw0mq8/w-d-xo.html)
@@RahulNath Was thinking of learning so that I have Prod & Test + own local Dev branches which separately push to the own Prod/Test pipelines. Then to release pipeline which pushes to heroku in docker containers. Hopefully as much as I can in azure-pipelines.yaml to use same type of environment in future projects. Slow process, but making lot of mistakes and trying again :) Thanks for the input. I will check that video
Just published a follow up video on using ARM templates to automatically create infrastrcuture . Thought it might be of help to you. Check it out here - th-cam.com/video/3IRwtbGlshk/w-d-xo.html
Hey there thanks for this tutorial. I just saw you didn't add Startup Command in the Azure portal like 'npx serve -s' but in my case without this command, the app doesn't run so how the app is running without it?
It's because this was on a windows machine. I talk about this in a follow up video on Linux th-cam.com/video/HLhlKIIfaZs/w-d-xo.html&ab_channel=RahulNath
Good catch! I might have fixed that typo after that and fixed it in editing 😀 The full pipeline is here rahulpnath.visualstudio.com/_git/build-deploy?path=/azure-pipelines.yml Let me know if that helps.
Hi Rahul, Great tutorial, impressive details. Just a quick question: if I use a Web App with Linux OS - what additional information should I configure to run react js web app.
Thank you for raising this question. On an Azure Web App on Linux, additionally, we might need to set up the host server using express (as an example). I will do a follow-up video on this and post a link here.
@@gvsocialmedia2379 Here's a follow-up video on configuring it on Azure Web App on Linux. th-cam.com/video/HLhlKIIfaZs/w-d-xo.html Let me know if that helps.
Thank you and glad you liked it. I might do a ASP NET Core with React SPA app deployed to AKS. Did you have anything specific to be convered as part of it?
@@RahulNath @Rahul Nath Thank you for asking, It would be nice if you can cover ingress controller and shipping logs from pods. Use case something like Front end web app hosted in a pod will communicate with api management service (api hosted in another pod) . DNS --> INGRESS1? --> SERVICE1 -->POD1(WebFE) --> DNS --> APIM --> INGRESS2? --> SERVICE2 --> POD2(API)
Thank you for your detailed reply. Not sure if this is directly related to a build/deploy pipeline for AKS. Not sure if I will be doing specific to this any time soon. However I will be doing a AKS related video soon. Thanks again for your reply!
Hey Rahul, thanks for the tutorial. Just wondering if I have to set up web.config to enable azure web app service to look for index.js when using react-router?
Thanks, Sarthak for your comment and sorry for the delay in response. Yes, you are correct when using react-router you need to add a web.config fine to rewrite the server URL's. All the routes that apply to your front end must be redirected to Index.html file so that the root page will be loaded and then react-router will then handle the routes. For more details please check the related blog post here - www.rahulpnath.com/blog/create_react_app_devops/#frontend-routing Kindly let know if that helps!
HI Rahul, Must say its a very well articulated tutorial. But I am struggling on the deployment. I am able to finish properly everything but even though the deployment is saying all successful my react app is not running I am still getting the old MS startup page. Any idea or help please would be greatly appreciated. Please note, I tried webapp on Linux.
Thank you and glad you found it helpful. With Linux WebApp you need to set up the server yourself. Unlike the windows web app where it is hosted on IIS by default. I have a video that talks on how to set it up on a Linux Web App - th-cam.com/video/HLhlKIIfaZs/w-d-xo.html Let know if that solves your issue.
my deployment is successful , but i could only see azure default page like below, any help would be appreciated. Hey, Node developers! Your app service is up and running. Time to take the next step and deploy your code.
@@marcfernandez6132 Are you referring to TFS source control? Sure that it should be possible there as well, as long as you use the appropriate task and commands. I have not used one for a long time, so I can't be of much help there.
how do you manage to keep the build folder inside the src directory, i am getting ENOENT: no such file or directory, stat '/home/vsts/work/1/s/src/build'
@@manaspal5 Suggest looking at the build logs and see what directories are getting created and the one that is failing. Most like some issue in the way the directories are set up.
Where does ZIP deploy actually copy the files in drop/1.zip to? Typically when I use ftp to manually copy the build directory to the server, I would copy the files into wwwroot. The release is successful but I don't see the files in wwwroot. Also when I goto the server url I get this error -> Not authorized to view. Thanks so much!
What server/cloud are you deploying to? Looks like you do not have access to view the files in there with the not authorized error. Checking the logs to make sure the files are also getting deployed is a good start. Hope you were able to resolve the issue
You can run an old release if that is what you want to redeploy. If you have code/variable changes etc and want to create a new release then yes you need to make a new deployment. Let me know if you have additional questions.
Did you mean to say without using a web API? Then yes that is correct - this is a plain create react app. It still uses a server, in this case the IIS server since it is deployed to Azure Web App running on windows. For similar one using Single Page Application template check out this video th-cam.com/video/SYhufaLn51w/w-d-xo.html
@@vamsikrishna2241 it does deploy to an azure web app already created in azure manually at around 8:00 . Check my ARM templates video if you want to learn to automate resource creation
Nice tutorial !!! btw, FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory 2020-01-08T06:28:33.4169516Z 1: 0x8fb090 node::Abort() [/opt/hostedtoolcache/node/10.24.1/x64/bin/node] Did you come across this issue while running the build pipeline??
No haven't come across this issue. A quick search gave me this stackoverflow.com/questions/53230823/fatal-error-ineffective-mark-compacts-near-heap-limit-allocation-failed-javas Is it because of the node version?
@@RahulNath Thanks for reply, I think it is related to some space allocation restrictions of the instance tried "--max-old-space-size=2048" in package.json of react app , but still sometimes job fails.
Hey Thank you for this tutorial. I deployed my app successfully but I get permission Error (You do not have permission to view this directory or page.) as I click on Url. Any thought why I'm getting this?
@@RahulNath hey Rahul ;) yes I can see the app in azure portal deployed successfully. And I created one linux service plan in and chose php for stack and a windows service plan with Net core 3.1 . I'm getting the same error with both configurations!
@@RahulNath I created a stack-overflow question. here you cans see the screenshot of the error I get. stackoverflow.com/questions/61944844/deploying-react-app-with-custom-web-pack-configuration-to-azure
Sorry missed replying to this. Were you able to solve it? Does it work locally using the build output and serving it from the public folder? Looks like this is something to do with your custom configurations and not do with the pipeline itself.
The Azure Web App does the hosting for you, so you need to deploy the required files to that server. Hence we do the build to output the package and then host it on Azure Web App. Azure DevOps is doing the build and deploy in this case. Let know if that answers your question
@@RahulNath What I need to do is just run the develop environment on Azure, like we do it locally. Without building. So gow to push the code to Azure then launch "npm run develop" and get a public url for the development env. Just like what happens on Gatsby Cloud.
Haven't tried that Ramiro. Are you facing any issues? Overall it would be same I guess, except for any script changes that might need to be done for react native.
hi I have followed your video everything working but the web page didn't come up. the web page showing "the service is not available" and http error 503" please give me a solution two days I am trying but didn't get any solution. I am hardly requesting the solution for that thanks
If you have this working on your local machine, make sure you are using the correct Node version in the build pipeline too. Use should be able to set the Node version using a task.
You do not have permission to view this directory or page. After Successfully deploying, when I open the link I'm getting above message, eventhough I'm the owner of my azure account
Awesome! Rahul, I`m going to use this video to publish a private website and add a reference to this video to show my appreciation. If you would like me to add more information about you - please add me on the LinkedIn (Anton V*****) and we can discuss it
@@RahulNath I`ve tried to do the but for the typescript template (npx create-react-app app-name --template typescript) The CI/CD is working but nothing was deployed. Message on the website (avgustpol-react-timer.azurewebsites.net) : "Hey, Node developers! Your app service is up and running. Time to take the next step and deploy your code. " Does add typescript makes big difference? Can you suggest something in this case?
@Антон Looks like you are hosting on a Web App running on Linux. There are a few more settings that need to be done for that which I show here th-cam.com/video/HLhlKIIfaZs/w-d-xo.html Let know if that helps.
@@RahulNath thanks ! I will try to deploy it to the Linux But I`ve tried to do the same for the create-react-app command (exacts steps, like in your video) and still have the same page (react app deployed without content) :c Any suggestions from your side? 👉🏻👈🏻
![ILLSLICK - KILLSHOT REMIX [FULL VERSION]](http://i.ytimg.com/vi/RIK8RrqIAzE/mqdefault.jpg)
Here is a link to the Azure DevOps project - This should give access to the source code and the pipeline setup. Drop a comment in case you need any help!
rahulpnath.visualstudio.com/build-deploy
Hello Rahul
I am getting error message while npm run build "##[error]Error: Npm failed with return code: 1
", please help.
@@vipuldiwan Do you have more details on the error? It should either be in the log or in the console. Any screenshot?
@@RahulNath ##[error]Error: ENOENT: no such file or directory, stat '/home/vsts/work/1/s/src/build'
##[error]ENOENT: no such file or directory, stat '/home/vsts/work/1/s/src/build'
I LOVE when devs include mistakes and bugs in their videos and show the process on how to fix. Real life stuff, thank you.
Glad you found this helpful!!
There should be a option in TH-cam to like the video multiple times. I would have like it at least 100 times. You just saved weeks effort for me to set up the all this. You are awesome. Please continue the good work.
Wow, thanks Yuvraj! This comment has made my day! 🙂
I like that in all the videos of yours that I've watched, you don't start with a half-baked solution, you actually start with nothing. There were some Azure artefacts in this one you had created earlier, but I'm guessing you have a previous video for all that stuff. It's really nice to have a repeatable process from scratch. You're doing a great job with these videos.
Thank you again Steve for your support. Which artefacts were created earlier? I set up from a blank create react app and set up the pipeline end to end in this. There are a few other follow up videos though that build up on this video. Happy to clarify if you could point me the artefact you are referring to.
You saved my day, I was trying to do this from past 2 days and today I got his done in just 4 hours. You have a new follower now.
Great to know that Suhasini nd thank you!
Great video - very clear and concise and a great intro to MS's platform for CI and CD. Thank you!
Thank you for you comment and Glad it was helpful!
I m quite impressed at most of your content and how you find way to present them in an easy to understand. Oh and it helps tremendously that you don’t have such a heavy Indian accent which most of the other same background TH-camrs will be struggled with followers ! And most of all you chose Aussie land as the place to be!
Thank you Vinh! Very happy to hear this especially because you find the content easy to understand and well introduced. This is something I spend a lot of time and try hard when I make new content. Do let me know if you have any specific topic suggestions.
Rahul, you did a really great job on this tutorial!
Thank you Marty!! You can check out the full devops series here bit.ly/azure-devops-series
Excellent job Rahul, clear and straight to the point. thanks.
Thank you and glad you liked it!
gracias amigo sos un crack hace tiempo buscaba esto, capoooooo
Pretty sure that means good (double checked with google translate). Glad it helped and thanks for the comment!
This is an awesome video. I had trouble with doing this before I saw your video. Keep the videos up!
Thank you and happy it helped 😀
Thanks for this Video. Exactly needed the same.
Hi Rahul, amazing video very concise to the point. I have one questions. Is it possible to add build or release number to somewhere to release react web.
Yes you can use variable replacement and use that to replace the build number in a json file. Let me know if you get stuck doing it
Thank you for your time Rahul
Thank you so very much, this really helped my team mates and I, I'm grateful...
Thank you for your kind words and glad it helped you and your team!
Hi, do you have a video with a API in net Core using EF? How to should be if I have migrations to run in each environments?
beautifully explained
i got an error in ArchiveFiles task: no such file or directory, stat '/home/vsts/work/1/s/src/build' any idea?
I am also facing same error
Thanks, well explained and crystal!
can you share us using Docker and Docker-compose, and from App Service Plan and App Service.
Glad it helped and thank you for the feedback. I will add it to my list of videos, but can't guarantee when I will be able to do it. Will let know back here once I publish.
@@RahulNath , Sure no worries. I am missing this exact connection between Azure DevOps (CI/CD) and Azure App Service. Appreciate your response, Thanks!
@@jugsma6676 Cool ok - If you have any specific question feel free to drop a comment and I can try and help!
Thanks Rahul! Is it possible to deploy in appservice into a specific subfolder using variables?
Yes there are ways to achieve this. Easiest might be to replicate the same folder structure in your build package and deploy the whole package, so that it will maintain the folder structure.
Can you elaborate on what you are trying to achieve here by deploying to a specific folder within wwwroot?
Thanks a lot this video really helpful
Glad it helped Jitendra!
Awesome video Rahul . one question how to use build artifacts in ymal. I saw you just picked from the location but same I have to do in ymal any help please..?
hey Gaurav, glad you liked it. Can you point to me the video location that you are referring to, might help to understand better what you are looking for.
@@RahulNath these is respect to release pipeline its start from 7.24 when you are adding artifacts from source type. _build-deploy I want the same process in the ymal file. I have release pipeline where I'm consuming two artifacts in Devops UI it pretty straightforward just like you explained the video but I have to migrate my release pipeline to ymal file and here I'm stuck wondering what is the correct syntax. resources:
pipelines:
- pipeline: _ABCpipeline
project: test servicing
source: PackageInfrastructure
@@gauravjoshi5054 Does this doc help? docs.microsoft.com/en-us/azure/devops/pipelines/yaml-schema?view=azure-devops&tabs=schema%2Cparameter-schema#resources&WT.mc_id=AZ-MVP-5003875
One way I have found easy is to manually define this on a sample pipeline and export it to YAML to check for the syntax. Let know if that helps you
I added a script "npm test" to also run tests along with creating a build but the it does not run, nor does it produce any error.
I have a video here covering setting up tests in the pipeline. I cover npm test as well th-cam.com/video/FFxww1-M25E/w-d-xo.html
Kindly let me know if you have additional questions
Awesome! Thank you
You're welcome!
I just want to know about "npm test" that is missing in video. Please show how to create pipeline for "npm test" ?
You might find this helpful th-cam.com/video/FFxww1-M25E/w-d-xo.html
@@RahulNath thanks
Nice tutorials to learn DevOps
Can we expect a tutorial on Asp.net boiler plate (ABP) in azure DevOps
Glad you like them - I’ve a few in my series th-cam.com/play/PL59L9XrzUa-m7AFDgjWuwm6exyCklc03U.html that shows SPA template , with webjobs etc. Let me know if that helps
Wow thanks. I am an M&E specialist and I am thinking developing data collection app to collect field data and power it on Power BI using the Azure server. Is this doable and tips on how to go about it. Thanks
Thank you Jonah. That is a very broad question. I am sure it is doable. Is there anything in particular that you are stuck with or need help? Suggest breaking it down into smaller parts and handling itone by one if you are new to it.
simple and informative, how to create a release(not deploy) when I commit to the branch. Thanks
Thanks Prasad and glad you liked it. For creating the release only, you can turn the trigger on the stage to be manual only. I show that in this video here - th-cam.com/video/eGcosoC43vI/w-d-xo.html
You can also read about it here -docs.microsoft.com/en-us/azure/devops/pipelines/release/triggers?view=azure-devops#stage-triggers
Let know if that helps
Thanks Rahul for your wonderful explanation. I have created a release pipeline which is used to deploy package in ten web servers. All servers are added in a deployment group. I want to restart application polls of all servers after IIS Web App Deploy step. How I can configure that? (From IIS Web App Manage under the section Additional appcmd.exe commands, I can write app pool recycle command to do that. But I want to do it after IIS Web App Deploy step)
Very nice video bro! There is any way to throw release directly to the IIS server instead to azure?
Glad you like it. Are you looking to deploy to a Virtual Machine? You can check out this video where I show how to do that. th-cam.com/video/uSEx5QiuOCw/w-d-xo.html .
You can also use the IIS Web App Deploy task if that is what you are looking for - docs.microsoft.com/en-us/azure/devops/pipelines/tasks/deploy/iis-web-app-deployment-on-machine-group?view=azure-devops. Let know if you have further questions.
@@RahulNath I'm looking to deploy to a IIS in a VPS but not an asp.net application. I'm looking to deploy a react application. I do a CI correctly but in CD only have to deploy a React App to Azure.
Hi Rahul,
Thank you for your good content!
I am facing an issue with the build artifacts after the build has been completed:
##[error]Error: ENOENT: no such file or directory, stat '/home/vsts/work/1/s/src/build'
I've double checked and tried different alternatives for build folder, but as suggested I've used same variable paths
Any suggestions?
Hey,
I just realized that the project files weren't into separate 'src' folder. Thanks!
Awesome, glad you sorted it out!
Hello very nice explanation, I followed your steps but still getting the following error. can U pls help?
##[error]Error: ENOENT: no such file or directory, stat '/home/vsts/work/1/s/src/build'
Very helpful Rahul
Thank you and happy it helps!
fantastic video.. you rocked!!
Thank you for the lovely comment - Glad it helped!
Thanks for the really helpful video and subbed! I've started learning Azure DevOps for my small React & .Net project and been trying to figure how to setup azure-pipelines.yml to automate pipelines without clicking things in portal eg. environments. Would be helpful if you can go deeper with multi branch, environments and things you can do with azure-pipelines.yml for automation and IaC perspective :).
Glad it helped and thank you for the feedback!
The yml files lives as part of the repository and can be authored directly in your code editor. I will do a video showing this and link back here once done.
Did you have anything in particular in mind around 'multi branch, environments' ?
I talk about release and release management in the DevOps variables video here (th-cam.com/video/OFr6Vkw0mq8/w-d-xo.html)
@@RahulNath Was thinking of learning so that I have Prod & Test + own local Dev branches which separately push to the own Prod/Test pipelines. Then to release pipeline which pushes to heroku in docker containers. Hopefully as much as I can in azure-pipelines.yaml to use same type of environment in future projects. Slow process, but making lot of mistakes and trying again :)
Thanks for the input. I will check that video
Just published a follow up video on using ARM templates to automatically create infrastrcuture . Thought it might be of help to you. Check it out here - th-cam.com/video/3IRwtbGlshk/w-d-xo.html
@@RahulNath Thanks again! I will check it out!
Hey there thanks for this tutorial. I just saw you didn't add Startup Command in the Azure portal like 'npx serve -s' but in my case without this command, the app doesn't run so how the app is running without it?
It's because this was on a windows machine. I talk about this in a follow up video on Linux th-cam.com/video/HLhlKIIfaZs/w-d-xo.html&ab_channel=RahulNath
5:50 How did your script run after this successfully when line 11 references uiSouce (not uiSource) in the string interpolation?
Good catch! I might have fixed that typo after that and fixed it in editing 😀 The full pipeline is here rahulpnath.visualstudio.com/_git/build-deploy?path=/azure-pipelines.yml Let me know if that helps.
Hi Rahul, Great tutorial, impressive details. Just a quick question: if I use a Web App with Linux OS - what additional information should I configure to run react js web app.
Thank you for raising this question. On an Azure Web App on Linux, additionally, we might need to set up the host server using express (as an example). I will do a follow-up video on this and post a link here.
@@RahulNath Thank You Rahul.
@@gvsocialmedia2379 Here's a follow-up video on configuring it on Azure Web App on Linux. th-cam.com/video/HLhlKIIfaZs/w-d-xo.html
Let me know if that helps.
Very nice job Rahul, Do you have any plans to deploy same application in Azure Kubernetes ? It will really helps.
Thank you and glad you liked it. I might do a ASP NET Core with React SPA app deployed to AKS. Did you have anything specific to be convered as part of it?
@@RahulNath @Rahul Nath Thank you for asking, It would be nice if you can cover ingress controller and shipping logs from pods. Use case something like Front end web app hosted in a pod will communicate with api management service (api hosted in another pod) . DNS --> INGRESS1? --> SERVICE1 -->POD1(WebFE) --> DNS --> APIM --> INGRESS2? --> SERVICE2 --> POD2(API)
Thank you for your detailed reply. Not sure if this is directly related to a build/deploy pipeline for AKS. Not sure if I will be doing specific to this any time soon. However I will be doing a AKS related video soon.
Thanks again for your reply!
Hey Rahul, thanks for the tutorial. Just wondering if I have to set up web.config to enable azure web app service to look for index.js when using react-router?
Thanks, Sarthak for your comment and sorry for the delay in response.
Yes, you are correct when using react-router you need to add a web.config fine to rewrite the server URL's. All the routes that apply to your front end must be redirected to Index.html file so that the root page will be loaded and then react-router will then handle the routes.
For more details please check the related blog post here - www.rahulpnath.com/blog/create_react_app_devops/#frontend-routing
Kindly let know if that helps!
Here is a follow-up video on the web.config configuration required th-cam.com/video/bZzjfTXODUk/w-d-xo.html
Let me know if that helps!
Hi Rahul Nath! Sorry for the late reply. It definitely helped, also the new dedicated tutorial made even more clear man. Thank you very much. 🙏
Thank you for this
HI Rahul, Must say its a very well articulated tutorial. But I am struggling on the deployment. I am able to finish properly everything but even though the deployment is saying all successful my react app is not running I am still getting the old MS startup page. Any idea or help please would be greatly appreciated. Please note, I tried webapp on Linux.
Thank you and glad you found it helpful.
With Linux WebApp you need to set up the server yourself. Unlike the windows web app where it is hosted on IIS by default. I have a video that talks on how to set it up on a Linux Web App - th-cam.com/video/HLhlKIIfaZs/w-d-xo.html
Let know if that solves your issue.
@@RahulNath thanks Rahul. Much appreciated mate for coming back so quickly. I'll definitely give it a try and come back tomorrow. Thanks a ton again.
Anytime 👍 do let know how it goes!
@@RahulNath That has helped. Thanks a ton Rahul 👍
@@bismsit29 Cool, thanks for confirming!
@Rahul Nath Nice job :)
Thanks Dan!
this for react.js or react native?
Thanks a lot Rahul .. Super Like... :) .
Thanks Rakesh 😀
Can you create a video for angular app too ? Thanks
Sure, thanks for the feedback. I will do it some time - Did you have any particular questions around it?
Can you tell us, what changes do we require for Linux-App Service Plan?
I have a follow up video on that th-cam.com/video/HLhlKIIfaZs/w-d-xo.html
Let know if that helps!
my deployment is successful , but i could only see azure default page like below, any help would be appreciated.
Hey, Node developers!
Your app service is up and running.
Time to take the next step and deploy your code.
Are you deploying to a Linux based Azure VM? Check out this video helps solve the issue - th-cam.com/video/HLhlKIIfaZs/w-d-xo.html
@@RahulNath yes !
Thank you so much for the reply ! Will go through.
@@ravikamesh2800 Cool thanks. Let know in case you have additional questions.
@@RahulNath it worked ❤️ , you are awesome , commented in that video as well.
@@ravikamesh2800 Thank you!
Thanks 👍
Welcome 👍
Really nice video, Thanks!
Glad you liked it and thank you for the comment!
@@RahulNath You can do it the same but using tfs control code?
@@marcfernandez6132 Are you referring to TFS source control? Sure that it should be possible there as well, as long as you use the appropriate task and commands. I have not used one for a long time, so I can't be of much help there.
how do you manage to keep the build folder inside the src directory, i am getting
ENOENT: no such file or directory, stat '/home/vsts/work/1/s/src/build'
got it my bad
Glad you sorted it out!
Can you tell me the solution? I am facing same issue.
@@manaspal5 Suggest looking at the build logs and see what directories are getting created and the one that is failing. Most like some issue in the way the directories are set up.
Where does ZIP deploy actually copy the files in drop/1.zip to? Typically when I use ftp to manually copy the build directory to the server, I would copy the files into wwwroot. The release is successful but I don't see the files in wwwroot. Also when I goto the server url I get this error -> Not authorized to view. Thanks so much!
What server/cloud are you deploying to? Looks like you do not have access to view the files in there with the not authorized error. Checking the logs to make sure the files are also getting deployed is a good start. Hope you were able to resolve the issue
Do we need to create release pipeline everytime for deployment?
You can run an old release if that is what you want to redeploy. If you have code/variable changes etc and want to create a new release then yes you need to make a new deployment. Let me know if you have additional questions.
How do you do this using custom build agent (In-house build server)?
Check out this video where I deploy to a VM th-cam.com/video/uSEx5QiuOCw/w-d-xo.html
Let know if that helps
thanks bro
Welcome Manpreet!
Is this Build/Release Pipeline without using server (Microsoft-azure)?
Did you mean to say without using a web API? Then yes that is correct - this is a plain create react app. It still uses a server, in this case the IIS server since it is deployed to Azure Web App running on windows.
For similar one using Single Page Application template check out this video th-cam.com/video/SYhufaLn51w/w-d-xo.html
@@RahulNath without using server means if you can use any ms-azure subscriptions and resource group in this video ?
@@vamsikrishna2241 it does deploy to an azure web app already created in azure manually at around 8:00 . Check my ARM templates video if you want to learn to automate resource creation
Nice tutorial !!!
btw,
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
2020-01-08T06:28:33.4169516Z 1: 0x8fb090 node::Abort() [/opt/hostedtoolcache/node/10.24.1/x64/bin/node]
Did you come across this issue while running the build pipeline??
No haven't come across this issue. A quick search gave me this stackoverflow.com/questions/53230823/fatal-error-ineffective-mark-compacts-near-heap-limit-allocation-failed-javas
Is it because of the node version?
@@RahulNath Thanks for reply, I think it is related to some space allocation restrictions of the instance
tried "--max-old-space-size=2048" in package.json of react app , but still sometimes job fails.
@@ssdk3051 hmm haven’t come across this issue.
@@RahulNath Thanks for checking
Hey Thank you for this tutorial. I deployed my app successfully but I get permission Error (You do not have permission to view this directory or page.) as I click on Url. Any thought why I'm getting this?
Did you verify the package getting deployed to the azure? Hope is has all the expected files in it. Are you using a Web app on windows or linux?
@@RahulNath hey Rahul ;)
yes I can see the app in azure portal deployed successfully. And I created one linux service plan in and chose php for stack and a windows service plan with Net core 3.1 . I'm getting the same error with both configurations!
@@RahulNath I created a stack-overflow question. here you cans see the screenshot of the error I get.
stackoverflow.com/questions/61944844/deploying-react-app-with-custom-web-pack-configuration-to-azure
Sorry missed replying to this.
Were you able to solve it? Does it work locally using the build output and serving it from the public folder? Looks like this is something to do with your custom configurations and not do with the pipeline itself.
Interesting. Now how to start a react dev server on azure? npm start instead of npm run build
The Azure Web App does the hosting for you, so you need to deploy the required files to that server. Hence we do the build to output the package and then host it on Azure Web App. Azure DevOps is doing the build and deploy in this case.
Let know if that answers your question
@@RahulNath What I need to do is just run the develop environment on Azure, like we do it locally. Without building.
So gow to push the code to Azure then launch "npm run develop" and get a public url for the development env. Just like what happens on Gatsby Cloud.
@@realthriller Sorry for the delayed reply, missed this comment. What are you trying to achieve here? How is it different from hosting a build output?
Is this the same for react native?
Haven't tried that Ramiro. Are you facing any issues? Overall it would be same I guess, except for any script changes that might need to be done for react native.
I am trying to deploy this react vite app to azure web app but getting error with index.tsx please hwlp
sure can - what is the error you are seeing ?
@ Rahul it’s throwing error as :
Failed to load resource: the server responded with index.tsx:1 a status of 404 (not found)
@@RahulNath also here I can not paste the snap. Don’t see any option to upload it here, sent you request on Instagram and LinkedIn
this is for react native or react js ?
react js
@@RahulNath Do you have any tutorial for react-native apps ?
@@vamsikrishna2241 No don't have any and not planning anything soon.
Thanks save mi life
Cool thanks 😎
Super like !!
Super Thanks!! 😀
hi
I have followed your video everything working but the web page didn't come up. the web page showing "the service is not available" and http error 503" please give me a solution two days I am trying but didn't get any solution. I am hardly requesting the solution for that
thanks
Where are you hosting it ? Is it a windows or Linux machine ? I have a follow up video for Linux on the channel if that helps
hi
I have hosted it on windows machine. I have created a self hosted windows agent
thanks a lot for replying me
thanks again
There is spelling mistake in line no.11. - uiSource
You mean in the source code here? rahulpnath.visualstudio.com/build-deploy
Hope you sorted out anyways
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
Where are you seeing this error?
@@RahulNath Error: Npm failed with return code: 1
npm install
If you have this working on your local machine, make sure you are using the correct Node version in the build pipeline too. Use should be able to set the Node version using a task.
You do not have permission to view this directory or page.
After Successfully deploying, when I open the link I'm getting above message, eventhough I'm the owner of my azure account
Awesome!
Rahul, I`m going to use this video to publish a private website and add a reference to this video to show my appreciation.
If you would like me to add more information about you - please add me on the LinkedIn (Anton V*****) and we can discuss it
Awesome thank you. Link to this video should be good enough. More details @ www.rahulpnath.com
@@RahulNath I`ve tried to do the but for the typescript template (npx create-react-app app-name --template typescript)
The CI/CD is working but nothing was deployed. Message on the website (avgustpol-react-timer.azurewebsites.net) :
"Hey, Node developers!
Your app service is up and running.
Time to take the next step and deploy your code.
"
Does add typescript makes big difference?
Can you suggest something in this case?
@Антон Looks like you are hosting on a Web App running on Linux. There are a few more settings that need to be done for that which I show here th-cam.com/video/HLhlKIIfaZs/w-d-xo.html
Let know if that helps.
@@RahulNath thanks ! I will try to deploy it to the Linux
But I`ve tried to do the same for the create-react-app command (exacts steps, like in your video) and still have the same page (react app deployed without content) :c
Any suggestions from your side? 👉🏻👈🏻
oh, that's probably because you didn't show the process of creating the service on the porta.azure and your "workoutplan-test" is running on windows
At ArchiveFiles stage I am getting error "no such file or directory: /home/vsts/work/1/s/src/build". Please help.
best to check the logs and verify the path used is correct. Hope you were able to resolve.