Websharper Warp

Scripting quick prototypes in WebSharper can sometimes be troublesome. If for each prototype, a new project has to be created or code needs to be commented/uncommented, it can become quite demotivating as too many steps are required. In F#, .fsx files are a great tool to script disposable code.
Write some isolated functions, run on FSI and then forget about it.

In this post, I will show you how you can setup a project in order to use Warp efficiently to create sitelet prototypes.
Building with .fsx is a huge advantage. It allows us to have multiple files containing completely isolated sitelets all within the same project.
Using one line command, we can boot up a sitelet to test it quickly which makes it ideal for prototyping.

This should install Warp in your \packages folder. It should also install all the references of Warp including WebSharper, WebSharper.UI.Next and others.
Warp also comes with an extra folder \tools where you should find reference-nover.fsx.
This file contains all the reference links to be loaded from your .fsx file so that you don’t need to reference everything by yourself.
You just need to load reference-nover.fsx at the head of your .fsx:

1
2

#I "../packages/"
#load "WebSharper.Warp/tools/reference-nover.fsx"

This is one of the reason why I recommended to use Paket. If we were to use Nuget, the path would break each time WebSharper is updated because Nuget puts the version number in the path.Another reason is that we don’t need to add the reference to any project. We just need the libraries to be downloaded in order for us to reference it from our .fsx.

For the moment, some references are missing from reference-nover.fsx, I’ve made a PR.
Until this is merged, you will need to alter reference-nover.fsx to add WebSharper.UI.Next.Templating.dll and Intellifactory.Xml.dll if you want to use the html templates in your sitelets.

Now that we have Warp ready, we can start creating our first sitelet.

Build a sitelet

Let’s start by creating a very simple sitelet.
Create a .fsx file and put the following sitelet in:

To create the sitelet, we use Application.SinglePage which is a helper to boot SPA with a single endpoint.

The interesting part is Warp.RunAndWaitForInput which takes our sitelet as argument.
If you run this code in FSI, it will boot a selfhosted server on http://localhost:9000/ (by default).

This is fantastic! With just one single small isolated .fsx file we can boot a complete server and start serving pages. We could use another function than Application.SinglePage and have a full-blown sitelet with multiple endpoints if we wanted.

Now sending code to FSI is useful when we want to run part of the .fsx but in our case right now, we just evaluate the complete .fsx every time.
So to make this task easier, we can create a buildAndRun.cmd file which will execute the script so that we can easily restart the sitelet without having to manually sent the code to the FSI.
It consists of one single command line.

We now have all the ingredients to create powerful sitelet within a .fsx file:

RPCs

External resources

JS compilation

Boot on Owin selfhost

Benefits

The major benefit is that it makes prototyping much easier.
When I started to use WebSharper, I used to create new projects each time I had to test something.

It was slow and demotivating. I just kept the same project and every time I had to test something, I would delete the previous code.

Now I don’t do that anymore as with WebSharper.Warp, only one .fsx file needs to be created. It is easy and quick and you can be up and running a full sitelet in a matter of seconds.
This makes prototyping much more enjoyable and combined with the build script, it is quick and easy to iterate.

Conclusion

Today we saw how we could use WebSharper.Warp in a very efficient way.
Prototyping is one of the best way to take advantage of Warp since it is so easy to get started!
I hope you will try it and let me know if you have other tricks to make your journey with WebSharper even more enjoyable.
As usual, if you have any comments please leave it here or hit me on Twitter @Kimserey_Lam.
Thanks for reading!