Categories
Bloggers
Blogs RSS feed

Sitefinity Thunder - why you need it, how to install and set it up

by Grisha 'Greg' Karanikolov
Sitefinity Thunder is a free plug-in for Visual Studio. It’s been a great help for Sitefinity developers, as it offers a lot of features which make our lives easier. In this post, I’ll make a summary of some of the most important features it holds, I’ll take you through the installation process and explain which features of Thunder you might want to use in different cases. Bear in mind that since Sitefinity Thunder has a new release every couple of weeks, by the time you read this there might be a good number of new important updates and new features, so I would recommend you stay in touch with what it has to offer.

Why you would want to use Sitefinity Thunder

You know how flexible and extendable Sitefinity is, right? You can create custom templates and themes, custom widgets (both in MVC or Web Forms), construct user-friendly control interfaces (designers) for them, create web services and much more. Well, Sitefinity Thunder saves you time and effort with all that, allowing you to create these elements in an automated way, setting them up in the right folder structure, creating sample code that you can both use as reference and modify to suit your needs.

1

It automatically registers these elements in Sitefinity (as in the case with custom themes) or gives you the ability to do so yourself if you use the “Register Toolbox Widget” button, which appears when you select the SitefinityWebApp

2

Curious fact: A little known fact is that the widget designers you can create through Sitefinity Thunder can save you tremendous amounts of time – try creating a widget without a designer first, write up your code and once you've created and saved it, try creating a Designer for existing widget. You will be suggested data picker interfaces (page, image, video, document or dynamic content selectors, dropdowns, checkboxes and more) for all public properties you have included in your widget:

3

which on the frontend would appear like this:

4

Read more on this awesomeness in the great blog post by David Cowart.

Sitefinity Thunder gives you the option to create new custom modules, where you can write your own logic and have them do anything you choose, should the dynamic modules of Sitefinity come insufficient in functionality.
In order to do any of the above, all you need to do is install Sitefinity Thunder and open your Sitefinity Web Application with Visual Studio – you will be given all of the above options without having to perform any other steps.

 

5

Another great feature that Thunder brings is the ability to connect to a remote server with Sitefinity project hosted there, download and change in real time website templates, themes and widget templates.

6 

This is convenient as you have VS’s IntelliSense to autocomplete and correct your code for you, compared to the built-in browser-based widget template editor. The Toolbox of Visual Studio will automatically be populated with the dynamic fields that you can use with the template you've loaded.

If your Sitefinity License includes that, you can use Thunder to synchronize code and deploy widgets and modules you’ve created remotely using the CodeSync and CodeDeploy functionality.

If you would like to manage themes, website and widget templates or synchronize code and deploy components remotely, you will need to install Sitefinity Thunder onto your project and set up Visual Studio to connect to it besides setting up the Visual Studio plugin.

Installing and configuring Sitefinity Thunder

I placed the “install and config” part of this blog post here deliberately, to make sure you will configure only what you need to, without taking any extra unnecessary steps.

There are 2 components worth bearing in mind when you are installing Thunder. One is the Visual Studio plugin, which you can download and install from Visual Studio Gallery. The installation of that is pretty straightforward – just download the plugin and follow the installation wizard. Having this plugin installed is enough if you want to open your Sitefinity project locally through Visual studio and start creating Sitefinity components, such as widgets, templates and the others, listed in the beginning of this post.
The other is installing the Thunder component in your Sitefinity project, which is necessary only if you are willing to connect to your project remotely to update page/widget templates remotely or use the CodeSync and CodeDeploy features. I am highlighting this as many people waste their time setting up Thunder on their projects and connecting to that, when they never needed to do that.

Setting up Thunder on your project can be done in two different ways:
1) When working with a local project           
In this case, what you need to do is open your Visual Studio, where you’ve already installed the Thunder VS plugin, go to the Telerik dropdown menu at the top, choose Sitefinity Thunder -> Install Sitefinity Thunder Module and use the interface to browse your files and folders till you choose the folder where your project is located. Once you are done, hit the Install button and you’re done.

7

2) When installing Thunder to a project, located on a remote server, what you need to do is this:
From your Visual Studio’s Telerik dropdown menu, choose Sitefinity Thunder -> Connection Settings. A window will pop-up, where you need to Add your project . Choose a Connection name that rings a bell to you, provide the URL where your project can be reached and a valid Username and Password pair for a user with administrative privileges.

8

At this point, since you have no Thunder component installed on your Sitefinity project, if you choose to Test the Connection, it should fail, which is fine. Click OK and note the Download button. Clicking on it should pop up a “Save As” window. What this does is to automatically create a ZIP archive with files you will need to upload to your remotely hosted Sitefinity project. These files are some dll’s, which hold the functionality for Sitefinity Thunder, Code Sync and Code Deploy, as well as a .svc service file, that would allow you to connect to your project remotely. Note that the ZIP file contains these files, arranged in the appropriate folders, so that if you just unpack it on the destination server in the root folder of your Sitefinity web app, all files will automatically go to their correct locations.

