Getting Started

Starting a new Wisp project can be done using a template or manually.

Using Templates

dotnet new install Wisp.Framework.Templates

dotnet new wisp.mvc

dotnet run

Then go to http://localhost:6969 and enjoy your new Wisp app.

(Wisp defaults to the port 6969)

Manually

Create a new Console application, add the Wisp dependency and create the basic folder structure.

dotnet new console

dotnet add package Wisp.Framework.Core

mkdir wwwroot
mkdir Templates
mkdir Controllers

Create a Wisp application in your Program.cs and enable basic functionality

using System.Reflection;
using Wisp.Framework;
using Wisp.Framework.Controllers;

var hostBuilder = new WispHostBuilder();

// Enable the flash message middleware
hostBuilder.UseFlashMessages();

// Enable the in-memory session store
// a session store is required for flash messages
hostBuilder.UseInMemorySession();

// Enable auto-discovery of services with the [Service] attribute
hostBuilder.UseServiceDiscovery(Assembly.GetExecutingAssembly());

// Enable serving static files from wwwroot/
hostBuilder.UseStaticFiles();

var appBuilder = hostBuilder.Build();

// Enable controller autodiscovery
appBuilder.UseControllers();

var app = appBuilder.Build();

await app.RunAsync();

Add a controller to Controllers/HelloWorldController.cs

[Controller]
public class HelloWorldController : ControllerBase
{
    // The root path "/" maps to an empty string route.
    [Route("")]
    public ViewResult GetIndex() => View("index", new { Name = "World" });
}

Create a CSS file in wwwroot/app.css

.hello-world {
    font-size: 4em;
    color: red;
}

Create a template in Templates/index.liquid

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Hello World</title>

  <!-- Link our stylesheet. Static files from `wwwroot/` are available at `/` -->
  <link rel="stylesheet" href="/app.css" />
</head>
<body>
  <h1>Hello, {{ model.name }}!</h1>
</body>
</html>

Your project structure should now look like this:

My.Project/
├─ Templates/
│  ├─ index.liquid
├─ wwwroot/
│  ├─ app.css
├─ Controllers/
│  ├─ HelloWorldController.cs
├─ Program.cs

Now, run your application with dotnet run and open http://localhost:6969 in your browser. If everything is configured correctly, you should see Hello, World! rendered in red.

(Wisp defaults to the port 6969)

Congratulations, you've created your first Wisp application!