Thursday, April 10, 2014

TypeScript in First-Class F# Web Projects

I was recently asked about how best to use TypeScript within a pure F# web project. Currently, there are two steps that are needed to make this happen. 

1. Add the TypeScript item template by downloading and installing the latest version of the F# Web Item Templates extension from http://visualstudiogallery.msdn.microsoft.com/f1dae7fe-1ecc-4f1b-86b5-32a2970d012a.


2. Modify your project file to allow the TypeScript files to compile to JavaScript when the project is compiled. To do this, you need to do the following:

- Edit your fsproj file. 

- Add the TypeScriptToolsVersion element and specify the appropriate TypeScript version that you have installed.


- Add 3 new commands to the BeforeBuild target.


- Save and re-open your project. You should now be good to go.



I plan to work on a solution to reduce the pain of step 2 in the near future, so stay tuned...


Tuesday, February 4, 2014

Running D3 in Node.js on Windows without Python

If you do a quick search on running D3 in Node.js, several great examples show up. Once such example is http://mango-is.com/blog/engineering/pre-render-d3-js-charts-at-server-side.html. Unfortunately, the D3 NPM package has a dependency on the jsdom NPM package, which has a dependency on Contextify, which has a dependency on Python and C++. While this isn't that big of a deal, it does add some complexity to getting setup in a Windows environment. Luckily, there is an NPM package named jsdom-nogyp that removes the dependency on Contextify.

Here are the steps to get that previously mentioned example up and running with jsdom-nogyp:

1. Create a directory for your app and add the D3.min.js file to it.

2. Install the jsdom-nogyp NPM package with the command "npm install jsdom-nogyp".

3. Create a new file named test.js and add the following code within it. This code is basically a merge of the original example and the index.js file from the D3 code-base.

4. You can now run the test with the command "node test.js".


Monday, January 13, 2014

A Project Template Wizard Via NuGet

It's hard to believe that more than a month has gone by since the pure F# MVC 5/Web API 2 and pure F# Nancy templates were released. One of the known issues with these templates was that they didn't appear in the Visual Studio Online Templates search. I'm happy to say that this issue has been resolved.


The approach taken to address this issue involved a custom implementation of IWizard and a simple WPF dialog. While I've created several of these in the past, until now it never seemed practical to create anything that could easily be reused.

There is now a NuGet package with ID MultiProjectWizard that can be used to provide multiple templates in a single VSIX without having to give up Online Template search functionality. Here are the steps (Note: These steps assume that you are using SideWaffle, though this NuGet package has no dependency on SideWaffle):

1. Setup your solution as if it were a multi-project template by placing each template in it's own folder with the *.vstemplate file named as MyTemplate.vstemplate. Include an _definitions folder in the parent folder and create a <language>.vstemplate file within it. See https://github.com/fsharp/FSharpCommunityTemplates/tree/master/VisualStudio/Mvc5/TemplatePack/ProjectTemplates/Web for an example of how to setup the folder structure.

2. Make the XML in the _defintiions/<language>.vstemplate file similar to the following and update the TemplateData appropriately.



3.Update the WizardData/Projects child elements appropriately. Each element represents one of the templates that was included in it's own folder in step #1. Here's a description of the attributes for the ProjectInfo element:

  • folderName = This is the name of the folder created in step #1 that is associated with the template. The IWizard implementation will look into this folder and try to find a file with a name of MyTemplate.vstemplate.
  • displayText = This is the text that will display in the WPF window for this particular template.
  • icon = There are two options for icon: "FSharp" and "Generic". If you choose F#, then the icon for that template with include the text "F#", else it will not.  

4. Install the MultiProjectWizard NuGet package. Note: This package includes DLLs such as EnvDTE and EnvDTE80. If your project already includes these DLLs, then you may need to remove the duplicate References after installing this package.

5. Lastly, add the MultiProjectDialog.dll and MultiProjectTemplateWizard.dll files as Assets to the source.extension.manifest file (as an Assembly with "File on filesystem" as the source):


You can now try out your template. If all has gone well, you'll see a screen that looks something like this:


Tuesday, December 31, 2013

Simple.Web and ServiceStack Templates

