Skip to content

Commit

Permalink
Merge pull request MicrosoftDocs#2799 from cartermp/fsharp-qs
Browse files Browse the repository at this point in the history 
Add F# quickstart
  • Loading branch information
@GitHubber17
GitHubber17 authored Aug 28, 2018
2 parents 90b4ddd + 5cbcf01 commit e580b10
Show file tree
Hide file tree
Showing 5 changed files with 166 additions and 55 deletions.
Binary file added docs/ide/media/hello-world-fs-get-member.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/ide/media/hello-world-fs-sln-explorer.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
76 changes: 76 additions & 0 deletions docs/ide/quickstart-fsharp.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
---
title: "Quickstart: Create an ASP.NET Core web service in F#"
description: "Learn how to create an ASP.NET Core web service in Visual Studio with F#, step-by-step."
ms.date: 08/24/2018
ms.prod: visual-studio-dev15
ms.technology: vs-acquisition
ms.prod: visual-studio-dev15
ms.topic: quickstart
author: "cartermp"
ms.author: "phcart"
manager: andrehal
dev_langs:
- FSharp
ms.workload:
- "aspnet"
- "dotnetcore"
---
# Quickstart: Use Visual Studio to create your first ASP.NET Core web service in F#

In this 5-10 minute introduction to F# in Visual Studio , you'll create an F# ASP.NET Core web application.

If you haven't already installed Visual Studio, go to the [Visual Studio downloads](https://visualstudio.microsoft.com/downloads/?utm_medium=microsoft&utm_source=docs.microsoft.com&utm_campaign=button+cta&utm_content=download+vs2017) page to install it for free.

## Create a project

First, you'll create an ASP.NET Core Web API project. The project type comes with template files that constitute a functional web service, before you've even added anything!

1. Open Visual Studio 2017.

2. From the top menu bar, choose **File** > **New** > **Project**.

3. In the **New Project** dialog box, in the left pane, expand **Visual F#**, then choose **Web**. In the middle pane, choose **ASP.NET Core Web Application**, then choose **OK**.

If you don't see the **.NET Core** project template category, choose the **Open Visual Studio Installer** link in the left pane. The Visual Studio Installer launches. Choose the **ASP.NET and web development** workload, then choose **Modify**.

![ASP.NET workload in VS Installer](../ide/media/quickstart-aspnet-workload.png)

