tag:blogger.com,1999:blog-48538777302134594302024-03-14T05:09:22.084-07:00Random Ravings of a Red Headed Code MonkeyDaniel Mohlhttp://www.blogger.com/profile/17462870714458080019noreply@blogger.comBlogger176125tag:blogger.com,1999:blog-4853877730213459430.post-32725238350820368212021-03-05T03:12:00.000-08:002021-03-05T03:12:33.568-08:00.NET Interactive in GCP AI Platform Notebooks via a Container<p>In <a href="http://bloggemdano.blogspot.com/2021/02/f-on-gcp-ai-platform-notebooks.html">my last post</a>, I showed how to setup F#, C#, and PowerShell within Google Cloud AI Platform Notebooks using a manual approach. Another option is to create a notebooks instance from a container that includes .NET Interactive pre-installed.</p><p>To accomplish this, do the following:</p><p>1. Enable applicable GCP APIs (Cloud Build, Artifact Registry, AI Platform Notebooks, etc.), if they are not already enabled.</p><p>2. Open the GCP Cloud Shell Terminal.</p><p>3. In Cloud Shell, create a file named Dockerfile (e.g. nano Dockerfile), copy/paste the following into the file, and save.</p><script src="https://gist.github.com/dmohl/d09fc2704621c873c44129f2ad60a53d.js"></script><p>4. Build the container with a command such as the following (Note: Replace the “REPLACE_WITH_PROJECT_ID” placeholder with your GCP Project ID):</p><script src="https://gist.github.com/dmohl/c0baab54613fd75eda777319a71414d3.js"></script><p>5. Create a new Notebooks instance via gcloud or the AI Platform Notebooks console. Note: Replace the “REPLACE_WITH_PROJECT_ID” placeholder with your GCP Project ID.</p><script src="https://gist.github.com/dmohl/3e50ea69c3d31288b3e955c3f4193fb0.js"></script><p>6. Once the notebook instance is created, open JupyterLab and F#, C#, & PowerShell options will be available.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgckYQItDsrGySSeVTIBy2YZgzIq9kkY43WnsnBtkv4ebZye76Xst5wQVGvw83xzAWUf6lXae3Jy33Y-naCOLUSqZ7_caixX4F7OQX-mBD9sZZGzFat6KAgnp-6uYVln5Y-Zx5grngqtA/s1134/Launcher.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="658" data-original-width="1134" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgckYQItDsrGySSeVTIBy2YZgzIq9kkY43WnsnBtkv4ebZye76Xst5wQVGvw83xzAWUf6lXae3Jy33Y-naCOLUSqZ7_caixX4F7OQX-mBD9sZZGzFat6KAgnp-6uYVln5Y-Zx5grngqtA/s320/Launcher.PNG" width="320" /></a></div><br /><p><br /></p><div><br /></div>Daniel Mohlhttp://www.blogger.com/profile/17462870714458080019noreply@blogger.com0tag:blogger.com,1999:blog-4853877730213459430.post-54423052367281941462021-02-15T17:58:00.002-08:002021-02-15T18:55:15.055-08:00F# on GCP AI Platform Notebooks<p>In <a href="http://bloggemdano.blogspot.com/2021/02/f-in-google-colab-notebooks.html" target="_blank">my last post</a>, I showed how to use F# in Google Colab via installation of .NET Interactive. </p><p>Today I'll walk you through how to wire up .NET Interactive within Google Cloud AI Platform Notebooks. AI Platform Notebooks provides secure, managed JupyterLab instances. This combined with .NET Interactive enables a first class experience in AI Platform Notebooks for F#, C#, and PowerShell.</p><p><b>Setting up GCP AI Platform Notebooks</b></p><p>1. Log into Google Cloud Console and open AI Platform (Unified)</p><p>2. Select Notebooks in the left nav</p><p>3. Create a new instance with Python 3 as the base.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLASb1r4fkIWe_5_zUmzfSBjAyVxrvTlhd-723X3l3yiAVnlPQVDXjEAedVXxTSLGXHxGI3QJByDkCznE1vyCo_xXLlhp14paw7g72jC5-h-7SRKABA3VVZB-CM0SxyDCmBbbl_p1Vbw/s767/New+Instance.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="692" data-original-width="767" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLASb1r4fkIWe_5_zUmzfSBjAyVxrvTlhd-723X3l3yiAVnlPQVDXjEAedVXxTSLGXHxGI3QJByDkCznE1vyCo_xXLlhp14paw7g72jC5-h-7SRKABA3VVZB-CM0SxyDCmBbbl_p1Vbw/s320/New+Instance.PNG" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><p>4. Once the instance creation process finishes, click the OPEN JUPYTERLAB button.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8NMRvsxKqjW3fiDqC32bOs20PXx5YCrcRfzDtj2LiTKX0u0mBUaUu-yTZB24YPGa97LXfAbzZqUlw5ADdaFrkPugL3zCpSM6Q7lKjDhm86M-0Vm_2GwEGBLGTBddIPkwFF_EiPhXnfQ/s1902/Open+JupyterLab.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="550" data-original-width="1902" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8NMRvsxKqjW3fiDqC32bOs20PXx5YCrcRfzDtj2LiTKX0u0mBUaUu-yTZB24YPGa97LXfAbzZqUlw5ADdaFrkPugL3zCpSM6Q7lKjDhm86M-0Vm_2GwEGBLGTBddIPkwFF_EiPhXnfQ/s320/Open+JupyterLab.PNG" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><p>5. Open a terminal from the Launcher.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyxJkgs0XEkR5DvEf_Og9jz2uO2c5gpKDekHBQrULMlyKsWCjhnip9G_16-4QQPnGg-5LDa5Owrlp0EwfZVxxSMYKzLyUkBpgmVObzwGUYDF1JeOMTtnouRoSN7ahRRHKStz8o7ejwdQ/s1334/OpenJupyterLabTerminal.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="728" data-original-width="1334" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyxJkgs0XEkR5DvEf_Og9jz2uO2c5gpKDekHBQrULMlyKsWCjhnip9G_16-4QQPnGg-5LDa5Owrlp0EwfZVxxSMYKzLyUkBpgmVObzwGUYDF1JeOMTtnouRoSN7ahRRHKStz8o7ejwdQ/s320/OpenJupyterLabTerminal.PNG" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><p>6. In the terminal, run the following to install the .NET SDK:</p><script src="https://gist.github.com/dmohl/8103b0a1044cb29c799bf982a33a914a.js"></script><p>7. Now install .NET Interactive with the following:</p><script src="https://gist.github.com/dmohl/2fbf07b94fda2876bee0adba1c2b981f.js"></script><p>8. Close the terminal window and JupyterLabs.</p><p>9. In GCP AI Platform Notebooks, reset the instance.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRuR2LaGe1w_eZrmqBDzM1RnVC6BtNR2drHACbe9kDoKglLIwpYo3vGVHI9SifyXdoXG8jKOpQf02V1t2W5FW6AyBfQky9_-EHIrfcpZ65nanVxNmtfPM3JcOFddicSMz2KZf8c8wosQ/s1899/ResetInstance.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="614" data-original-width="1899" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRuR2LaGe1w_eZrmqBDzM1RnVC6BtNR2drHACbe9kDoKglLIwpYo3vGVHI9SifyXdoXG8jKOpQf02V1t2W5FW6AyBfQky9_-EHIrfcpZ65nanVxNmtfPM3JcOFddicSMz2KZf8c8wosQ/s320/ResetInstance.PNG" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><p><b>Launching .NET Notebooks</b></p><p>Now that the initial setup steps are complete, the launcher in JupyterLab will include F#, C#, and PowerShell notebook options.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAn_9E369fnf8qzHkx9n78q1CP1lMSrCHDnkMIhsRt5hyphenhyphenib_Ss-LvGXVEgYr1HhwHR0IuBzMTLJuFxykJzkdK161c1fqoOO3BoaNBjDzdNElXl-VCaCMnLSzAMM0x6mUMPk90bHEWl0g/s1134/Launcher.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="658" data-original-width="1134" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAn_9E369fnf8qzHkx9n78q1CP1lMSrCHDnkMIhsRt5hyphenhyphenib_Ss-LvGXVEgYr1HhwHR0IuBzMTLJuFxykJzkdK161c1fqoOO3BoaNBjDzdNElXl-VCaCMnLSzAMM0x6mUMPk90bHEWl0g/s320/Launcher.PNG" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div>A simple F# Notebook example is below:</div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbFA4FUq96rKfLDg_Hlw-covUUdlJLFOiAMT7NukYpR3ULIMJEm1RfLYptyu1JHAphpsJxaevX6qqiZ16Ku4MaXW-zFQ1eUGa9hO6BWfhpJUclr54TBmmr8EIBobktPiEtZg4LR8VS2Q/s1856/FSharpNotebook.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="738" data-original-width="1856" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbFA4FUq96rKfLDg_Hlw-covUUdlJLFOiAMT7NukYpR3ULIMJEm1RfLYptyu1JHAphpsJxaevX6qqiZ16Ku4MaXW-zFQ1eUGa9hO6BWfhpJUclr54TBmmr8EIBobktPiEtZg4LR8VS2Q/s320/FSharpNotebook.PNG" width="320" /></a></div><br /><p><br /></p><p><br /></p>Daniel Mohlhttp://www.blogger.com/profile/17462870714458080019noreply@blogger.com0tag:blogger.com,1999:blog-4853877730213459430.post-10098311257005099172021-02-07T11:05:00.000-08:002021-02-07T11:05:15.840-08:00F# in Google Colab Notebooks<div><b>.NET Interactive</b></div><div><br /></div><a href="https://github.com/dotnet/interactive" target="_blank">.NET Interactive</a> is a tool provided by Microsoft which among other things makes it easy to use .NET (C#, F#, and PowerShell) in Jupyter Notebooks.<div><br /></div><div><b>Google Colab</b></div><div><br /></div><div>Google Colab is a free, cloud hosted Jupyter notebook environment that includes access to GPUs. The Colab environment provides kernels for R, Python 2, Python 3, and Swift by default.</div><div><br /></div><div><b>F# on Colab</b></div><div><br /></div><div>Colab doesn't currently offer a streamlined option for adding additional kernels. However, enabling .NET via .NET Interactive is relatively easy to accomplish.</div><div><br /></div><div>1. In <a href="https://colab.research.google.com/" target="_blank">Colab</a> upload an IPython Notebook (*.ipynb) file that includes the kernelspec set to ".net-fsharp"</div><div><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2IsGkKWJsvTYUrvyIlPzTDaFcqXkZsTNP-cSOcFO4nYbegLhgoviDSk0J8P2I0MdUUOyxDhdbyqnttEHyRNIfiVPerizne40jpK2Nyt_xeaznXQVR3E4KBb4a0SWhoAgnGkoWjxrTRg/s343/Kernelspec.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="106" data-original-width="343" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2IsGkKWJsvTYUrvyIlPzTDaFcqXkZsTNP-cSOcFO4nYbegLhgoviDSk0J8P2I0MdUUOyxDhdbyqnttEHyRNIfiVPerizne40jpK2Nyt_xeaznXQVR3E4KBb4a0SWhoAgnGkoWjxrTRg/s320/Kernelspec.PNG" width="320" /></a></div><div><br /></div><div>2. Execute code to install the .NET SDK and .NET Interactive. Wait for all steps to complete. Note: A message will appear indicating that .net-fsharp is an unrecognized runtime. This can be ignored.</div><div><br /></div><div>3. In the Colab File menu, select "Runtime" -> "Change runtime type" then "Save" on the resulting popup window.</div><div><br /></div><div>4. You can now execute F# in new code cells. </div><div><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7F8y1Yq4JARr6AxuwoNDtDGl253h8PpAZFXjYcddKYD5e2C4uZB30VqzuuFQGUPCrEWuN74MbY-0PBt62_zUPDhJrVNKqL6db4f1zxWgypbLdBBxONrk1iVvYXfqmU2uAb5lsrXlang/s1129/FsharpOnColab.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="714" data-original-width="1129" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7F8y1Yq4JARr6AxuwoNDtDGl253h8PpAZFXjYcddKYD5e2C4uZB30VqzuuFQGUPCrEWuN74MbY-0PBt62_zUPDhJrVNKqL6db4f1zxWgypbLdBBxONrk1iVvYXfqmU2uAb5lsrXlang/s320/FsharpOnColab.PNG" width="320" /></a></div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;">A <a href="https://colab.research.google.com/gist/dmohl/b416672f958a558dbd3a0920bd818d57/fsharp_colab_example.ipynb" target="_blank">Gist</a> with the full example is below:</div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;"><br /></div><script src="https://gist.github.com/dmohl/b416672f958a558dbd3a0920bd818d57.js"></script>Daniel Mohlhttp://www.blogger.com/profile/17462870714458080019noreply@blogger.com0tag:blogger.com,1999:blog-4853877730213459430.post-62227004706870894352014-11-30T19:34:00.000-08:002014-11-30T19:34:49.444-08:00Evolution of the F# Empty WPF TemplateBack in March 2012, <a href="http://bloggemdano.blogspot.com/2012/03/nice-addition-to-empty-wpf-f-template.html">I announced that the F# Empty WPF project template had been enhanced to include a type provider</a> from the FSharpx type providers collection. Today, another evolution of the F# Empty WPF template has occurred. The FSharpx.TypeProviders.Xaml type provider has been replaced with Reed Copsey's <a href="http://www.nuget.org/packages/FsXaml.Wpf/">FsXaml for WPF</a> type provider. <br />
<br />
<b>Building a Simple Example:</b><br />
<br />
It's very easy to get started with the latest version of the template as well as FsXaml. Here the steps to create an overly simple example with the new version of the template, FxXaml and FSharp.ViewModule.Core (which is also inclueded in the template):<br />
<br />
1. Create a new project with the latest version of the <a href="https://visualstudiogallery.msdn.microsoft.com/e0907c99-bb04-4eb8-9692-9333d5ff4399">F# Empty Windows App (WPF)</a> template.<br />
2. Build the project and Enable the type provider when requested to do so. You can now run the project, which at this point simply displays a blank screen.<br />
3. Open the MainWindow.xaml.fs file and replace the contents with the following:<br />
<br />
<script src="https://gist.github.com/dmohl/01d1448a902f2c6d83cc.js"></script><br />
4. Open the MainWindow.xaml file add the following to the Grid element:<br />
<br />
<script src="https://gist.github.com/dmohl/e8df4e5525c5c4ca94c2.js"></script><br />
After this change, the MainWindow.xaml file will look something like the following with one small different depending on what you named your project:<br />
<br />
<script src="https://gist.github.com/dmohl/c6b7855b1cb6bfb4cfee.js"></script><br />
For additional examples checkout the <a href="https://github.com/fsprojects/FsXaml/tree/master/demos">demos in the FsXaml GitHub repo</a>. <br />
<br />Daniel Mohlhttp://www.blogger.com/profile/17462870714458080019noreply@blogger.com4tag:blogger.com,1999:blog-4853877730213459430.post-76600022677259315132014-11-02T07:26:00.000-08:002014-11-02T13:01:54.715-08:00New Project Templates in the F# MVC 5 PackageThere is a new version of the <a href="https://visualstudiogallery.msdn.microsoft.com/39ae8dec-d11a-4ac9-974e-be0fdadec71b">F# MVC 5 VSIX</a> that contains two new templates (built by Ryan Riley) to get you started with web projects built on Owin and Katana: Web API 2.2 and Katana 3.0 and Web API 2.2 and Katana 3.0 (Empty).<br />
<br />
To use these new templates, simply install the latest version of the package and create a new project.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEion2igXGbyx83Ie00agRu3iTxXjRc3NIi6OUBOfwi4ZnRkf5Nb-jOB62EK1KQxIvA4Rpsak1dzxBPuMdY1XUSlSxUfXv0VunRDwAi2MVI32DMH7A3UB9Nam6oxnu5-e0EIJ4arNSd-Tg/s1600/Mvc5Katana_NewProject.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEion2igXGbyx83Ie00agRu3iTxXjRc3NIi6OUBOfwi4ZnRkf5Nb-jOB62EK1KQxIvA4Rpsak1dzxBPuMdY1XUSlSxUfXv0VunRDwAi2MVI32DMH7A3UB9Nam6oxnu5-e0EIJ4arNSd-Tg/s1600/Mvc5Katana_NewProject.PNG" height="438" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglcWeuP1kJDQ1SI-5tSPZiHP7g8ZieRJPGAz8JGnktmkTcD1Xnkhfposw7IXUfUF0ivXhI7lHvjgTq-aDAiybe7p2507YhEEMHW6oRY1kV5sswO_7-2KagfKdeAazNFjqiEEanYs9vtA/s1600/Mvc5Katana.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglcWeuP1kJDQ1SI-5tSPZiHP7g8ZieRJPGAz8JGnktmkTcD1Xnkhfposw7IXUfUF0ivXhI7lHvjgTq-aDAiybe7p2507YhEEMHW6oRY1kV5sswO_7-2KagfKdeAazNFjqiEEanYs9vtA/s1600/Mvc5Katana.PNG" height="420" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
Daniel Mohlhttp://www.blogger.com/profile/17462870714458080019noreply@blogger.com0tag:blogger.com,1999:blog-4853877730213459430.post-83723016437265859412014-07-14T03:52:00.001-07:002014-07-14T03:52:49.353-07:00Improvements to the F# Web Templates<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
There has been quite a bit of activity with various F# web templates over the last few months. This post will cover several of these activities.<br />
<br />
<b>ServiceStack Templates:</b><br />
<br />
<a href="https://twitter.com/kunjee">Kunjan Dalal</a> and I have released version 2 of the ServiceStack templates. This version includes 4 new templates that target version 4 of ServiceStack. You can find the latest at <a href="http://visualstudiogallery.msdn.microsoft.com/278caff1-917a-4ac1-a552-e5a2ce0f6e1f">http://visualstudiogallery.msdn.microsoft.com/278caff1-917a-4ac1-a552-e5a2ce0f6e1f</a>.<br />
<br />
<b>MVC 5 Templates:</b><br />
<br />
There are now 2 new "empty" templates available in the latest release of the package available at <a href="http://visualstudiogallery.msdn.microsoft.com/39ae8dec-d11a-4ac9-974e-be0fdadec71b">http://visualstudiogallery.msdn.microsoft.com/39ae8dec-d11a-4ac9-974e-be0fdadec71b</a>. There have also been several fixes and enhancements provided by various members of the F# community.<br />
<br />
- <a href="https://github.com/PatrickMcDonald">Patrick McDonald</a> improved the default serialization of the MVC5 and Web API templates so that an "@" character is no not appended to the end of JSON property names.<br />
- Functionality has been added to appropriately handle cancellation of a template creation request<br />
- The necessary changes have been made to allow NuGet restore to work for projects created from this template<br />
<br />
<b>Web Item Templates: </b><br />
<br />
Last but not least, the Web Item Templates have been enhanced to support <a href="http://blogs.msdn.com/b/fsharpteam/archive/2014/01/22/announcing-visual-f-3-1-1-and-support-for-desktop-express.aspx">Visual Studio Express 2013 for Web</a>.Daniel Mohlhttp://www.blogger.com/profile/17462870714458080019noreply@blogger.com1tag:blogger.com,1999:blog-4853877730213459430.post-6244456377363171872014-04-21T09:29:00.001-07:002014-04-21T09:29:48.289-07:00F# Support for Web ProjectsIn December of last year, I announced a few templates that made it easy to create pure-F# MVC 5 and Web API 2 projects in Visual Studio 2012 and 2013. In a parallel stream, the F# team was working closely with the F# community to improve the F# web development experience by adding features such as publish-to-web. It's exciting to see that this great work is now available as a <a href="https://visualfsharp.codeplex.com/releases/view/120412">Visual F# Tools Preview</a>. You can read more about this at <a href="http://blogs.msdn.com/b/fsharpteam/archive/2014/04/06/towards-web-project-support-in-the-visual-f-tools.aspx">http://blogs.msdn.com/b/fsharpteam/archive/2014/04/06/towards-web-project-support-in-the-visual-f-tools.aspx</a>. This, as well as the <a href="http://blogs.msdn.com/b/fsharpteam/archive/2014/04/03/facilitating-open-contributions-for-the-f-compiler-library-and-visual-f-tools.aspx">recent announcement regarding the acceptance of contributions to the Visual F# Tools</a>, is a huge step forward in the evolution of web development with F#.<br />
<br />
<br />Daniel Mohlhttp://www.blogger.com/profile/17462870714458080019noreply@blogger.com0tag:blogger.com,1999:blog-4853877730213459430.post-6088258136401449332014-04-10T16:33:00.000-07:002014-04-10T16:33:50.225-07:00TypeScript in First-Class F# Web Projects<span style="font-family: HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 13px;">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. </span><br />
<div id="yui_3_13_0_8_1397165306712_35" style="font-family: HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 13px; margin-bottom: 0.1em; margin-top: 0.1em; padding: 0px;">
<br /></div>
<div id="yui_3_13_0_8_1397165306712_35" style="font-family: HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 13px; margin-bottom: 0.1em; margin-top: 0.1em; padding: 0px;">
1. Add the TypeScript item template by downloading and installing the latest version of the F# Web Item Templates extension from <a href="http://visualstudiogallery.msdn.microsoft.com/f1dae7fe-1ecc-4f1b-86b5-32a2970d012a">http://visualstudiogallery.msdn.microsoft.com/f1dae7fe-1ecc-4f1b-86b5-32a2970d012a</a>.</div>
<div id="yui_3_13_0_8_1397165306712_35" style="font-family: HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 13px; margin-bottom: 0.1em; margin-top: 0.1em; padding: 0px;">
<span id="yui_3_13_0_8_1397165306712_78"><br id="yui_3_13_0_8_1397165306712_84" /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFozSp4KV2OtU4hYJdOoSAPx6jmPQXoRNyUeySw_LkKCLqZh7MMRXaZp_ohuhoZExEJEtTYZeJDpf9JZcb_hi5mzgj0HgLtaH1Oc6N3B4da0M5-HwrjjmTH_xKExqU9tqydktj2TbpFA/s1600/TypeScriptItemTemplate.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFozSp4KV2OtU4hYJdOoSAPx6jmPQXoRNyUeySw_LkKCLqZh7MMRXaZp_ohuhoZExEJEtTYZeJDpf9JZcb_hi5mzgj0HgLtaH1Oc6N3B4da0M5-HwrjjmTH_xKExqU9tqydktj2TbpFA/s1600/TypeScriptItemTemplate.PNG" height="276" width="400" /></a></div>
<div id="yui_3_13_0_8_1397165306712_35" style="font-family: HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 13px; margin-bottom: 0.1em; margin-top: 0.1em; padding: 0px;">
<br /></div>
<div id="yui_3_13_0_8_1397165306712_35" style="font-family: HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 13px; margin-bottom: 0.1em; margin-top: 0.1em; padding: 0px;">
<span id="yui_3_13_0_8_1397165306712_90">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:</span></div>
<div id="yui_3_13_0_8_1397165306712_35" style="font-family: HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 13px; margin-bottom: 0.1em; margin-top: 0.1em; padding: 0px;">
<span id="yui_3_13_0_8_1397165306712_100"><br id="yui_3_13_0_8_1397165306712_102" /></span></div>
<div id="yui_3_13_0_8_1397165306712_35" style="font-family: HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 13px; margin-bottom: 0.1em; margin-top: 0.1em; padding: 0px;">
<span id="yui_3_13_0_8_1397165306712_95">- Edit your fsproj file. </span></div>
<div id="yui_3_13_0_8_1397165306712_35" style="font-family: HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 13px; margin-bottom: 0.1em; margin-top: 0.1em; padding: 0px;">
<br /></div>
<div id="yui_3_13_0_8_1397165306712_35" style="font-family: HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 13px; margin-bottom: 0.1em; margin-top: 0.1em; padding: 0px;">
<span id="yui_3_13_0_8_1397165306712_104">- Add the TypeScriptToolsVersion element and specify the appropriate TypeScript version that you have installed</span>.</div>
<div id="yui_3_13_0_8_1397165306712_35" style="font-family: HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 13px; margin-bottom: 0.1em; margin-top: 0.1em; padding: 0px;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs6X51fEZ8lQnF37aoi4hzimxIiPsyyz67SJ6UXd8Zsdthbkq-B3QanSCXyiEh5qkxDVJxWtxkGfhc2chEDFlTifUpoMcfT3Br63B-LbeXWagT8_f4DKRC0vuqth1ASgA7LLq5oJM8_g/s1600/TypeScriptProj1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs6X51fEZ8lQnF37aoi4hzimxIiPsyyz67SJ6UXd8Zsdthbkq-B3QanSCXyiEh5qkxDVJxWtxkGfhc2chEDFlTifUpoMcfT3Br63B-LbeXWagT8_f4DKRC0vuqth1ASgA7LLq5oJM8_g/s1600/TypeScriptProj1.PNG" height="270" width="640" /></a></div>
<div id="yui_3_13_0_8_1397165306712_35" style="font-family: HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 13px; margin-bottom: 0.1em; margin-top: 0.1em; padding: 0px;">
<br /></div>
<div id="yui_3_13_0_8_1397165306712_35" style="font-family: HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 13px; margin-bottom: 0.1em; margin-top: 0.1em; padding: 0px;">
<span id="yui_3_13_0_8_1397165306712_108">- Add 3 new commands to the BeforeBuild target.</span></div>
<div id="yui_3_13_0_8_1397165306712_35" style="font-family: HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 13px; margin-bottom: 0.1em; margin-top: 0.1em; padding: 0px;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimHrwUDjfAYQ4KuNkYVT-P1LSC_J2Ml21ruDdkJ2zrsIFTBtkJAZn92sSKl8PTs_EW8tb5MtMlE5WnVo2siRkk29MKp4bB4aVQkiZbTPnz5yiApdFSIFprM5eW7d8vdsPzWjXBfNcp5Q/s1600/TypeScriptProj2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimHrwUDjfAYQ4KuNkYVT-P1LSC_J2Ml21ruDdkJ2zrsIFTBtkJAZn92sSKl8PTs_EW8tb5MtMlE5WnVo2siRkk29MKp4bB4aVQkiZbTPnz5yiApdFSIFprM5eW7d8vdsPzWjXBfNcp5Q/s1600/TypeScriptProj2.PNG" height="252" width="640" /></a></div>
<div id="yui_3_13_0_8_1397165306712_35" style="font-family: HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 13px; margin-bottom: 0.1em; margin-top: 0.1em; padding: 0px;">
<br /></div>
<div id="yui_3_13_0_8_1397165306712_35" style="font-family: HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 13px; margin-bottom: 0.1em; margin-top: 0.1em; padding: 0px;">
<span id="yui_3_13_0_8_1397165306712_123">- Save and re-open your project. You should now be good to go.</span></div>
<div id="yui_3_13_0_8_1397165306712_35" style="font-family: HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 13px; margin-bottom: 0.1em; margin-top: 0.1em; padding: 0px;">
<br /></div>
<div id="yui_3_13_0_8_1397165306712_35" style="font-family: HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 13px; margin-bottom: 0.1em; margin-top: 0.1em; padding: 0px;">
<br /></div>
<div id="yui_3_13_0_8_1397165306712_35" style="font-family: HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 13px; margin-bottom: 0.1em; margin-top: 0.1em; padding: 0px;">
<br /></div>
<div id="yui_3_13_0_8_1397165306712_35" style="font-family: HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 13px; margin-bottom: 0.1em; margin-top: 0.1em; padding: 0px;">
I plan to work on a solution to reduce the pain of step 2 in the near future, so stay tuned...</div>
<div id="yui_3_13_0_8_1397165306712_35" style="font-family: HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 13px; margin-bottom: 0.1em; margin-top: 0.1em; padding: 0px;">
<br /></div>
<div id="yui_3_13_0_8_1397165306712_35" style="font-family: HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 13px; margin-bottom: 0.1em; margin-top: 0.1em; padding: 0px;">
<br /></div>
Daniel Mohlhttp://www.blogger.com/profile/17462870714458080019noreply@blogger.com5tag:blogger.com,1999:blog-4853877730213459430.post-37111364223960241802014-02-04T05:21:00.000-08:002014-02-04T05:21:34.978-08:00Running 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 <a href="http://mango-is.com/blog/engineering/pre-render-d3-js-charts-at-server-side.html">http://mango-is.com/blog/engineering/pre-render-d3-js-charts-at-server-side.html</a>. 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.<br />
<br />
Here are the steps to get that <a href="http://mango-is.com/blog/engineering/pre-render-d3-js-charts-at-server-side.html">previously mentioned example</a> up and running with jsdom-nogyp:<br />
<br />
1. Create a directory for your app and add the D3.min.js file to it.<br />
<br />
2. Install the jsdom-nogyp NPM package with the command "npm install jsdom-nogyp".<br />
<br />
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 <a href="https://github.com/mbostock/d3/blob/master/index.js">index.js</a> file from the D3 code-base.<br />
<br />
<script src="https://gist.github.com/dmohl/8690440.js"></script>
4. You can now run the test with the command "node test.js".<br />
<br />
<br />Daniel Mohlhttp://www.blogger.com/profile/17462870714458080019noreply@blogger.com2tag:blogger.com,1999:blog-4853877730213459430.post-13796712945727210922014-01-13T12:16:00.000-08:002014-01-13T12:16:07.405-08:00A Project Template Wizard Via NuGetIt's hard to believe that more than a month has gone by since the <a href="http://bloggemdano.blogspot.com/2013/12/a-new-f-aspnet-mvc-5-and-web-api-2.html">pure F# MVC 5/Web API 2 and pure F# Nancy templates</a> 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.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcHam_u64MWkiYJFv6xpxfu58w0MfJvfeZBkVuGzVz8RhfJffia8fO1KUNd8le1MN9q06Fx3-GPTcnEXhKjNUJPfGmx84erWXYLxqjcnrQM5QYzuKslWfJayETDUNc2BxPxBFuyYuB3w/s1600/VsOnlineSearch.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcHam_u64MWkiYJFv6xpxfu58w0MfJvfeZBkVuGzVz8RhfJffia8fO1KUNd8le1MN9q06Fx3-GPTcnEXhKjNUJPfGmx84erWXYLxqjcnrQM5QYzuKslWfJayETDUNc2BxPxBFuyYuB3w/s1600/VsOnlineSearch.PNG" height="444" width="640" /></a></div>
<br />
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.<br />
<br />
There is now a <a href="https://www.nuget.org/packages/MultiProjectWizard/">NuGet package with ID MultiProjectWizard</a> 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 <a href="https://github.com/ligershark/side-waffle">SideWaffle</a>, though this NuGet package has no dependency on SideWaffle):<br />
<br />
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 <a href="https://github.com/fsharp/FSharpCommunityTemplates/tree/master/VisualStudio/Mvc5/TemplatePack/ProjectTemplates/Web">https://github.com/fsharp/FSharpCommunityTemplates/tree/master/VisualStudio/Mvc5/TemplatePack/ProjectTemplates/Web</a> for an example of how to setup the folder structure.<br />
<br />
2. Make the XML in the _defintiions/<language>.vstemplate file similar to the following and update the TemplateData appropriately.<br />
<br />
<br />
<script src="https://gist.github.com/dmohl/8192803.js"></script><br />
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:<br />
<br />
<ul>
<li>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.</li>
<li>displayText = This is the text that will display in the WPF window for this particular template.</li>
<li>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. </li>
</ul>
<br />
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.<br />
<br />
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):<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirR5mEpKZ6w4ZGgbUPGz9aPe97kumLZ9d6TU47qXzCq9Aw0x-2WnoOTuBJvvQoc0xpFbCNR9dDu2WDhsZt_p4v856krhch_CiPNm3fPteE34CGOAQ0TofnzI5kYwi10LGEmNmKr9f0Pw/s1600/Assets.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirR5mEpKZ6w4ZGgbUPGz9aPe97kumLZ9d6TU47qXzCq9Aw0x-2WnoOTuBJvvQoc0xpFbCNR9dDu2WDhsZt_p4v856krhch_CiPNm3fPteE34CGOAQ0TofnzI5kYwi10LGEmNmKr9f0Pw/s1600/Assets.PNG" height="252" width="640" /></a></div>
<br />
You can now try out your template. If all has gone well, you'll see a screen that looks something like this:<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdz6tabZ3NcXQKvZJNKqoXGdb7Y421Qpc4PRjAol2BkW8_izgZInZuvo2V1yykXDMgmrF1yooLXqYLYVbDYLj9OCf5ieef8NwV-05uYl1mwioRBptDFZAo9TmGMt5XlDdRCooAgmwGtg/s1600/MultiProjectWizard.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdz6tabZ3NcXQKvZJNKqoXGdb7Y421Qpc4PRjAol2BkW8_izgZInZuvo2V1yykXDMgmrF1yooLXqYLYVbDYLj9OCf5ieef8NwV-05uYl1mwioRBptDFZAo9TmGMt5XlDdRCooAgmwGtg/s1600/MultiProjectWizard.png" height="212" width="320" /></a></div>
<br />Daniel Mohlhttp://www.blogger.com/profile/17462870714458080019noreply@blogger.com8tag:blogger.com,1999:blog-4853877730213459430.post-75639544414563879352013-12-31T04:12:00.001-08:002014-01-03T07:33:38.526-08:00Simple.Web and ServiceStack TemplatesBack in November I blogged about <a href="http://bloggemdano.blogspot.com/2013/11/a-new-home-for-f-community-project.html">a new home for the F# community project templates</a>. 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 <a href="http://sidewaffle.com/">SideWaffle</a>.<br />
<br />
<b>Simple.Web:</b><br />
<br />
<a href="https://github.com/markrendle/Simple.Web">Simple.Web</a> is a REST-focused, object-oriented Web Framework for .NET built by <a href="https://twitter.com/markrendle">Mark Rendle</a>. <a href="https://twitter.com/jjvdangelo">James D'Angelo</a> recently published a pure F# template that helps you get started with Simple.Web. You can find it at <a href="http://visualstudiogallery.msdn.microsoft.com/bbec75fa-0f31-47e9-a8ce-c301edb2fa4b">http://visualstudiogallery.msdn.microsoft.com/bbec75fa-0f31-47e9-a8ce-c301edb2fa4b</a>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTyJVA2AFpwp9OlD5Mk9eRcVm7J8rRTsKyfRySqRs1xT3wtdbVt6v5MAa5HFgJ3hJFpDQ2tOSE8pK9GO_HYnBTXwAr_UXGiPz5ggH4gzQMbcl4ygJyJ1nwpQIqgK27n4waOIsd_1T4EA/s1600/SimpleWeb.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTyJVA2AFpwp9OlD5Mk9eRcVm7J8rRTsKyfRySqRs1xT3wtdbVt6v5MAa5HFgJ3hJFpDQ2tOSE8pK9GO_HYnBTXwAr_UXGiPz5ggH4gzQMbcl4ygJyJ1nwpQIqgK27n4waOIsd_1T4EA/s1600/SimpleWeb.PNG" height="388" width="640" /></a></div>
<br />
<b>ServiceStack:</b><br />
<br />
<a href="https://servicestack.net/">ServiceStack</a> is a framework for building simple and fast web services on .NET and Mono. <a href="https://twitter.com/kunjee">Kunjan Dalal</a> 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.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHCQBn52PKkGBunbRip404nGWL9pXDbNYvOzGCdfAutpuuu8bFr_b8VrI-fwHrTe51d8oCgcOk_LP9lta1NpKRqqaBuWEMVsC4FKSSQRTsjr4zCWZW0ezAZEbMusbXqVHX2JPue5nWGQ/s1600/ServiceStack.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHCQBn52PKkGBunbRip404nGWL9pXDbNYvOzGCdfAutpuuu8bFr_b8VrI-fwHrTe51d8oCgcOk_LP9lta1NpKRqqaBuWEMVsC4FKSSQRTsjr4zCWZW0ezAZEbMusbXqVHX2JPue5nWGQ/s1600/ServiceStack.PNG" height="388" width="640" /></a></div>
<br />
<b>Find Out More:</b><br />
<br />
If you want to learn more about web development with F#, head over to <a href="http://fsharp.org/webstacks/">FSharp.org</a>. If you'd like to get involved, clone <a href="https://github.com/fsharp/FSharpCommunityTemplates">https://github.com/fsharp/FSharpCommunityTemplates</a> and start hacking. If you're new to SideWaffle, I also recommend watching the introduction video at <a href="http://sidewaffle.com/">http://sidewaffle.com/</a>. It's now <a href="https://github.com/ligershark/side-waffle/wiki/How-to-create-a-project-template">easier than ever before to create a template with SideWaffle</a>.<br />
<br />
As always, feel free to reach to me if you have any questions.Daniel Mohlhttp://www.blogger.com/profile/17462870714458080019noreply@blogger.com3tag:blogger.com,1999:blog-4853877730213459430.post-45969133824358383812013-12-27T05:20:00.001-08:002013-12-27T05:20:14.707-08:00My 3 Most Viewed Blog Posts of 2013Here are my 3 most viewed blog posts from 2013.<br />
<br />
3. <a href="http://bloggemdano.blogspot.com/2013/06/jquery-ui-drag-and-drop-with-funscript.html">jQuery UI Drag and Drop with FunScript</a><br />
2. <a href="http://bloggemdano.blogspot.com/2013/07/new-angularjs-option-in-fc-mvc-4-spa.html">New Angular.js Option in the F#/C# MVC 4 SPA Project Template</a><br />
<br />
And the most viewed by far was...<br />
<br />
1. <a href="http://bloggemdano.blogspot.com/2013/01/how-to-become-software-architect.html">How to Become a Software Architect</a>Daniel Mohlhttp://www.blogger.com/profile/17462870714458080019noreply@blogger.com0tag:blogger.com,1999:blog-4853877730213459430.post-3605149153904667732013-12-17T07:10:00.000-08:002013-12-17T07:10:30.482-08:00Getting Started with Azure, Node.js, and FogJS on WindowsAbout a month ago I <a href="http://bloggemdano.blogspot.com/2013/11/announcing-fogjs-for-windows-azure-with.html">introduced FogJS</a>. On the <a href="http://fogjs.azurewebsites.net/gettingStarted.html">main FogJS site</a>, 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 <a href="http://www.windowsazure.com/en-us/develop/nodejs/how-to-guides/table-services/">How-To Guides</a> 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 <a href="https://github.com/dmohl/fogjs">FogJS</a>. I'll follow a similar structure as the <a href="http://www.windowsazure.com/en-us/develop/nodejs/tutorials/getting-started/">Node.js Getting Started Guide</a> 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.<br />
<br />
<b>Setting up Your Windows Machine:</b><br />
<br />
1. Install Node.js from <a href="http://nodejs.org/">http://nodejs.org/</a>.<br />
2. Install the <a href="http://go.microsoft.com/fwlink/?linkid=254279&clcid=0x409">Windows Azure SDK for Node.js</a> (this may require a reboot).<br />
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.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlIpPNryEhDS0CJ3ogWRU0PdrKpAvjI6xzhIyiM1w8NcPFD01AT3nGXkdeLHXzHEoTR43X8_wSTT-Ymce0vOTCZIIfwos8LiKeNYMdwcnbWjvEs8X6xKRY_RfKLBN5gLgFI9cGURJ97w/s1600/PS_Fog_1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlIpPNryEhDS0CJ3ogWRU0PdrKpAvjI6xzhIyiM1w8NcPFD01AT3nGXkdeLHXzHEoTR43X8_wSTT-Ymce0vOTCZIIfwos8LiKeNYMdwcnbWjvEs8X6xKRY_RfKLBN5gLgFI9cGURJ97w/s1600/PS_Fog_1.png" height="122" width="640" /></a></div>
<br />
4. Run the following command to create a couple of starter files for your project (note: <i>FogJSExample </i>should be replaced with the name of the project that you wish to create).<br />
<br />
<i>New-AzureServiceProject FogJSExample</i><br />
<i><br /></i>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivi6VwWJM9JQndhZ3Gs2crm20HH2MUTEu0Zh5tU-dBzUugxLRorRReeZTxoyShmxG-f9iq8QeNniDTnfXkIXc6SkwYyP2Hbm7AjbfvYoFlnwCpn8UvlP8pD-FcAObBcQq4-PwmsYzxCA/s1600/PS_Fog_2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivi6VwWJM9JQndhZ3Gs2crm20HH2MUTEu0Zh5tU-dBzUugxLRorRReeZTxoyShmxG-f9iq8QeNniDTnfXkIXc6SkwYyP2Hbm7AjbfvYoFlnwCpn8UvlP8pD-FcAObBcQq4-PwmsYzxCA/s1600/PS_Fog_2.png" height="146" width="640" /></a></div>
<br />
6. Navigate to the FogJSExample directory and install FogJS with the command:<br />
<br />
<i>npm install fogjs</i><br />
<i><br /></i>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbJvpHvUu3qmdXRxSxqDJxqvcxbjmTmWKQ0JHcgaTVzdU5oTDPi4-7yyQXo33I9TOZiPTdY7YYYojYbEq5Mbzl7-Xo21kDfpRYzd0UQLM_lVhmRMTZGcVV1PizX5RDvpPU3KT6ftrXPg/s1600/PS_Fog_3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbJvpHvUu3qmdXRxSxqDJxqvcxbjmTmWKQ0JHcgaTVzdU5oTDPi4-7yyQXo33I9TOZiPTdY7YYYojYbEq5Mbzl7-Xo21kDfpRYzd0UQLM_lVhmRMTZGcVV1PizX5RDvpPU3KT6ftrXPg/s1600/PS_Fog_3.png" height="144" width="640" /></a></div>
<br />
5. Create a worker role with the following command (note: <i>TableStorageWorker </i>should be replaced with the name of the worker that you wish to create).<br />
<br />
<i>Add-AzureNodeWorkerRole TableStorageWorker</i><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-WEqdXOtxGt_ag88z6evG_qj7Jk6-SAvsDtF0c0ZwC1Y2f-orGFkP9jpR016ro2eZ4Gv_u9FHMdKyU_1HWZ5ewNCJv4ebUgDtcEb2vRLMZsAVDECZHVXO35vz-94N2Zt8Nv85jWpRYg/s1600/PS_Fog_4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-WEqdXOtxGt_ag88z6evG_qj7Jk6-SAvsDtF0c0ZwC1Y2f-orGFkP9jpR016ro2eZ4Gv_u9FHMdKyU_1HWZ5ewNCJv4ebUgDtcEb2vRLMZsAVDECZHVXO35vz-94N2Zt8Nv85jWpRYg/s1600/PS_Fog_4.png" height="146" width="640" /></a></div>
<br />
7. Navigate to the TableStorageWorker directory, edit the server.js file, and replace the text within it with the following:<br />
<br />
<script src="https://gist.github.com/dmohl/7897166.js"></script>
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 <i>ls env:EMULATED</i>).<br />
<br />
<i>$env:EMULATED = "true"</i><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi13-OZyajdlFXMT4tuFHGtjMauNRnukDyjXAcrEYp6qst5f0wBruuaod0rvioX0r5PZCNc_gYyNVsi035KAXI9aUncSh17mbpSFagJqhA-LOS6RIO5eRIOCNxcytRrcLY0pIK0n8FtTQ/s1600/PS_Fog_5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi13-OZyajdlFXMT4tuFHGtjMauNRnukDyjXAcrEYp6qst5f0wBruuaod0rvioX0r5PZCNc_gYyNVsi035KAXI9aUncSh17mbpSFagJqhA-LOS6RIO5eRIOCNxcytRrcLY0pIK0n8FtTQ/s1600/PS_Fog_5.png" height="158" width="640" /></a></div>
<br />
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 <a href="http://www.windowsazure.com/en-us/develop/nodejs/how-to-guides/service-bus-topics/">here</a>).<br />
<br />
<i>Start-AzureEmulator</i><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijY9ExN12y78zRSCcsNQIPqu7TnY7QW4Mxs6otghtPottmn_YTKZFJoO4CrGGEZxBSpi04ib7hiB6r6HDm1z9itIpU3dYIKbqiwN5J6m1auk-BB0_mLH2wGQUTwVgGPJiam95Zit_AZQ/s1600/PS_Fog_6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijY9ExN12y78zRSCcsNQIPqu7TnY7QW4Mxs6otghtPottmn_YTKZFJoO4CrGGEZxBSpi04ib7hiB6r6HDm1z9itIpU3dYIKbqiwN5J6m1auk-BB0_mLH2wGQUTwVgGPJiam95Zit_AZQ/s1600/PS_Fog_6.png" height="144" width="640" /></a></div>
<br />
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. <br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0N7sUgZ4SeDoPgReJUkwuad8ptCmTIIqMI02Ccdy9W-jEHGQAohJoGQ5xgMh1TkmJj4apNP5eB38HjQtaDfehVVS-i-TaSNabH20joHexsBYrJKgT2wUYjmdur8Shsx4PqoiudpFimA/s1600/PS_Fog_7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0N7sUgZ4SeDoPgReJUkwuad8ptCmTIIqMI02Ccdy9W-jEHGQAohJoGQ5xgMh1TkmJj4apNP5eB38HjQtaDfehVVS-i-TaSNabH20joHexsBYrJKgT2wUYjmdur8Shsx4PqoiudpFimA/s1600/PS_Fog_7.png" height="154" width="640" /></a></div>
<br />
That's all there is to it. You can find the source for FogJS on my <a href="https://github.com/dmohl/fogjs">GitHub</a>.Daniel Mohlhttp://www.blogger.com/profile/17462870714458080019noreply@blogger.com1tag:blogger.com,1999:blog-4853877730213459430.post-50396808421654219452013-12-08T17:25:00.000-08:002013-12-08T17:25:50.794-08:00A Few Other Template Additions and Changes of InterestAs 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: <a href="http://bloggemdano.blogspot.com/2013/12/a-new-f-aspnet-mvc-5-and-web-api-2.html">MVC 5 Templates</a> and <a href="http://bloggemdano.blogspot.com/2013/12/new-f-web-app-item-templates.html">F# Web Item Templates</a>). I wanted to point out a few other new or updated templates that may be of interest to you.<br />
<br />
<b>Nancy Templates:</b><br />
<br />
There are now 9 first-class F# Nancy templates available on <a href="http://visualstudiogallery.msdn.microsoft.com/b55b8aac-b11a-4a6a-8a77-2153f46f4e2f">Visual Studio Gallery</a>. Here's a screenshot of what it looks like once the F# Nancy Templates package is installed:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH_MWDxe-mbq6pdd-8CoSKeU39Oe63fzLjCjZPox7yM4gDl6PFNIjegPYs3UbbAOUfHvq9AtCKqMKolpbd9wdAI1dO_KvWzllNtSORhY-RGuTXiNmNznqLuis9Y8q_GEm6DHNHLqpWxA/s1600/NancyTemplates.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH_MWDxe-mbq6pdd-8CoSKeU39Oe63fzLjCjZPox7yM4gDl6PFNIjegPYs3UbbAOUfHvq9AtCKqMKolpbd9wdAI1dO_KvWzllNtSORhY-RGuTXiNmNznqLuis9Y8q_GEm6DHNHLqpWxA/s1600/NancyTemplates.PNG" height="388" width="640" /></a></div>
<br />
<b>MSTest Project Template:</b><br />
<br />
We've added an AfterBuild step with the help of the <a href="http://www.nuget.org/packages/MSBuild.Extension.Pack/">MSBuild Extension Pack</a> to the <a href="http://visualstudiogallery.msdn.microsoft.com/51ebe64a-899b-4959-8c24-b0148ed6b264">MSTest Project Template</a> so that binding redirects are appropriately handled in both VS2012 and VS2013.<br />
<br />
<b>FSharpTest Template:</b><br />
<br />
Jack Fox has updated his <a href="http://visualstudiogallery.msdn.microsoft.com/a52388eb-e1d3-4900-a25a-d18c8d23a1f3">FSharpTest template</a> to support VS2013 in addition to the previously supported VS2012. You can read more information about the FSharpTest template at <a href="http://jackfoxy.com/fsharptest/">http://jackfoxy.com/fsharptest/</a>.<br />
<br />
<br />Daniel Mohlhttp://www.blogger.com/profile/17462870714458080019noreply@blogger.com0tag:blogger.com,1999:blog-4853877730213459430.post-80885713852881500202013-12-03T07:05:00.002-08:002013-12-03T07:05:48.152-08:00A New F# ASP.NET MVC 5 and Web API 2 Project TemplateThere is a new project template now available on <a href="http://visualstudiogallery.msdn.microsoft.com/39ae8dec-d11a-4ac9-974e-be0fdadec71b">Visual Studio Gallery</a> for VS2012 and VS2013. This template provides a single F# project with ASP.NET MVC 5 + Web API 2.<br />
<br />
To get the most out of this template, it is recommended that you follow the steps defined<a href="http://bloggemdano.blogspot.com/2013/11/adding-new-items-to-pure-f-aspnet.html"> in this blog post</a> as well as install the <a href="http://visualstudiogallery.msdn.microsoft.com/f1dae7fe-1ecc-4f1b-86b5-32a2970d012a">F# Web Item Templates</a>. After the template is installed, you can find it under Visual F# | Web | ASPNET.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjASqpVqxOjzYYXt9bmM8Zh0AGqvcSnt2aZuAC4ziCp8TDajArKlSZDL33Q_4_kySdKbCfsEMWVR7TNoKkp_A8gWTnc7WAtCYKZD7cgZSjstluWA7GN5a8rJV1mRHkLiU2_CtoCUVNPRw/s1600/FSharpMvc5.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjASqpVqxOjzYYXt9bmM8Zh0AGqvcSnt2aZuAC4ziCp8TDajArKlSZDL33Q_4_kySdKbCfsEMWVR7TNoKkp_A8gWTnc7WAtCYKZD7cgZSjstluWA7GN5a8rJV1mRHkLiU2_CtoCUVNPRw/s1600/FSharpMvc5.PNG" height="388" width="640" /></a></div>
<br />
A big thanks goes out to <a href="https://twitter.com/sayedihashimi">Sayed I. Hashimi</a> and <a href="https://twitter.com/mkristensen">Mads Kristensen</a> for adding F# support to <a href="http://sidewaffle.com/">SideWaffle</a>! SideWaffle reduced the time that it would have normally taken to create this template and it is sure to reduce time and headaches for future maintenance. I'd also like to thank Ryan Riley for contributing much of the initial project that was used to create this template.<br />
<br />
If you'd like to contribute, visit <a href="https://github.com/fsharp/FSharpCommunityTemplates">https://github.com/fsharp/FSharpCommunityTemplates</a> for information on how to get involved.Daniel Mohlhttp://www.blogger.com/profile/17462870714458080019noreply@blogger.com5tag:blogger.com,1999:blog-4853877730213459430.post-6664250896197134262013-12-02T04:28:00.000-08:002013-12-02T04:28:44.708-08:00New F# Web App Item TemplatesThere is a new <a href="http://visualstudiogallery.msdn.microsoft.com/f1dae7fe-1ecc-4f1b-86b5-32a2970d012a">VSIX available on Visual Studio Gallery</a> that can help in the creation of <a href="http://bloggemdano.blogspot.com/2013/11/adding-new-items-to-pure-f-aspnet.html">first-class F# ASP.NET MVC and Web API projects</a>. To see the new item templates, do the following:<br />
<br />
1. Follow the steps defined <a href="http://bloggemdano.blogspot.com/2013/11/adding-new-items-to-pure-f-aspnet.html">in this post</a>.<br />
<br />
2. Install the VSIX from <a href="http://visualstudiogallery.msdn.microsoft.com/f1dae7fe-1ecc-4f1b-86b5-32a2970d012a">here</a> or search for it and install from Tools | Extensions and Updates...<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJjTraVxw0ixd4bn0Y35LXyA04rH_61u-fwkCsgEXGDVMSCOwJxyQW6cFPKVNaPm4C2PlwzmoXJD_SGGqk-w9H8VKKf_fFZ58ZWH0Z4QBG4fo9nLE4boCCWGRutrilkY4vxvclC9sn5w/s1600/FSharp+Web+Item+Templates.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJjTraVxw0ixd4bn0Y35LXyA04rH_61u-fwkCsgEXGDVMSCOwJxyQW6cFPKVNaPm4C2PlwzmoXJD_SGGqk-w9H8VKKf_fFZ58ZWH0Z4QBG4fo9nLE4boCCWGRutrilkY4vxvclC9sn5w/s1600/FSharp+Web+Item+Templates.PNG" height="390" width="640" /></a></div>
<br />
3. Restart Visual Studio and create or open a first-class F# ASP.NET MVC or Web API project. If you don't have one handy, you can get an MVC 5/Web API 2 template from <a href="http://visualstudiogallery.msdn.microsoft.com/39ae8dec-d11a-4ac9-974e-be0fdadec71b">here</a> or install <a href="https://skydrive.live.com/redir?resid=54870041781498F7!236&authkey=!AAK4koImoM5Lwzk&ithint=file%2c.vsix">this</a> sneak peak of one of the F# Nancy templates that Ryan Riley and I are working on.<br />
<br />
4. Add a new item (Ctrl+Shift+A) and select the Web subcategory. You should see the following:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRf9FqXXPcwGefxl74sERHn5n5bzzCUyoGxZYqfJywRURKsTA4ajFxrcosFs6m21uIrvEJ3MiSQRd0Fky4LgLiXWXkGCR1nB36uJf4eiB5zbbdsyh-EcOaCzgjWm_kJ_GVDY1rYbeNYg/s1600/FSharp_New_Item_Templates.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRf9FqXXPcwGefxl74sERHn5n5bzzCUyoGxZYqfJywRURKsTA4ajFxrcosFs6m21uIrvEJ3MiSQRd0Fky4LgLiXWXkGCR1nB36uJf4eiB5zbbdsyh-EcOaCzgjWm_kJ_GVDY1rYbeNYg/s1600/FSharp_New_Item_Templates.PNG" height="388" width="640" /></a></div>
Daniel Mohlhttp://www.blogger.com/profile/17462870714458080019noreply@blogger.com0tag:blogger.com,1999:blog-4853877730213459430.post-56802249551255152612013-11-30T06:26:00.000-08:002013-12-15T13:30:46.639-08:00Adding New Items to a Pure F# ASP.NET MVC/Web API Project<b>UPDATE 12/15/2013:</b><br />
<b>-----------------------</b><br />
<br />
The F# community has been working hard on ways to make this process easier. To that end, here are the new and improved instructions:<br />
<br />
<b>Option 1: Visual Studio Project Template Option:</b><br />
<br />
The easiest option is to simply install the latest version of either the <a href="http://visualstudiogallery.msdn.microsoft.com/39ae8dec-d11a-4ac9-974e-be0fdadec71b">F# MVC 5 template</a> or the <a href="http://visualstudiogallery.msdn.microsoft.com/b55b8aac-b11a-4a6a-8a77-2153f46f4e2f">F# Nancy template</a>. These templates now include a custom NuGet package that contains an Install.ps1 file that will automatically add the needed registry entries.<br />
<br />
<b>Option 2: PowerShell Option:</b><br />
<b><br /></b>
If you prefer to run the PowerShell file manually, you can do the following:<br />
<br />
1. Launch PowerShell (you may need to run PowerShell as administrator).<br />
2. Download the <a href="https://skydrive.live.com/download?resid=54870041781498F7!243&authkey=!AAWcW9wBrsBpavs&ithint=file%2c.ps1">AddRegistryEntries.ps1</a> file and execute it with the command <i>./AddRegstryEntries.ps1</i><br />
<br />
<b>Option 3: Batch File Option:</b><br />
<br />
If you don't want to use PowerShell, there is also a batch file option.<br />
<br />
1. Download the <a href="https://skydrive.live.com/download?resid=54870041781498F7!244&authkey=!AALLe1bG-H8fJnY&ithint=file%2c.bat">AddRegistryEntries.bat</a> file.<br />
2. Run the batch file as administrator.<br />
<br />
You should now be able to see the items shown in step #5 of the original post. Don't forget to checkout the <a href="http://visualstudiogallery.msdn.microsoft.com/f1dae7fe-1ecc-4f1b-86b5-32a2970d012a">F# Web Item Templates</a> as well.<br />
<br />
<b>-----------------------</b><br />
<br />
A few months ago Mark Seemann put together a great post on how to create a <a href="http://blog.ploeh.dk/2013/08/23/how-to-create-a-pure-f-aspnet-web-api-project/">pure F# ASP.NET Web API project</a>. One of the biggest disadvantages mentioned in that post is that once the necessary changes are made to the ProjectTypeGuids element in the fsproj file, the Add New Item wizard no longer displays items. After much trial and error, I've found a fix for this issue.<br />
<br />
Note: While the change mentioned here is pretty mild, the standard registry edit disclaimer still applies. It's recommended that you backup your registry before making changes as incorrect changes/additions/deletions can have serious and unexpected consequences.<br />
<br />
Here are the steps for VS2013 (for VS2012 the steps should be similar, but with a slightly different registry path).<br />
<br />
1. Edit the registry (e.g. run regedit.exe).<br />
<br />
2. Locate HKEY_LOCAL_MACHINE or HKEY_LOCAL_USER then \SOFTWARE\Microsoft\VisualStudio\ then 12.0 or 12.0_Config then \Projects\<br />
<br />
3. Find {349C5851-65DF-11DA-9384-00065B846F21}. If there is more than one, find the one with LanguageTemplates as the child.
<br />
<br />
4. Add a new String Value entry to the LanguageTemplates node with a key and value of {F2A71F9B-5D33-465A-A702-920D77279786}.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicq7ExFGTzezqoZGp2Q5aZ9UlF-J4E388TJDwHzqw8RDYACYDFaRtjM_2u2qERR60iLCzA2dR2NRlnsvtGirmk-w1QXQnxUlSNkhg8nh0eqw6m7UEXeOO7m6f2HsNYx8NC-ms1Z6zGNw/s1600/FSharp_Item_Reg_Hack.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicq7ExFGTzezqoZGp2Q5aZ9UlF-J4E388TJDwHzqw8RDYACYDFaRtjM_2u2qERR60iLCzA2dR2NRlnsvtGirmk-w1QXQnxUlSNkhg8nh0eqw6m7UEXeOO7m6f2HsNYx8NC-ms1Z6zGNw/s1600/FSharp_Item_Reg_Hack.PNG" height="185" width="640" /></a></div>
<br />
5. Test it out by closing all instances of VS, creating a pure F# ASP.NET MVC or Web API project, and trying to add a new item. You should now see all of the usual F# item templates.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq9fd5JXPaoW8sOH7FMk3Z5XCQDrBJs171PHPs471e0a-4IuYUzZYoLKcL_eBS6jWu8NVv-Vw2nzThcZzIlu7jn7PcjpoumnyLU5UspYf5yYiJ9X5mPP4PQ77E2YbDda4-_KCKotuTsA/s1600/FSharpAddNewItem.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq9fd5JXPaoW8sOH7FMk3Z5XCQDrBJs171PHPs471e0a-4IuYUzZYoLKcL_eBS6jWu8NVv-Vw2nzThcZzIlu7jn7PcjpoumnyLU5UspYf5yYiJ9X5mPP4PQ77E2YbDda4-_KCKotuTsA/s1600/FSharpAddNewItem.PNG" height="388" width="640" /></a></div>
<br />
If you want to try this out without having to manually create a pure F# ASP.NET MVC or Web API project, here's a <a href="https://skydrive.live.com/redir?resid=54870041781498F7!236&authkey=!AAK4koImoM5Lwzk&ithint=file%2c.vsix">sneak peak of one of the F# Nancy templates</a> that Ryan Riley and I are working on. Look for the full collection of F# Nancy templates in the next few weeks. You can get involved with the Nancy templates by contributing to <a href="https://github.com/fsharp/FSharpCommunityTemplates/tree/master/VisualStudio/Nancy.Templates">https://github.com/fsharp/FSharpCommunityTemplates/tree/master/VisualStudio/Nancy.Templates</a>.Daniel Mohlhttp://www.blogger.com/profile/17462870714458080019noreply@blogger.com5tag:blogger.com,1999:blog-4853877730213459430.post-39635787412865353822013-11-18T04:26:00.000-08:002013-11-18T04:26:04.650-08:00Announcing FogJS for Windows Azure with Node.jsAbout a year and a half ago I announced a <a href="http://bloggemdano.blogspot.com/2012/05/introducing-fog-library-for-interacting.html">library named Fog (for F#)</a> that had the goal of making it very easy to use F# to work with the Windows Azure API for .NET. Today, I'm proud to announce the release of <a href="http://fogjs.azurewebsites.net/">FogJS</a>, which has a similar goal for JavaScript/Node.js development.<br />
<br />
<b>FogJS:</b><br />
<b><br /></b>
FogJS currently supports 3 of the more popular Azure services: Blob Storage, Table Storage, and Service Bus. One of the most broad features in FogJS is that of support for promises. In fact, almost every function provided by the <a href="https://github.com/WindowsAzure/azure-sdk-for-node/">Azure SDK for Node.js</a> has been replicated in Fog with the results returned as a promise (with the help of <a href="https://github.com/kriskowal/q">Q.js</a>).<br />
<br />
The second big feature is related to making it as easy as possible to interact with Azure. This is primarily accomplished with "simplified functions" that follow a convention over configuration approach.<br />
<br />
<b>Example: </b><br />
<br />
Here's a quick example of one option for how to use Blob Storage with FogJS:<br />
<br />
<script src="https://gist.github.com/dmohl/7379376.js"></script>
You can find examples for Table Storage and Service Bus interaction on the main FogJS site: <a href="http://fogjs.azurewebsites.net/">http://fogjs.azurewebsites.net/</a>.<br />
<br />
As usual, the code and tests can be found on my <a href="https://github.com/dmohl/fogjs">GitHub</a>.Daniel Mohlhttp://www.blogger.com/profile/17462870714458080019noreply@blogger.com0tag:blogger.com,1999:blog-4853877730213459430.post-31523129820108299892013-11-11T04:20:00.000-08:002013-11-11T04:20:29.338-08:00A Few Changes to the F#/C# MVC 4 Project TemplateThere is a new version (v1.21) of the <a href="http://visualstudiogallery.msdn.microsoft.com/3d2bf938-fc9e-403c-90b3-8de27dc23095">F#/C# MVC 4 project template</a>. There are two new features worth noting in this release:<br />
<br />
1. The <a href="http://msdn.microsoft.com/en-us/library/2fc472t2(v=vs.110).aspx">AutoGenerateBindingRedirects</a> attribute has been added to all of the project files. This attribute (that is newly available in .NET 4.5.1/VS2013) removes the need to constantly add or update binding redirects in your web.config or app.config files. This eliminates the errors that you often see when the binding redirect elements were missing in config files such as "<span style="color: #333333; font-family: Consolas, 'Liberation Mono', Courier, monospace; font-size: 12px; line-height: 19px;">System.MissingMethodException : Method not found...</span>".<br />
<br />
2. The project creation wizard now has an option to include FsUnit for NUnit or xUnit within the Test project. We plan to include MS Test as well as options without FsUnit in a future release.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU4fT9MWmk_oaTmVI4RB2lMFD9KTW88qTftnaHcJXYFI7E4vVdAM7yCaaIdltlt1dDBX6actiqon8WFNkxndK9V9bEja8E1G5rULAOy9HyMMWjBPENhRqCtF_JqqHwUc50yXYXw6cnAw/s1600/mvc4_testproj.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="267" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU4fT9MWmk_oaTmVI4RB2lMFD9KTW88qTftnaHcJXYFI7E4vVdAM7yCaaIdltlt1dDBX6actiqon8WFNkxndK9V9bEja8E1G5rULAOy9HyMMWjBPENhRqCtF_JqqHwUc50yXYXw6cnAw/s400/mvc4_testproj.PNG" width="400" /></a></div>
<br />Daniel Mohlhttp://www.blogger.com/profile/17462870714458080019noreply@blogger.com0tag:blogger.com,1999:blog-4853877730213459430.post-78446233548150258022013-11-06T14:47:00.002-08:002013-11-07T10:54:41.810-08:00A New Home for the F# Community Project Templates<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDArVSuunLEA4E35ksNnWORRUgHvEM2WfKbVJAV21x8EeNHgU5MWVOD03Ma7ZQRu6z5J54ZJ404pQbSPW6QZPzKaSHRwXdON1P0WmfOrpTftfJBakBe5pMk34-Rdkp2JJJtceKoIxVMA/s1600/dsyme_and_dmohl.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="242" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDArVSuunLEA4E35ksNnWORRUgHvEM2WfKbVJAV21x8EeNHgU5MWVOD03Ma7ZQRu6z5J54ZJ404pQbSPW6QZPzKaSHRwXdON1P0WmfOrpTftfJBakBe5pMk34-Rdkp2JJJtceKoIxVMA/s400/dsyme_and_dmohl.jpg" width="400" /></a></div>
<br />
While at the <a href="http://skillsmatter.com/event/scala/progressive-f-tutorials-2013">Progressive F# Tutorials</a> last week <a href="http://twitter.com/dsyme">Don Syme</a> and I worked together to create a new home for the community F# project templates. They can now be found under the F# Open Source Community GitHub org at <a href="https://github.com/fsharp/FSharpCommunityTemplates">https://github.com/fsharp/FSharpCommunityTemplates</a>.<br />
<br />
We would love to have you add to these templates. Simply follow the instructions in the readme file and submit a pull request.Daniel Mohlhttp://www.blogger.com/profile/17462870714458080019noreply@blogger.com2tag:blogger.com,1999:blog-4853877730213459430.post-11399518200519957692013-11-05T08:43:00.001-08:002013-11-05T08:43:38.771-08:00F# Web Programming Session (slides and examples) at Progressive F# Tutorials 2013Thanks to all who came out to the web programming session that Zach Bray and I led at <a href="http://skillsmatter.com/event/scala/progressive-f-tutorials-2013">Progressive F# Tutorials 2013</a>. You can find the slides and examples from the session at <a href="https://github.com/dmohl/FsOnTheWeb-Workshop">https://github.com/dmohl/FsOnTheWeb-Workshop</a>.<br />
<br />
Additionally, you can find the FunScript and HashBang presentation at <a href="http://funscript.info/presentations/progf/slides.html#1">http://funscript.info/presentations/progf/slides.html#1</a> and a working example of the associated chat client/server app at <a href="https://github.com/ZachBray/HashBang">https://github.com/ZachBray/HashBang</a>.Daniel Mohlhttp://www.blogger.com/profile/17462870714458080019noreply@blogger.com0tag:blogger.com,1999:blog-4853877730213459430.post-43740219085992392732013-10-21T06:36:00.000-07:002013-10-21T18:29:13.341-07:00Progressive F# Tutorials 2013 in LondonProgressive F# Tutorials 2013 in London is just over a week away and I am very excited!<br />
<br />
On Friday (Nov. 1) Zach Bray and I will be hosting a session on web programming. Here are the details:<br />
<br />
<table style="background-color: white; border-spacing: 0px; border: 1px dashed rgb(102, 102, 102); color: black; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: small; padding: 0px;"><tbody>
<tr><td style="padding-right: 10px; vertical-align: top; width: 476px;"><blockquote class="tr_bq">
<span style="color: #666666; font-size: larger; font-weight: 600;">Web Programming</span></blockquote>
<blockquote class="tr_bq">
F#--t<span style="color: #222222; font-family: Calibri, sans-serif; font-size: 15px;">he open, cross-platform </span>programming language--provides many features that lend themselves well to web development. These features combined with other modern web development tools such as HTML5, CSS3, JavaScript, and a plethora of web frameworks and libraries allow developers to build rich, web based solutions easier and faster than ever before.</blockquote>
<blockquote class="tr_bq">
In this session, we'll go over a few ways to start taking advantage of F# in your web based solutions. You'll learn multiple approaches that involve the use of F# as the primary workhorse on the server as well as how to build full-stacks with F#. Along the way, we'll look at a few of the many features of F# that will improve your web development efforts. You owe it to yourself to learn the skills needed to build modern web applications with a modern programming language.</blockquote>
</td></tr>
</tbody></table>
<br />
Visit <a href="http://skillsmatter.com/event/scala/progressive-f-tutorials-2013">http://skillsmatter.com/event/scala/progressive-f-tutorials-2013</a> for more info.<br />
<br />
I hope to see you there!Daniel Mohlhttp://www.blogger.com/profile/17462870714458080019noreply@blogger.com0tag:blogger.com,1999:blog-4853877730213459430.post-31957563921615614572013-07-07T12:09:00.001-07:002013-07-07T12:09:32.258-07:00New Angular.js Option in the F#/C# MVC 4 SPA Project TemplateThere's a new addition to the <a href="http://visualstudiogallery.msdn.microsoft.com/3d2bf938-fc9e-403c-90b3-8de27dc23095">F#/C# MVC 4 SPA</a> project template family. In addition to the previously supported options of Backbone.js and Knockout.js, you can now create a template with Angular.js as the JavaScript framework.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCpBC1LvZndMLVNs914LFNZftiynN1slosSIHVbOodrOufn46O1MgQCABwzF3Ls3TcC-uF4YV6lsqiMJ4srXfBoysBsDUbY1E5w0wizQSbPcDYbor71zRt8VtBl1uWRHh4sG6BPRfuDQ/s1600/FsAngularTemplate.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCpBC1LvZndMLVNs914LFNZftiynN1slosSIHVbOodrOufn46O1MgQCABwzF3Ls3TcC-uF4YV6lsqiMJ4srXfBoysBsDUbY1E5w0wizQSbPcDYbor71zRt8VtBl1uWRHh4sG6BPRfuDQ/s400/FsAngularTemplate.PNG" /></a></div>
<br />
Angular.js is an MV* JavaScript framework that allows you to build web applications in <replace>a declarative style. Since F# also focuses on more of a declarative style, Angular.js + F# are a great combination.
<br /><br />
The Angular related JS that comes out of this template is primarily isolated to the following files: scripts\app\router.js, scripts\controllers\contactDetailController.js, and scripts\controllers\contactCreateController.js. The JS for each of these is shown below:
<br /><br />
<b>router.js</b>:
<br /><br />
<script src="https://gist.github.com/dmohl/5944506.js"></script>
<br />
<b>contactDetailController.js</b>:
<br /><br />
<script src="https://gist.github.com/dmohl/5944510.js"></script>
<br />
<b>contactCreateController.js</b>:
<br /><br />
<script src="https://gist.github.com/dmohl/5944514.js"></script>
<br />
Enjoy!
</replace>Daniel Mohlhttp://www.blogger.com/profile/17462870714458080019noreply@blogger.com1tag:blogger.com,1999:blog-4853877730213459430.post-68539914007457458612013-06-10T08:11:00.000-07:002013-06-10T08:11:23.065-07:00jQuery UI Drag and Drop with FunScriptIf you've been keeping up with activity in the F# world, you have no doubt seen great strides in a number of areas such as expansion of support for F# on different platforms and an ever increasing number of libraries and frameworks. One of these libraries that I've been playing with of late is named FunScript.<br /><br/>
<h3>What is FunScript?</h3><br/>
The <a href="http://funscript.info/">FunScript website</a> provides a nice definition.<br />
<blockquote class="tr_bq">
FunScript is a lightweight F# library that lets you rapidly develop single-page applications. You can connect to external data sources and call REST APIs with intellisense, produce dashboards using JavaScript visualization libraries and write asynchronous computations easily without explicit callbacks.</blockquote>
One of the cool features that FunScript provides is a TypeScript type provider that allows any TypeScript definition file to be used to generate strongly typed access to the associated JavaScript lib. Let's look at an example of how to do this.<br /><br/>
<h3>jQuery UI Drag/Drop Example</h3><br/>
In this example, we create a simple TODO type of application using jQuery UI, FunScript, and the TypeScript type provider that FunScript provides. You can find the full example with detailed comments on the <a href="https://github.com/ZachBray/FunScript/tree/master/Examples/jQueryUI">FunScript GitHub site</a>.
<br/><br/>
<script src="https://gist.github.com/dmohl/5749451.js"></script>Daniel Mohlhttp://www.blogger.com/profile/17462870714458080019noreply@blogger.com0tag:blogger.com,1999:blog-4853877730213459430.post-77245740502810064172013-04-11T12:09:00.000-07:002013-04-11T12:09:00.745-07:00Presentation - Modern Software Architectures: Building Solutions for Web, Cloud, and MobileThanks to all who attended my talk on <a href="http://www.iasaglobal.org/assnfe/ev.asp?ID=437">Modern Software Architectures: Building Solutions for Web, Cloud, and Mobile</a>. You can find the simple SPA examples <a href="https://github.com/dmohl/FsWebSpa-Backbone">here</a> and <a href="https://github.com/dmohl/FsWebSpa-Knockout">here</a>. The slide deck for the presentation is provided below and the recording of the presentation is available to IASA members on the <a href="http://www.iasaglobal.org/">IASA site</a>.<br />
<br />
<iframe allowfullscreen="" frameborder="0" height="356" marginheight="0" marginwidth="0" mozallowfullscreen="" scrolling="no" src="http://www.slideshare.net/slideshow/embed_code/18631381" style="border-width: 1px 1px 0; border: 1px solid #CCC; margin-bottom: 5px;" webkitallowfullscreen="" width="427"> </iframe> Daniel Mohlhttp://www.blogger.com/profile/17462870714458080019noreply@blogger.com1