So I am stuck again when I want to create a web app. Don't laugh. I come from *NIX environment and the way everything is started in WebSharper is quite confusing at first. I tried to go to installation documentation but I don't use Visual Studio nor MonoDevelop. Using paket also doesn't solve my problem since they also seem to use Visual Studio or MonoDevelop.
As someone who used to work in a shell environment, of course using shell is always my preferred way to do something. Then I open the Downloads page which turns out become my saviour.
In short, I have to install template first then using the template to create a skeleton of application and then hack away that skeleton. Easier for me :-D.
Note: make sure you have installed .NET SDK - current version 5.x.x and .NET SDK - LTS version 3.x.x. Read my other article on this matter.
Install Application Template
$ dotnet new -i WebSharper.Templates Template Name Short Name Language Tags -------------------------------------------- --------------- ---------- ---------------------- Console Application console [C#],F#,VB Common/Console Class library classlib [C#],F#,VB Common/Library Worker Service worker [C#],F# Common/Worker/Web MSTest Test Project mstest [C#],F#,VB Test/MSTest NUnit 3 Test Item nunit-test [C#],F#,VB Test/NUnit NUnit 3 Test Project nunit [C#],F#,VB Test/NUnit xUnit Test Project xunit [C#],F#,VB Test/xUnit Razor Component razorcomponent [C#] Web/ASP.NET Razor Page page [C#] Web/ASP.NET MVC ViewImports viewimports [C#] Web/ASP.NET MVC ViewStart viewstart [C#] Web/ASP.NET Blazor Server App blazorserver [C#] Web/Blazor Bolero Hosted Application bolero-app F# Web/Blazor/Bolero Blazor WebAssembly App blazorwasm [C#] Web/Blazor/WebAssembly ASP.NET Core Empty web [C#],F# Web/Empty ASP.NET Core Web App (Model-View-Controller) mvc [C#],F# Web/MVC ASP.NET Core Web App webapp [C#] Web/MVC/Razor Pages ASP.NET Core with Angular angular [C#] Web/MVC/SPA ASP.NET Core with React.js react [C#] Web/MVC/SPA ASP.NET Core with React.js and Redux reactredux [C#] Web/MVC/SPA Razor Class Library razorclasslib [C#] Web/Razor/Library ASP.NET Core Web API webapi [C#],F# Web/WebAPI ASP.NET Core gRPC Service grpc [C#] Web/gRPC WebSharper 4 Extension websharper-ext F# WebSharper WebSharper 4 Library websharper-lib [C#],F# WebSharper WebSharper 4 Proxy websharper-prx [C#],F# WebSharper WebSharper 4 Client-Server Application websharper-web [C#],F# WebSharper/Web WebSharper 4 Html Site websharper-html [C#],F# WebSharper/Web WebSharper 4 Single Page Application websharper-spa [C#],F# WebSharper/Web dotnet gitignore file gitignore Config global.json file globaljson Config NuGet Config nugetconfig Config Dotnet local tool manifest file tool-manifest Config Web Config webconfig Config Solution File sln Solution Protocol Buffer File proto Web/gRPC Examples: dotnet new mvc --auth Individual dotnet new websharper-lib dotnet new --help dotnet new websharper-web --help $ Now we have these templates:
... ... WebSharper 4 Extension websharper-ext F# WebSharper WebSharper 4 Library websharper-lib [C#],F# WebSharper WebSharper 4 Proxy websharper-prx [C#],F# WebSharper WebSharper 4 Client-Server Application websharper-web [C#],F# WebSharper/Web WebSharper 4 Html Site websharper-html [C#],F# WebSharper/Web WebSharper 4 Single Page Application websharper-spa [C#],F# WebSharper/Web ... ... Pay attention to the shortname, we are going to use that. To see more information about the templates:
... ... ... WebSharper.Templates Details: NuGetPackageId: WebSharper.Templates Version: 4.7.3.424 Author: IntelliFactory Templates: WebSharper 4 Client-Server Application (websharper-web) C# WebSharper 4 Client-Server Application (websharper-web) F# WebSharper 4 Extension (websharper-ext) F# WebSharper 4 Library (websharper-lib) C# WebSharper 4 Library (websharper-lib) F# WebSharper 4 Html Site (websharper-html) C# WebSharper 4 Html Site (websharper-html) F# WebSharper 4 Proxy (websharper-prx) C# WebSharper 4 Proxy (websharper-prx) F# WebSharper 4 Single Page Application (websharper-spa) C# WebSharper 4 Single Page Application (websharper-spa) F# Uninstall Command: dotnet new -u WebSharper.Templates $ There are 6 types of templates:
- Client-Server Application /
websharper-web: full client-server application - in other world, it is usually called fullstack. - Extension /
websharper-ext: interface to an existing JS library. - Library /
websharper-lib: library which can be used in any WebSharper project. - HTML Site /
websharper-html: multipage HTML/JavaScript application. - Proxy /
websharper-prx: JavaScript-compilable F# implementations for classes and modules that were compiled without WebSharper. - Single Page Application /
websharper-spa: single page HTML/JavaScript with HTML and F# contents plugs into it.
As an example, I will use SPA template to create a skeleton of SPA project. Here's how to do that:
$ dotnet new websharper-spa -lang f# -n helloSPA The template "WebSharper 4 Single Page Application" was created successfully. ... ... Note:
helloSPAis project name which later becomes application name.
Here's the results:
$ cd helloSPA $ ls -la total 28 drwxr-xr-x 3 bpdp bpdp 4096 Agu 25 10:19 ./ drwxr-xr-x 3 bpdp bpdp 4096 Agu 25 10:19 ../ -rw-r--r-- 1 bpdp bpdp 1019 Agu 25 10:19 Client.fs -rw-r--r-- 1 bpdp bpdp 599 Agu 25 10:19 helloSPA.fsproj -rw-r--r-- 1 bpdp bpdp 1045 Agu 25 10:19 Startup.fs -rw-r--r-- 1 bpdp bpdp 123 Agu 25 10:19 wsconfig.json drwxr-xr-x 2 bpdp bpdp 4096 Agu 25 10:19 wwwroot/ $ That's it. Now we have a skeleton of SPA app. Let's try to run it.
$ dotnet run Hosting environment: Production Content root path: /home/bpdp/kerjaan/src/fsharp/websharper/artikel/helloSPA Now listening on: http://localhost:5000 Now listening on: https://localhost:5001 Application started. Press Ctrl+C to shut down. Open http://localhost:5000 using your browser:
Voila! you have WebSharper up and running. Now, what you need to do is to understand the contents of an SPA app using WebSharper. This one deserves its own articles. At this point, your knowledge on F#, packages / libs, and WebSharper is important.
Update Templates
Whenever there are new releases, we can always update the templates using:
$ dotnet new -i "WebSharper.Templates::*" Happy coding!
Top comments (0)