Connecting to Sitefinity through Visual Studio’s Sitefinity Explorer that Thunder provides requires you to fill out the above “Connection Setting Editor” with the required URL, username and password, but if you've installed the Sitefinity Thunder component already as described above, you should be able to successfully connect to your project and the “Test Connection” button should return a message “Connected successfully”.
Please note! If you’re setting up a connection to an instance of Sitefinity, which is running not through IIS but through the web server, built into the Sitefinity project manager

(this: )

9

you’re most likely using a URL that looks like http://localhost:14434 or another port. The port number would change each time you exit the Sitefinity Project Manager and start it again, so you will need to change the URL in Visual Studio each time. That’s why I would recommend setting up your project in IIS so that your URL never changes (plus there are tons of other benefits of using IIS too).

So there – now you have plenty of reasons to use Sitefinity Thunder and know how to install and set it up!
Happy Thunder-powered coding!

7 comments

Leave a comment
  1. gregory hernandez Aug 21, 2014

    Thanks for the post Grisha. I'm very interested in this.

    Okay, this is where it gets a bit confusing for me. Say I create a widget or user control (e.g. a News or Events rotator) on my local machine.

    How do I get this widget or user control to be usable on the live site (e.g. not my local environment), without bringing the live onto my computer to build the solution with the new widget/control included?

    Does Thunder eliminate the need to bring down the site in scenarios link the above?

    Thanks in advance. I am really looking forward to your answer.

    Gregory

  2. Grisha 'Greg' Karanikolov Aug 22, 2014

    Hey Gregory,
    A good question! The answer really depends on the control you've created. Here's why:
    1. If you have created an .ascx user control locally on your development machine, you can easily move it to production environment. It consists of an .ascx file, the .ascx.cs codefile and the .ascx.designer.cs  designer file (if you're working with C# of course). In order to run this control locally you need to build your solution, which will recompile your SitefinityWebApp.dll file. And if you register your control within Sitefinity, this setting will be recorded in the ~\App_Data\Sitefinity\Configuration\ToolboxesConfig.config file. So if you'd like to push your control from your dev environment to your production server without having to compile your production project , you need to copy your control including all its files (.ascx , .ascx.cs, .ascx.designer.cs and if you've created a custom designer for it - its files too), the local ToolboxesConfig.config file and the SitefinityWebApp.dll and paste them in their corresponding locations on your production server. That will enable you to be able to drag and drop the control on any page on your production website. If you want to add the control to pages locally and push the end result to your website, after performing the above actions, you can use the SiteSync to sync pages with widget settings.
    2. If you have created a custom control, compiled in a class library, you will be able to distribute it easily, as it's a .dll file which can be copied to any project's bin folder and registered into Sitefinity by customizing the ToolboxesConfig.config file manually or through the administrative backend of Sitefinity. Furthermore, you can make your life even easier here by make your control to automatically register itself in the toolbox.

    In both the above scenarios, bear in mind that the versions of your copies of Sitefinity should be the same, otherwise you'll get "cannot find assembly" type of errors!

    Here's some more info on that:
    Creating self installing widgets and modules in Sitefinity
    Adding controls to the toolbox
    Registering a new widget in Sitefinity

    Hope that helps!

  3. gregory hernandez Aug 22, 2014

    Thanks a million Grisha!

    You just made my life easier. In previous occasions, I copied from dev to production the .ascx , .ascx.cs, .ascx.designer.cs and manually edited the ToolboxesConfig.config.

    On the production side, the widget would show up, but, it'd be somewhat empty, without the functionality that I had on my dev environment.

    I now see that what I was missing was copying the SitefinityWebApp.dll, which I thought was a no no.

    So, I always resorted to bringing the site down, copying the control's code, building the solution, and uploading the site. That's time consuming for me. And, I always had to schedule time where users cannot make any content changes, to avoid loosing new content.

    Again, thanks for this. It's timely, as I working on a couple of controls right now.

  4. Grisha 'Greg' Karanikolov Aug 22, 2014

    Anytime, Gregory! I am glad this helps! Again, be careful to have the same versions of Sitefinity. Ideally you have a copy of your live website on your development machine, so that when you build your project and upload the SitefinityWebApp.dll, it will bot cause any issues.

    On a side note, Sitefinity Thunder contains the Code Sync and Code Deploy features, the latter of which allows pushing controls and modules to a remote environment. You can read more about it here, but bear in mind that you have to have a license which includes these features.

    Cheers,

    Greg

  5. gregory hernandez Aug 22, 2014

    Thanks again Grisha!

    Yes, my dev is a copy of our production, just with slightly older and missing content.

    And, I look into Code Sync and Code Deploy. I believe our license includes those.

    Thanks.

  6. gregory hernandez Aug 22, 2014

    ah! just to clarify. The important thing is that the version of Sitefinity is the same. Right?

    If new pages have been created on the production site, which I don't have on my dev site, I am still good for copying/pasting the SitefinityWebApp.dll.

    Right?

  7. Grisha 'Greg' Karanikolov Aug 26, 2014

    Yes, file versions is what matters, the content discrepancies don't affect this at all.

    Leave a comment