Back in November I blogged about a new home for the F# community project templates. Since that time there has been a flurry of activity in this new home. Two of the most recent additions include a template for creating Simple.Web apps and one for creating a self-hosted ServiceStack service. Both of these templates were built with the help of SideWaffle.

Simple.Web:

Simple.Web is a REST-focused, object-oriented Web Framework for .NET built by Mark Rendle. James D'Angelo recently published a pure F# template that helps you get started with Simple.Web. You can find it at http://visualstudiogallery.msdn.microsoft.com/bbec75fa-0f31-47e9-a8ce-c301edb2fa4b.


ServiceStack:

ServiceStack is a framework for building simple and fast web services on .NET and Mono. Kunjan Dalal and I recently released a template for kick-starting a self-hosted ServiceStack service. Other ServiceStack template options will be included in this package soon, so stay tuned.


Find Out More:

If you want to learn more about web development with F#, head over to FSharp.org. If you'd like to get involved, clone https://github.com/fsharp/FSharpCommunityTemplates and start hacking. If you're new to SideWaffle, I also recommend watching the introduction video at http://sidewaffle.com/. It's now easier than ever before to create a template with SideWaffle.

As always, feel free to reach to me if you have any questions.

Friday, December 27, 2013

Tuesday, December 17, 2013

Getting Started with Azure, Node.js, and FogJS on Windows

About a month ago I introduced FogJS. On the main FogJS site, there are a couple of code examples that you can use to quickly start interacting with Blob Storage, Table Storage, or the Azure Service Bus. However, if you're new to using Azure from Node.js, then you may be wondering what other steps need to be done to get a dev environment up and running. While you can glean the steps by reading various How-To Guides provided on the Azure site, it can sometimes be helpful to have the process described in a slightly different way. In this post, I'll show you how to quickly get a Windows machine setup to interact with Emulator Table Storage using FogJS. I'll follow a similar structure as the Node.js Getting Started Guide and a few of the steps between this post and that guide overlap. Some of the key differences include the use of a WorkerRole rather than a WebRole, the use of the emulator, and of course the use of FogJS.

Setting up Your Windows Machine:

1. Install Node.js from http://nodejs.org/.
2. Install the Windows Azure SDK for Node.js (this may require a reboot).
3. Open a PowerShell command prompt and navigate to the parent location at which you wish to create a project. I'll use c:\Temp for this example.


4. Run the following command to create a couple of starter files for your project (note: FogJSExample should be replaced with the name of the project that you wish to create).

New-AzureServiceProject FogJSExample



6. Navigate to the FogJSExample directory and install FogJS with the command:

npm install fogjs



5. Create a worker role with the following command (note: TableStorageWorker should be replaced with the name of the worker that you wish to create).

Add-AzureNodeWorkerRole TableStorageWorker


7. Navigate to the TableStorageWorker directory, edit the server.js file, and replace the text within it with the following:

8. Set your environment to use the Azure Storage Emulator for Table Storage with the following command (note: You can verify that this command is set with the command ls env:EMULATED).

$env:EMULATED = "true"


9. Run the following command to start the Azure Emulator (note: The emulator does not support Service Bus interaction. For working with Azure Service Bus, you will need to setup environment variables as defined here).

Start-AzureEmulator


10. Open a browser and navigate to http://localhost:81. This will cause a request to go to your Node service. When that request is received, a record is created in Table storage, then retrieved and used to populate the output that will be displayed, and finally deleted.


That's all there is to it. You can find the source for FogJS on my GitHub.

Sunday, December 8, 2013

A Few Other Template Additions and Changes of Interest

As you've probably noticed, there has been a lot of recent activity around the F# templates that have been created by various members of the F# community (here are some recent posts on some of this activity: MVC 5 Templates and F# Web Item Templates). I wanted to point out a few other new or updated templates that may be of interest to you.

Nancy Templates:

There are now 9 first-class F# Nancy templates available on Visual Studio Gallery. Here's a screenshot of what it looks like once the F# Nancy Templates package is installed:


MSTest Project Template:

We've added an AfterBuild step with the help of the MSBuild Extension Pack to the MSTest Project Template so that binding redirects are appropriately handled in both VS2012 and VS2013.

FSharpTest Template:

Jack Fox has updated his FSharpTest template to support VS2013 in addition to the previously supported VS2012. You can read more information about the FSharpTest template at http://jackfoxy.com/fsharptest/.