This is step 0 of my blog series on Web Application Development in Fsharp using ASP.NET MVC

In this blog post, we are going to set up the visual studio solution and create the high level project structure for the fsharp-phonecat application.

Let’s get started!

Setting Up Visual Studio Solution

The first step is to create an blank visual studio solution and name it as PhoneCat

After creating the blank solution create two fsharp class libraries and name it as Domain and DataAccess respectively.

Do delete the sample fsharp files Domain1.fs, DataAccess1.fs and Script.fsx that are created by default while creating the class libraries

Then create a ASP.NET MVC web project using F# MVC 5 template and name it as Web

We are going to use TDD, so create test projects for each of the above projects created and name it as Domain.Tests, DataAccess.Tests and Web.Tests respectively.

The final project structure would look like

F# MVC 5 template comes with a default Bootstrap theme and we are going to extend it by using e-commerce theme from Start Bootstrap. Download the theme and add shop-homepage.css to the Content directory of Web project. After adding it update Global.asax.fs to include this css file while bundling.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

type BundleConfig() =
    static member RegisterBundles (bundles:BundleCollection) =
        bundles.Add(ScriptBundle("~/bundles/jquery")
            .Include([|"~/Scripts/jquery-{version}.js"|]))

        bundles.Add(ScriptBundle("~/bundles/modernizr")
            .Include([|"~/Scripts/modernizr-*"|]))

        bundles.Add(ScriptBundle("~/bundles/bootstrap")
            .Include("~/Scripts/bootstrap.js",
                        "~/Scripts/respond.js"))

        bundles.Add(StyleBundle("~/Content/css")
            .Include("~/Content/bootstrap.css",
                        "~/Content/site.css",
                        "~/Content/shop-homepage.css"))

Now the stage is set for awesomeness. Update _Layout.cshtml and Index.cshtml as mentioned in the bootstrap theme and run the web project.

You can checkout the code here. In the next-post we will be wiring up the backend. Stay tuned !