4. In the **New ASP.NET Core Web Application** dialog box, select **ASP.NET Core 2.1** from the top drop-down menu. (If you don't see **ASP.NET Core 2.1** in the list, install it by following the **Download** link that should appear in a yellow bar near the top of the dialog box.) Choose **OK**.

## Explore the IDE

1. In the **Solution Explorer** toolbar, expand the **Controllers** folder, then choose **ValuesController.fs** to open it in the editor.

![Solution Explorer with Controllers folder expanded in F# Web API project](../ide/media/hello-world-fs-sln-explorer.png)

2. Next, modify the `Get()` member to be the following:

```fsharp
[<HttpGet>]
member this.Get() =
let values = [|"Hello"; "World"; "First F#/ASP.NET Core web API!"|]
ActionResult<string[]>(values)
```

The code is straightforward. An F# array of values is bound to the `values` name, and then passed to the ASP.NET Core MVC framework as an `ActionResult`. ASP.NET Core takes care of the rest for you.

It should look like this in the editor:

![Modified Get member](../ide/media/hello-world-fs-get-member.png)

## Run the application

1. Press **Ctrl**+**F5** to run the application and open it in a web browser.

2. The page should navigate to the `/api/values` route, but if it does not, enter `https://localhost:44396/api/values` into your browser.

The web browser will now display JSON matching what you typed earlier.

## Next steps

Congratulations on completing this Quickstart! We hope you learned a little bit about F#, ASP.NET Core, and the Visual Studio IDE. To see the app running on a public server, select the following button.

> [!div class="nextstepaction"]
> [Deploy the app to Azure App Service](../deployment/quickstart-deploy-to-azure.md)
To learn more about F#, check out the official [F# Guide](/dotnet/fsharp/index).
143 changes: 88 additions & 55 deletions docs/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,33 +102,46 @@ ms.topic: hub-page
<div class="cardText">
<h3>Get started with a tutorial</h3>
<h4>Choose a programming language</h4>
<table cellpadding="0" cellspacing="0" border="0"><tr><td style="border-top-color:transparent!important;padding-left:0;">
<ul class="noBullet"> <li>
<a class="barLink" href="/cpp/build/vscpp-step-0-installation">
<img src="https://docs.microsoft.com/media/logos/logo_Cplusplus.svg" alt="">
C++</a>
</li>
<li>
<a class="barLink" href="/visualstudio/ide/tutorial-csharp-aspnet-core">
<img src="https://docs.microsoft.com/media/logos/logo_CSharp.svg" alt="">
C#</a>
</li>
<li>
<a class="barLink" href="/visualstudio/ide/tutorial-visual-basic-console">
<img src="https://docs.microsoft.com/media/logos/logo_vb.svg" alt="">
Visual Basic</a>
</li></ul></td><td style="border-top-color:transparent!important;padding-left:0;"><ul class="noBullet">
<li>
<a class="barLink" href="/visualstudio/python/tutorial-working-with-python-in-visual-studio-step-01-create-project">
<img src="https://docs.microsoft.com/media/logos/logo_python.svg" alt="">
Python</a>
</li>
<li>
<a class="barLink" href="/visualstudio/javascript/tutorial-nodejs/">
<img src="https://docs.microsoft.com/media/logos/logo_nodejs.svg" alt="">
Node.js</a>
</li>
</ul></td></tr></table>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="border-top-color:transparent!important;padding-left:0;">
<ul class="noBullet">
<li>
<a class="barLink" href="/cpp/build/vscpp-step-0-installation">
<img src="https://docs.microsoft.com/media/logos/logo_Cplusplus.svg" alt="">
C++
</a>
</li>
<li>
<a class="barLink" href="/visualstudio/ide/tutorial-csharp-aspnet-core">
<img src="https://docs.microsoft.com/media/logos/logo_CSharp.svg" alt="">
C#
</a>
</li>
<li>
<a class="barLink" href="/visualstudio/ide/tutorial-visual-basic-console">
<img src="https://docs.microsoft.com/media/logos/logo_vb.svg" alt="">
Visual Basic
</a>
</li>
</ul>
</td>
<td style="border-top-color:transparent!important;padding-left:0;">
<ul class="noBullet">
<li>
<a class="barLink" href="/visualstudio/python/tutorial-working-with-python-in-visual-studio-step-01-create-project">
<img src="https://docs.microsoft.com/media/logos/logo_python.svg" alt="">
Python</a>
</li>
<li>
<a class="barLink" href="/visualstudio/javascript/tutorial-nodejs/">
<img src="https://docs.microsoft.com/media/logos/logo_nodejs.svg" alt="">
Node.js</a>
</li>
</ul>
</td>
</tr>
</table>
</div>
</div>
</div>
Expand All @@ -141,34 +154,54 @@ ms.topic: hub-page
<div class="cardText">
<h3>Try a 5-minute Quickstart</h3>
<h4>Build "Hello, World" in the language of your choice.</h4>
<table cellpadding="0" cellspacing="0" border="0"><tr><td style="border-top-color:transparent!important;padding-left:0;">
<ul class="noBullet">
<li>
<a class="barLink" href="/visualstudio/ide/getting-started-with-cpp-in-visual-studio">
<img src="https://docs.microsoft.com/media/logos/logo_Cplusplus.svg" alt="">
C++</a>
</li>
<li>
<a class="barLink" href="/visualstudio/ide/quickstart-aspnet-core">
<img src="https://docs.microsoft.com/media/logos/logo_CSharp.svg" alt="">
C#</a>
</li>
<li>
<a class="barLink" href="/visualstudio/ide/quickstart-visual-basic-console">
<img src="https://docs.microsoft.com/media/logos/logo_vb.svg" alt="">
Visual Basic</a>
</li></ul></td><td style="border-top-color:transparent!important;padding-left:0;"><ul class="noBullet">
<li>
<a class="barLink" href="/visualstudio/ide/quickstart-python">
<img src="https://docs.microsoft.com/media/logos/logo_python.svg" alt="">
Python</a>
</li>
<li>
<a class="barLink" href="/visualstudio/ide/quickstart-nodejs">
<img src="https://docs.microsoft.com/media/logos/logo_nodejs.svg" alt="">
Node.js</a>
</li>
</ul></td></tr></table>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="border-top-color:transparent!important;padding-left:0;">
<ul class="noBullet">
<li>
<a class="barLink" href="/visualstudio/ide/quickstart-aspnet-core">
<img src="https://docs.microsoft.com/media/logos/logo_CSharp.svg" alt="">
C#
</a>
</li>
<li>
<a class="barLink" href="/visualstudio/ide/quickstart-fsharp">
<img src="https://docs.microsoft.com/dotnet/images/hub/fsharp.svg" alt="F# logo">
F#
</a>
</li>
<li>
<a class="barLink" href="/visualstudio/ide/quickstart-visual-basic-console">
<img src="https://docs.microsoft.com/media/logos/logo_vb.svg" alt="">
Visual Basic
</a>
</ul>
</td>
<td style="border-top-color:transparent!important;padding-left:0;">
<ul class="noBullet">
<li>
<a class="barLink" href="/visualstudio/ide/getting-started-with-cpp-in-visual-studio">
<img src="https://docs.microsoft.com/media/logos/logo_Cplusplus.svg" alt="">
C++
</a>
</li>
<li>
<a class="barLink" href="/visualstudio/ide/quickstart-python">
<img src="https://docs.microsoft.com/media/logos/logo_python.svg" alt="">
Python
</a>
</li>
<li>
<a class="barLink" href="/visualstudio/ide/quickstart-nodejs">
<img src="https://docs.microsoft.com/media/logos/logo_nodejs.svg" alt="">
Node.js
</a>
</li>
</ul>
</td>
</td>
</tr>
</table>
</div>
</div>
</div>
Expand Down
2 changes: 2 additions & 0 deletions docs/toc.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,8 @@
href: ide/quickstart-nodejs.md
- name: "C#: Create a web app"
href: ide/quickstart-aspnet-core.md
- name: "F#: Create a web service"
href: ide/quickstart-fsharp.md
- name: "C#: Create a UWP app"
href: ide/quickstart-uwp-csharp.md
- name: "Visual Basic: Create a console app"
Expand Down

0 comments on commit e580b10

Please sign in to comment.