1

So I have tried deploying an application using .net 4.8 backend and reactjs as frontend from Azure Devops to an IIS on a server. The artifact ends up there but its missing some key components.

The problem I'm having is trying to get the 'dist' folder to end the react folder: '/ClientApp'. The path is '[projectroot]/ClientApp/dist', but instead it ends up nowhere. I've tried a multiple of different path combinations. I also tried using two build steps and two artifacts, but that didnt work either. I will post a series of images of my setup and hopefully that will help you point me in the right direction..

Here is the project with the react app in 'ClientApp'

enter image description here

dist folder

enter image description here

webpack

enter image description here

npm build step

enter image description here

solution build step

enter image description here

copy files step (got this from this post enter link description here)

enter image description here

Artifact step

enter image description here

Release step (Prior task contains authentication and such..)

enter image description here

This is the artifact drop from the build (Notice that the artifact is "split up" with the solution that is zipped in the drop (correctly) but the npm build (or the copy files) is in its own file structure. This is most likely whats going wrong.

enter image description here

this is the root folder on the server, looks fine

enter image description here

No 'dist' folder in the ClientApp folder...

enter image description here

swedish_junior_dev
  • 167
  • 3
  • 14

1 Answers1

2

The problem is that IIS Web app Deploy task deploys from package AFA.WEB.zip, and react artifacts should be copied to the react folder /ClientApp which resides in package AFA.WEB.zip. However, react artifacts was copied to the wrong place which located outside package AFA.WEB.zip, see below screenshot.

enter image description here

One of the workaround is to change your Visual Studio Build task's MSbuild Arguments to /t:publish /p:outputpath=$(Build.ArtifactStagingDirectory) instead of /p:DeployOnBuild=true /p:WebPublishMethod=Package /p:PackageAsSingleFile=true ....

So that the backend build artifacts will be published to folder $(Build.ArtifactStagingDirectory)\publish and not zipped. Then in the Copy files task, you can copy the react artifacts to the Target folder $(Build.ArtifactStagingDirectory)\publish\ClientApp\dist.

And in the IIS Web app Deploy task, set the Package or Folder to folder $(System.DefaultWorkinDirectory)/..-Master-CI/drop/publish

You can aslo refer to my answer to this thread.

  • Update:

If above Msbuild argument doesnot generate the artifacts as expected. Please have a try using /p:SkipInvalidConfigurations=true /p:DeployOnBuild=true /p:WebPublishMethod=FileSystem /p:publishUrl="$(build.artifactstagingdirectory)\\" /p:DeployDefaultTarget=WebPublish as Msbuild arguement instead. This msbuild argument will output the build artifacts to folder $(build.artifactstagingdirectory)\\ unzipped.

The main goal is to make Visual studio build task generate the build artifacts files unzipped.

In the Copy files task, you can copy the react artifacts to the Target folder $(Build.ArtifactStagingDirectory)\ClientApp\dist.

In the IIS Web app Deploy task, set the Package or Folder to folder $(System.DefaultWorkinDirectory)/..-Master-CI/drop/

Levi Lu-MSFT
  • 27,483
  • 2
  • 31
  • 43
  • 1
    Okay, I tried changing all of that, but now the artifact is the same, only there is a 'publish' folder with 'ClientApp/dist' in it and the binaries, instead of just 'ClientApp/dist' with all the binaries. And when I checked the server there was ONLY the 'ClientApp' folder there with dist folder inside. Nothing else, no binaries, no webconfigs, nothing. – swedish_junior_dev Apr 30 '20 at 08:25
  • 1
    Maybe I have to have two releases? one for '$(System.DefaultWorkingDirectory)/Phobos-Master-CI/drop/' and one for '$(System.DefaultWorkingDirectory)/Phobos-Master-CI/drop/publish' ? – swedish_junior_dev Apr 30 '20 at 08:30
  • 1
    Can you check the vsbuild task log to see if the build artifacts are generated to the `$(Build.ArtifactStagingDirectory)\publish` , after you change the msbuild arguements to `/t:publish /p:outputpath=$(Build.ArtifactStagingDirectory)` – Levi Lu-MSFT Apr 30 '20 at 08:48
  • 1
    Im not sure where I can see this. I checked the logs from the latest build (where you can see all the logs during the steps) and I cant find any mention of the output path.. Can you point me in the right direction? – swedish_junior_dev Apr 30 '20 at 09:05
  • 1
    Hi @swedish_junior_dev if above msbuild is not working. Please have a try using this msbuild argument `/p:SkipInvalidConfigurations=true /p:DeployOnBuild=true /p:WebPublishMethod=FileSystem /p:publishUrl="$(build.artifactstagingdirectory)\\" /p:DeployDefaultTarget=WebPublish` – Levi Lu-MSFT Apr 30 '20 at 09:45
  • 1
    Alright, im running it right now.. No changes Target folder in copy files and Package or Folder in deploy? – swedish_junior_dev Apr 30 '20 at 09:49
  • 1
    The target folder and package or folder need to be changed accordingly. I just updated above answer. – Levi Lu-MSFT Apr 30 '20 at 09:51
  • 1
    Alright, Ill re-run it with your updated answer and report back. Thank you for your time and effort! – swedish_junior_dev Apr 30 '20 at 09:53
  • 1
    Your updated suggestion worked perfectly. Thank you very much! – swedish_junior_dev Apr 30 '20 at 10:06