Customizing StoreFront with AWL-Citrix-Storefront

Introduction to AWL-Citrix-Storefront

The installation was correct according to the developer but nevertheless we didn't get it working. Maybe it was something in the customer environment. Maybe it will run in your environemnt.

Citrix introduced a new program which allows you to improve the user’s experience.

Well that’s not exactly right. Rody Kossen wrote the program and allowed Citrix to put it on the market.

Rody Kossen works for AWL Techniek where he is an Senior System Engineer.

They introduced it in their Blog article: Putting the Experience First, Where it Belongs

https://www.citrix.com/blogs/2017/11/13/putting-the-experience-first-where-it-belongs/

It allows us to get some extra informations out of the store window and we also can contact users.

What I want to say is they built an extra layer where we can customize our Storefront.

It enables us to see if the Desktop is in use, under maintenance or not available.

We can also send notifications directly to the users without using Director for example

So, I thought this would be pretty awesome to test at my current project.

That’s when I started to try to implement it to the test environment of an enterprise customer.

Really fast I found out that the installation, as good as the program might be, won’t be an easy part.

The read me’s made sense, if you were involved in developing the program but starting with an “empty screen” didn’t made it very comfy.

That’s when I decided to contact Rody and write a blog article about how to implement the solution in an enterprise environment.

Rody is a very nice contact who was instant willing to help us get this implemented in the environment. Together we made it and we also fixed issues showing up during the installation which weren’t recognized before. 

So, let’s get it started. As first we need to download the folders from github. We need to start with the Service

GitHub - awl-techniek/AWL-Services-Citrix: Back-end service for Citrix Storefront customization

AWL-Services Citrix

First we need to create and install the service. Therefore an extra Server would be recommended.

We will also need MS Visual Studio with Admin Privileges. It can run on any Server you want.

Please open the project in the folder yourdirectory\Storefront Config AWL\AWL-Services-Citrix-master\AWL-Services-Citrix-master

A few settings need to be made. Expand the tree until you see appsettings.Production and enter  your Storefront Server where it says

https://YOURSTOREFRONTSERVER

The Name of your Store where it says

“Storname” : “CITRIXSTORENAME”

And your Delivery Controller where it says

XenDeksotpMonitorEndpoint

Enter your SQL Server where your Citrix DB is running on in CitrixDBConnectionString

The same you need to do when you click appsettings.Development

Then build the Project. Therefore right click AWL.Citrix.Service and run build

After you press build you’ll find a few new folders in your directory

Enter the build folder and copy the AWL.Services.Console folder

To your C:\Programm files folder on your desired Service Server

Now we need to do some work in our Active Directory.

Create an Account/Service Account  with password never expires which has at least read rights for your XenDesktop Database

Afterwards go back to your Service server and cd to your C:\ProgrammFiles\AWL.Services.Console

Then start the .exe with C:\Windows\Microsoft.NET\Framework64\v4.0.30319\InstallUtil.exe AWL.Services.Console.exe command

You’ll be prompted with a credentials box

where yo need to enter the User we created previously. I would recommend to enter the domain name before the user name

If everything works you’ll get a success message

Afterwards the cmd stays in this position.

Again if the program is not running you’ll find a logfile where you can start troubleshooting

Go to your Services and start it

Uninstall Service

To uninstall cd again back to your folder C\ProgrammFiles\AWL.Service.Console  and execute C:\Windows\Microsoft.NET\Framework64\v4.0.30319\InstallUtil.exe /u AWL.Services.Console.exe

AWL Citrix Proxy

AWL Citrix Receiver Proxy is a simple reverse proxy handler for the Citrix Receiver Web. It forwards the request from the StoreFront page to a static endpoint URL that can be configured in the proxy. With the proxy it's possible to call an internal web service from an external client or from an internal client without dealing with cross-origin HTTP requests.

Installation

After you unzipped your folder navigate to yourlocation\AWL-Citrix-Storefront-master\etc and open AWL.Citrix.sln

and open the project in Visual Studio. This creates the Proxy used by Storefront to contact your back-end service. Expand on the right Site the drop down menu until you reach AWLServiceProxyHandler.ashx.cs

Where it says //SET YOUR SERVER HERE WHERE SERVICES ARE RUNNING you need to insert your Server were you installed the Service

Afterwards build the project

You’ll find a few new folders in your AWL-Citrix-Storefront-master folder. One is called /bin and there under /Debug you’ll find the AWLServiceProxyHandler.ashx

If your Visual Studio is not running on your Storefront (I assume it’s not in an enterprise environment) you need to copy the files to your Storefront. The following steps must then be done on your Storefront Server.

Copy the AWLServiceProxyHandler.ashx to C:\inetpub\wwwroot\Citrix\yourStorefront\Web

The AWL.Citrix.Receiver.Proxy.dll in AWL in your AWL-Citrix-Storefront-master/bin folder must be copied

And stored under C:\inetpub\wwwroot\Citrix\yourStorefrontWeb\bin

Of course, you can change your Endpoint URL if needed. Just edit the EndPointUrl property in AWLServiceProxyHandler.ashx.cs

Configure the Proxy

You can configure the proxy over your custom java script in the Citrix Web Receiver.

Therefore go to C:\inetpub\wwwroot\Citrix\yourstoreweb\custom and there you’ll find script.js

Right click the file and edit it.  Enter following

CTXS.ExtensionAPI.proxyRequest({ url: "AWLServiceProxyHandler.ashx/dashboard" });

The proxy will call (including request headers, cookies and parameters) to the configured endpoint. So calling AWLServiceProxyHandler.ashx/dashboard the proxy will call the following address

http://Servername/Citrix/Dashboard

AWL Citrix Receiver Web

As next and last step we need to configure AWL Citrix Receiver Web which allows us Custom CSS and JavaScript overrides for the Citrix Web Receiver. It has some nice additions for our standard Storefront:

• Additional desktop information
• Connected
• Available desktops
• Under maintenance
• Disconnected with the idle time
• Display custom service messages
• Located in the Notification table in the BrainsDB
• Uses SignalR to push new notifications real-time to the clients (see Citrix Service for the hub)

As first Step before we can start we need to download Node.js if it’s not already installed in your environment. You’ll find it here:

https://nodejs.org/en/

Open the installer and follow the wizard

Accept the License Agreement

Choose a destination folder

We left everything default

Start the installation

Press finish after the installation is complete

Node.js is required to build and bundle the custom CSS and JavaScript.

Now open a command prompt. You need to do npm install first, this will download all the referenced components. With rpm run build it will create the /dist folder and places all the necessary files in it.

So it’s important that your server has full access to the internet. Since this is easier written then done, we will provide the registration files as download (Link von Mathias einfügen). We crashed here too and Rody provided us with the necessary files.

After you opend the command prompt, navigate to yourlocation\AWL-Citrix-Storefront-master\ AWL-Citrix-Storefront-master\src\AWL.Citrix.Receiver.Web

Then enter npm install

This will install all required dependencies.

If you run into an error you will get a message with the informations were you can find the log files. 

You will find it under C\users\youruser\Appdata\Roaming\npm-cache\_logs\date

If you don’t get an error the installation will proceed

Afterwards move the content of /dist folder

To your Storefront C:\inetpub\wwwroot\Citrix\<storename>Web\custom