Overview

While this setup may be very simplistic and common to others, it was very foreign to me since I've not worked with it before.  Hearing about these tools and frameworks always intrigued me but since I was not forced to use them I didn't make time to learn about it.  I'll bet many of you are in similar shoes! 

Recently I was forced to learn more about it to make a project successful.  Of course, there were many hiccups I came across.  Fortunately, I was able to call on fellow Kentico MVP, Ilesh Mistry for some assistance.  In the following article I'll share with you some basic setup steps I was able to take to get some front-end tools working well with back-end tools and within Kentico.

Project Review

The project was a redesign of an old site and I inherited it from an agency who specialized in front-end development.  Take a look at the folder structure below, pretty standard Kentico install with a "frontend" directory.

I figured it was a pretty simple setup and easy going from here on out.  That was until I found out we were removing a JavaScript feature and replacing it with something else.  Looking further into the Kentico project I found there were a few custom event handlers and some webparts.  All of which appeared to use Kentico's best practices.  

Then I dove into the "frontend" website and said, hey, I can just strip this all out and include it in the Kentico project, because that's what I know and what works.  After spending over two hours looking around and attempting to decompile the site, I said, why not just embrace this and learn how they can all play nice together.  

The Missing Piece

I've heard of Gulp, Grunt, Node.js, etc. before and know they all have their special features and downfalls but never looked into them much.  After some failed research in my 1980 Encyclopedia Britannica, I went to Google to find out more.  I came across one article after another talking about issues people have had with their setup and very generic setup instructions as a whole but all of these articles seemed to be missing yhe one piece which was causing my build to be unsuccessful.

As you can see in the image by the file names, this project is using Gulp.js and Bower.  What you might not see is the project is also using Foundation framework as well.  My current development environment consists of tools like Visual Studio, SQL Server Management Studio, Fiddler, JustDecompile, and a few others.

I've been handed a few projects similar to this before and simply let the FED do all the changes needed to CSS and JS files and just hand them off to me after they made the changes.  This worked great until I became the FED!

After digging around in the package.json, gulpfile.babbel.js, gulp-origonal.babel.js and config.yml files, I knew there had to be a way to get this setup and working properly.  After spending what seemed like a full day researching this and testing minor changes, I gave in and went for a beer (or two).  The following morning I reached out to my fellow Kentico MVP's and was able to get Ilesh Mistry on a call and in a short 10 minutes he gave me some great information.  Do you remember me saying there seemed to be one missing piece?  Well Ilesh gave me that piece.

Front-End Setup and Tools

The missing piece was an extension in Visual Studio called, Node.js Tools 1.2 for Visual Studio AND NPM Task Runner (which I had already installed).  After I found out the missing piece, I upgrade Visual Studio to Update 3 (because the Node.js extension required it) and had the project debugged and running less than 3 hours later!  You  FED's might say geez, I could have had that done in 20 mins, but for a BED who has never done this before, I say, I'm a quick learner, plus Visual Studio takes forever to upgrade.  By the way, here is a very good article on NPM, Bower and Grunt.  Yes, I know it's not Gulp but same difference.  I referenced this quite a bit.

Now I have all of the tools, extensions, and plugins needed to get past the errors and successfully build the frontend project and hopefully deploy it to Kentico.  Here's an inventory of my install:

• Windows 10 Pro (Surface 4 Pro, i7, 16GB, 512GB SSD)
• Visual Studio 2015 Update 3
• SQL Server 2014 SP1
• Node.js Tools 1.2 for Visual Studio
• NPM Task Runner
• Kentico 10.0.23 code
• Frontend code

With all these tools setup and working I'm able to find a few more errors/events when building the frontend website.  Essentially what is needed for Gulp to work properly is Node and a command line interface (CLI) or in my case NPM Task Runner so I can use it easily in Visual Studio.  I'm not going to get into the specifics on what each configuration file does because the article I mentioned above, does all of that already.  

Now We're Cooking With Fire

After all the tools were installed and I was able to build the project, I of course, came across some errors and issues.  Come to find out, it looks like I may have received an old, out-dated version of the frontend code with all the changes I had to make.  The errors and issues were much more informative now and I was able to simply follow the on-screen suggestions to resolve them.  A good example is below, this shows something simple as opening the Command prompt, changing your directory to C:\websites\<websitename>\frontend and running "npm rebuild node-sass" to setup the dependency since we're now running on a Windows machine vs. a Mac.

Another good example is everytime I built the project, it was missing the jquery dotdotdot plugin.  Come to find out it was not checked in to the repository when the project was handed over to me.  After downloading it and adding the reference to it in the config.yml file, that was then compiled and added to the minimized version.

The last issue I detected was the actual compiled app.js file was not being copied to the Kentico instance in the /CMSScripts/Custom/<SiteName> directory like I was expecting.  What I found out is the configuration file had that part commented out!  After I finally got it deployed and running locally I found several other missing plugins which again I believe was due to them not being checked in to the repository OR they were automatically downloaded from another repo as I did see a few of those references too.  

Final Thoughts

After all is said and done, I was finally able to remove a single feature plugin and redeploy the code.  Whomever said "you can't teach an old dog new tricks" is mistaken today!  I think I've finally beat this frontend compiling issue, at least for now.  

Good Luck and Happy Coding!