TGIMBA .NET Core Upgrade – Finally, a working Continuous Integration Continuous Deployment (CI/CD) pipeline using Visual Studio Team Services (VSTS)

Welcome back!

In this post, I will wrap up what has been a rather long pipeline effort for The Globe In My Bucket Application (TGIMBA). As a reminder, I am recreating my local .bat build file on Visual Studio Team Services (VSTS).

This has taken a lot longer than I had anticipated. It has also led me to the decision to abandon Angular 4. Instead, I am going to rely on vanilla JavaScript for the web client. This version will have Hyper Text Markup Language (HTML) views that will be rendered with good old regular JavaScript. I could have re-used JQuery (it is absolutely a great technology), but the point of all of this is to learn new things. I will (at some point) implement another web client using React and/or Angular 4.

Why did I choose to abandon Angular 4 for now?

The complicating factor(s):

  • Angular 4 node_modules requirement – There were two issues that I encountered here – getting the node_modules directory inside the deploy artifact and then getting the directory easily to my production site.
    • No node_modules in zipped deploy artifact – I am still guessing that I am missing something here. I read a number of posts that said others had encountered this issue and by changing various msbuild parameters, it was fixed. I could never get this to work, so I opted to do my own npm install and they using the cmd prompt task to copy node_modules to my build directory.
    • Easily getting the node_modules directory to my production site. I explain this in more detail below.
  • Programmatic access to the pipeline deploy artifact
    • Apparently, there is no access to the artifact programmatically (as I understand it). I found this in a couple of posts. It seems like the deploy job creates an artifact you can download manually or you can put on a remote file share such as the Amazon S3. I did not like this, so I found a free utility offered on VSTS (reference #4). In my initial tests, the zip did not look like it was being created. But after talking with the creator, it looks like the zip file is created…just one directory up. Once I figured this out, I had a zipped deploy artifact that I could access programmatically 🙂
  • Unzipping the deployed file.
    • I am using the out of the box FTP control to copy the zipped deploy artifact to my production site. The problem is that I do not (and they will not grant me) access to be able to programmatically unzip files there. Copying the unzipped distribution timed out whenever I tried (kinda knew it would, but I thought I would try). One of the support guys suggested using the PHP built-in unzip function. Digging around based on their suggestion, I found some PHP code that seems to work consistently (reference #1). However, no matter what timeout settings I tried, the complete deploy artifact always timed out when unzipping. I could never find an easy way around this. I suppose if I move to Amazon or Azure for my production site, I will attempt this again if I have the access to programmatically unzip the deploy artifact.
  • Easily running the Angular 4 typescript unit tests – In my local .bat build file, I had to launch a server instance to run these tests. I never spent time trying to figure this out in VSTS given the deploy failed. I am assuming this is possible.

So, putting this version all together:

  • Team project

1

  • Website prior to pipeline build/deploy

6

  • Pipeline Summary View

2

  •  Check ‘Enable Continuous Integration’

    3

     

  • Website after pipeline runs

1

Pipeline details:

  • Component View

5

New pipeline components (please see previous post – here for details on other components)

  • Create Credentials.cs – One of the headaches of .NET Core has been the complete gutting of the previous configuration setting.  There is a perfectly good way of storing configuration data that is accessible in the new app.settings file.  However, accessing connection strings or application settings from Internet Information System (IIS) seems practically impossible.  I cannot apparently easily environment variables to IIS on my shared hosting environment, so I dynamically write my Credential.cs class in the pipeline containing my SQL Server database connection string.  VSTS allows for environmental variables which is how I run my current unit/integration tests.  This is a bit of a hack, but it works 🙂

1

  • FTP Upload – Standard File Transport Protocal (FTP) upload.  I am not using a zip file.  The .NET core publish artifact is small enough it is not needed.

2

I did have one error:

1

I tracked it down to file was in use on my production site.  The only way around it (so far) has been to manually delete all of the files there.  Not ideal, but good enough for now.

The next post CICD blog post will be the login screen using regular Vanilla JavaScript.

Stay tuned!

References

  1. https://stackoverflow.com/questions/8889025/unzip-a-file-with-php/8889126#8889126
  2. https://docs.microsoft.com/en-us/vsts/pipelines/tasks/utility/ftp-upload?view=vsts
  3. https://blogs.msdn.microsoft.com/devops/2016/08/18/upload-files-with-ftp-ftps/
  4. https://marketplace.visualstudio.com/items?itemName=januskamphansen.ftpupload-task
  5. https://thinkrethink.net/2016/05/28/using-the-vsts-directory-zip-and-unzip-task/
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