Getting Started

To create a sample application:

• Create a new Console project
• Add the NuGet package Integrative.Lara
• In the program.cs file, paste the following code:

using Integrative.Lara;
using System;
using System.Threading.Tasks;

namespace SampleApp
{
    public static class Program
    {
        public static async Task Main()
        {
            // create and start application
            const int port = 8182;
            using var app = new Application();
            app.PublishPage("/", () => new MyCounterComponent { Value = 5 });
            await app.Start(new StartServerOptions { Port = port });

            // print address on console (set project's output type to WinExe to avoid console)
            var address = $"http://localhost:{port}";
            Console.WriteLine($"Listening on {address}/");

            // helper function to launch browser (comment out as needed)
            LaraUI.LaunchBrowser(address);

            // wait for ASP.NET Core shutdown
            await app.WaitForShutdown();
        }
    }

    internal class MyCounterComponent : WebComponent
    {
        private int _value;
        public int Value { get => _value; set => SetProperty(ref _value, value); }

        public MyCounterComponent()
        {
            ShadowRoot.Children = new Node[]
            {
                new HtmlDivElement()
                    .Bind(this, x => x.InnerText = Value.ToString()),
                new HtmlButtonElement { InnerText = "Increase" }
                    .Event("click", () => Value++)
            };
        }
    }
}

After that, execute and verify that your program launches a browser tab, and this tab has a clickable button that increase a counter.

In the example above, we see 2 main sections of code:

• The Program class with the Main method, which is the entry point for out program
• the MyCounterComponent class, which defines a user interface component

The main program and our component are linked to each other with this line:

app.PublishPage("/", () => new MyCounterComponent { Value = 5 });

The purpose of that line is to associate the default URL ('/') with our component. Whenever a browser requests that URL, our program will return a page created with a new instance of our component.