TGIMBA .NET Core Upgrade – Part 8 – Continuous Integration / Continuous Deployment – Part 4 – Build Artifact Correctly Built using VSTS

NOTICE: The TGIMBA git hub repository has been corrupted and I had to start over.  The link to the repository is here -> Git  Code Commit

Welcome back!  In this post, I am continuing with setting up a .NET Core Angular 4 The Globe In My BucketList Application (TGIMBA) Continuous Integration Continuous Deployment (CICD) pipeline using Visual Studio Team Services (VSTS).

To recap, in the last post I was able to correct a .NET Core Test issue as well as completely run the mostly out of the box pipeline I got using the pipeline wizard.  This would normally have been all I needed, but since this is an Angular 4 project, I need the node_modules directory as part of the deploy artifact.  Despite my best efforts, I was not able to this using the MSBuild component supplied with the out of the box pipeline.

Given I had seen this issue with my local .bat file build script, I decided to start over and build it along similar lines.   I was inspired to this approach after reading a post by the author of reference #3.

The steps:

  • Create Team Project
  • Authorize connection to your GIT repository

1

  • Select branch

2

  • Nuget Restore – Installer (I am assuming this is needed since I had to install nuget on my local box when I did the .bat file build script)

3

  • Nuget Restore

4

  • Clean .NET Core solution

5

  • Build .NET Core solution

6

  • Run .NET Core tests

7

  • NPM install of node_modules

8

  • Build deploy artifact

Here is the key for me.  In the previous pipeline, the build was created as a .zip file.  Despite my best efforts, I never was able to get the node_modules (which were available) inserted into this .zip file.  So, I uploaded the FolderProfile.pubxml used in my local .bat file (updated with appropriate relative paths) to my GIT hub repository and referenced it in the build step.  There is probably a better way to do this, but this worked, so I decided to move on 🙂

a

Incorporated into the build step:

9

  • Copy node_modules to build directory

10

  • Publish build artifact to .zip file that can be downloaded

11

All together, the pipeline looks like this:

3

The files generated look like this (my coveted node_modules is present 🙂 )

2

Next, I will figure out how to deploy to my production site using File Transfer Protocol (FTP).

Stay Tuned!

References

  1. https://docs.microsoft.com/en-us/vsts/pipelines/languages/dotnet-core?view=vsts&tabs=designer
  2. https://github.com/dotnet/cli/issues/4062
  3. https://offering.solutions/blog/articles/2018/03/08/create-build-pipeline-for-angular-and-aspnetcore-app-with-visual-studio-team-services/

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s