WebSharper: 쉽게 시작하기

그래서 웹앱을 만들고 싶을 때 또 막힙니다. 웃지 마. 저는 *NIX 환경에서 왔으며 WebSharper에서 모든 것이 시작되는 방식이 처음에는 상당히 혼란스럽습니다. installation documentation으로 가려고 했는데 Visual Studio도 MonoDevelop도 사용하지 않습니다. paket을 사용해도 Visual Studio 또는 MonoDevelop를 사용하는 것 같기 때문에 문제가 해결되지 않습니다.

쉘 환경에서 일했던 사람으로서 물론 쉘을 사용하는 것은 항상 제가 선호하는 방법입니다. 그런 다음 Downloads page을 열면 내 구원자가 됩니다.

요컨대, 먼저 템플릿을 설치한 다음 템플릿을 사용하여 응용 프로그램의 골격을 만든 다음 해당 골격을 해킹해야 합니다. 나를 위해 쉽게 :-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 on this matter.

애플리케이션 템플릿 설치

$ 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
$

이제 다음 템플릿이 있습니다.

...
...
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        
...
...

짧은 이름에 주의하세요. 우리는 그것을 사용할 것입니다. 템플릿에 대한 자세한 정보를 보려면 다음을 수행하십시오.

...
...
...
  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
$

6가지 유형의 템플릿이 있습니다.

클라이언트-서버 응용 프로그램/websharper-web: 전체 클라이언트-서버 응용 프로그램 - 일반적으로 풀 스택이라고 합니다.

확장자/websharper-ext : 기존 JS 라이브러리에 대한 인터페이스.

라이브러리/websharper-lib : 모든 WebSharper 프로젝트에서 사용할 수 있는 라이브러리입니다.

HTML 사이트/websharper-html : 다중 페이지 HTML/JavaScript 응용 프로그램입니다.

프록시/websharper-prx: WebSharper 없이 컴파일된 클래스 및 모듈에 대한 JavaScript 컴파일 가능 F# 구현입니다.

단일 페이지 응용 프로그램/websharper-spa : HTML 및 F# 콘텐츠가 포함된 단일 페이지 HTML/JavaScript가 여기에 연결됩니다.

예를 들어 SPA 템플릿을 사용하여 SPA 프로젝트의 뼈대를 만듭니다. 방법은 다음과 같습니다.

$ dotnet new websharper-spa -lang f# -n helloSPA
The template "WebSharper 4 Single Page Application" was created successfully.
...
...

Note: helloSPA is project name which later becomes application name.

결과는 다음과 같습니다.

$ 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/
$

그게 다야. 이제 SPA 앱의 골격이 생겼습니다. 실행해 봅시다.

$ 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.

브라우저를 사용하여 http://localhost:5000 열기:



짜잔! WebSharper가 실행 중입니다. 이제 WebSharper를 사용하여 SPA 앱의 내용을 이해해야 합니다. 이것은 자체 기사가 필요합니다. 이 시점에서 F#, 패키지/lib 및 WebSharper에 대한 지식이 중요합니다.

템플릿 업데이트

새 릴리스가 있을 때마다 다음을 사용하여 템플릿을 항상 업데이트할 수 있습니다.

$ dotnet new -i "WebSharper.Templates::*"

즐거운 코딩하세요!