Converting to ASP.Net Core - Part 3

This is the third in my series of converting my red-folder.com site over to ASP.Net Core & MVC 6.

The first article looked at creating an empty project.

The second article looked at copying my existing content into place the new project and getting it to run.

In this article, I want to make it ready for release to Azure.

It’s all broken

Right so straight away I had a problem with the project.

Visual Studio Task Runner Explorer completely lost any knowledge of gulpfile.js. And no matter what I did to the project I couldn't get it back (that’s not entirely true … I did get it back, see below).

I'm not sure why this occurred. I had amended the gulpfile.js to add minification and bundling, but I completely reversed those changes (source control undo) – but TRE stubbornly refused to acknowledge the file.

Something broke, but I'm really not sure what.

Visual Studio even lost the “Task Runner Explorer” option on right click of gulpfile.js.

I tried various things, including reverting all changes back to check-in, deleting the gulpfile.js and starting again, restoring NPM modules and even install VS 2015 update 2 – still no joy.

In the end, I deleted gulpfile.js, package,json and the hidden node_modules – then added them back in. And voilà, TRE can see my gulpfile.js again.

If I'm honest I suspect I've done something wrong (probably when editing gulpfile.js) – but for now I’ll mark it down to experience and keep an eye on it.

10 seconds later

It’s broken again.

So I've gone from the default gulpfile.js generated by Visual Studio to the version I had in my latest commit.

Ok, this is a good thing. It means it is something I've done to the gulpfile.js – but obviously something I've done prior to committing it in.

So first thing, I've reverted the file back to the Visual Studio default. No joy. Restarted Visual Studio and we are visible again in TRE (number of postings on the SO that if TRE loses tasks then just restart Visual Studio).

Ok, after much playing, it appears to be the following line:

gulp.watch(paths.lessSrc, ['less']);

I think it is because I’m providing this outside of a task – which makes sense. The gulp.watch returns a watcher object. This makes me think that I need to handle within a task.

And doing this seems to resolve it.

gulp.task('watch-less', function() {
return gulp.watch(paths.lessSrc, ['less']);
});

Committed this fix here.

Getting ready for deployment

For this, I’m going to follow on with Shawns course – specifically his ASP.Net 5 Deployment chapter.

(Just for clarity, ASP.Net 5 was the original name for ASP.Net Core 1)

I performed the following:

• Added “gulp-uglify” to package.json
• Added a “minify task” into gulpfile.js – this just minifies my JavaScript (using uglify and puts into the scripts/min folder)
• Added a “deployment-prepare” task into gulpfile.js – this in in readiness for deployment and will be all the tasks that I want a fresh deployment to do (at this point run the less & minify tasks)
• Added a “scripts” block to project.json – a “prepublish” which runs npm & bower to download dependencies and a “prepare” which runs the “deployment-prepare” gulp task I added above
• Add environment blocks to _Layout.cshtml – one for Development, another for Production & Staging (see below).

There is a lot more that I want to do with the gulp tasks – I'm currently not touching CSS or bundling any files. I’ll look at this in more detail in the next article. For now, this is hopefully good enough to deploy.

Environment Blocks

Environment blocks are part of the new Tag Helpers. They provide blocks of HTML which the Razor engine decides to include in the output based on the names attribute and the value of the Hosting:Environment environment variable.

The Hosting:Environment can be set by going into Project Properties -> Debug.

I believe you can use whatever name you want for your environments; I've chosen to use:

• Development
• Staging
• Production

Then within my _Layout.cshtml I add two environment blocks – one with the names attribute of “Development”, the other with “Staging,Production”.

Within the Development block I include all the script tags for the un-minified JavaScript.

Within the Production/ Staging block I include all the script tags for the minified JavaScript.

Commit

Before attempting to deploy, I commit the above under this commit.

Deployment

I've used the Visual Studio Publish to deploy to Azure … and it all seems to work.

Deployment takes quite long time – about 10-15 minutes. I suspect that a large amount of this is time downloading dependencies. This is including the .net runtime (I believe).

There is likely to be a more efficient deployment methods, but for now all good.

There does appear to be a number of gotchas to watch for, as referenced in this SO question. But this is to be expected with RC versions.

Next

I want to produce a better Gulp pipeline.

My Gulp tasks are currently not doing everything I want them to – plus it would be good to get more experience with the tool.

For this I will be looking at another Pluralsight course - JavaScript Build Automation With Gulp.js.