Azure DevOps & Create React App : Build/Release Pipeline 

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'

Wow, thanks Yuvraj! This comment has made my day! 🙂

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.

Thank you for you comment and Glad it was helpful!

Great to know that Suhasini nd thank you!

Thank you Marty!! You can check out the full devops series here bit.ly/azure-devops-series

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.

Pretty sure that means good (double checked with google translate). Glad it helped and thanks for the comment!

Thank you and glad you liked it!

You're welcome!

Thank you and happy it helped 😀

Thank you for your kind words and glad it helped you and your team!

Glad it helped Jitendra!

Glad you like them - I’ve a few in my series ru-vid.com/group/PL59L9XrzUa-m7AFDgjWuwm6exyCklc03U that shows SPA template , with webjobs etc. Let me know if that helps

Welcome 👍

Thank you for the lovely comment - Glad it helped!

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

Welcome Manpreet!

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 - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-eGcosoC43vI.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

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!

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 (ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-OFr6Vkw0mq8.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 - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-3IRwtbGlshk.html

@@RahulNath Thanks again! I will check it out!

Thank you and happy it helps!

Hard to tell. Are you sure you followed the steps correctly? You can view the sample pipeline here rahulpnath.visualstudio.com/build-deploy rahulpnath.visualstudio.com/build-deploy/_build?definitionId=11 Let me know if you are able to find the problem. If not share me the public URL and I can take a look

I have a video here covering setting up tests in the pipeline. I cover npm test as well ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-FFxww1-M25E.html Kindly let me know if you have additional questions

You might find this helpful ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-FFxww1-M25E.html

@@RahulNath 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.

Thanks Dan!

Thanks Rakesh 😀

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.

I am also facing same error

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

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. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-uSEx5QiuOCw.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.

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.

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?

It's because this was on a windows machine. I talk about this in a follow up video on Linux ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-HLhlKIIfaZs.html&ab_channel=RahulNath

Hey, I just realized that the project files weren't into separate 'src' folder. Thanks!

Awesome, glad you sorted it out!

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. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-HLhlKIIfaZs.html Let me know if that helps.

Are you deploying to a Linux based Azure VM? Check out this video helps solve the issue - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-HLhlKIIfaZs.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!

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!

best to check the logs and verify the path used is correct. Hope you were able to resolve.

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 - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-HLhlKIIfaZs.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!

Super Thanks!! 😀

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

Sure, thanks for the feedback. I will do it some time - Did you have any particular questions around it?

Cool thanks 😎

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.

I have a follow up video on that ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-HLhlKIIfaZs.html Let know if that helps!

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 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-bZzjfTXODUk.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. 🙏

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.

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

Check out this video where I deploy to a VM ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-uSEx5QiuOCw.html Let know if that helps

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

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 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-SYhufaLn51w.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

You mean in the source code here? rahulpnath.visualstudio.com/build-deploy Hope you sorted out anyways

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?

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.

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.

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.

react js

@@RahulNath Do you have any tutorial for react-native apps ?

@@vamsikrishna2241 No don't have any and not planning anything soon.

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 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-HLhlKIIfaZs.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