Scaling out

[leolorenzoluis]

I apologize if I need a refresher since I just got back from vacation. Assume that I deploy the API to an EC2 instance and deploy the WebLit in S3. Where do I set the settings for WebLit URL calls?

Edit: I'm assuming when I call Remoting.createApi() that I set withBaseUrl and just pass in different vite.config.js when building depending on which environment?

[JordanMarr]

You can adjust it here:

https://github.com/JordanMarr/fable-lit-fullstack-template/blob/890dcc0a305f41106c68bfc9a7e3bf387340232d/Template/WebLit/src/Server.fs#L21

[leolorenzoluis]

@JordanMarr Thank you! How do I set specific virtualPath per env? Do you have pointers where to set in some build time?

Also, do you know if the Lit components are SEO friendly or do we need to implement SSR?

[JordanMarr]

I have used environment variables before, but that was using webpack. I’m not sure about how to set it up with vite. Not sure about the SEO optimization either.

Let me know if you figure it out.

[leolorenzoluis]

Curious, have you ever used your template to some deployed running environment?

[JordanMarr]

Yes, I have an app deployed that runs in an Azure app service.

[leolorenzoluis]

Are the frontend deployed somewhere else as static hosting or it's bundled together in Azure app service?

[JordanMarr]

I just bundled the front end and deployed it as part of the WebApi. It's easier that way since you don't need to do any extra configuration. The FAKE build should copy the client bundle to the wwwroot.

[leolorenzoluis]

What if you need to scale out... just scale it along with the backend... or have to perform CDNs on the front end as its own SPA?

[JordanMarr]

My app is very small, and so I have no need to do that. If you need to scale out, then you should continue down the path of deploying the front end by itself.

You will probably need to setup CORS on the backend to allow the front end to connect to it. And, of course, you will need to modify the frontend Server.fs file to point to the backend.

Here is some info on vitejs environment variables, but I haven't set this up before, so I'm not sure how helpful it will be.

[leolorenzoluis]

Thank you. I'll share what I find.

[JordanMarr]

If you want a super easy way to do it, you could just change it based on your Debug/Release mode, so it will happen automatically when you build:

module WebLit.Server

open System
open Fable.Remoting.Client
open Fable.Core

module Environment =
#if DEBUG
    let isDev = true
#else
    let isDev = false
#endif

/// Takes path segments and combines them into a valid path
let combine (paths: string list) =
    paths
    |> List.map (fun path -> List.ofArray (path.Split('/')))
    |> List.concat
    |> List.filter (fun segment -> not (segment.Contains(".")))
    |> List.filter (String.IsNullOrWhiteSpace >> not)
    |> String.concat "/"
    |> sprintf "/%s"

/// When publishing to IIS, your application most likely runs inside a virtual path (i.e. localhost/SafeApp)
/// every request made to the server will have to account for this virtual path
/// so we get the virtual path from the location
/// `virtualPath` of `http://localhost/SafeApp` -> `/SafeApp/`
let virtualPath : string =
    if Environment.isDev
    then "/"
    else "https://mybackend/api/"

/// Normalized the path taking into account the virtual path of the server
let normalize (path: string) = 
    combine [ virtualPath; path ]

let normalizeRoutes typeName methodName =
    Shared.Api.routerPaths typeName methodName
    |> normalize

let api =
    Remoting.createApi()
    |> Remoting.withRouteBuilder normalizeRoutes
    |> Remoting.buildProxy<Shared.Api.IServerApi>

[leolorenzoluis]

@JordanMarr Thank you. First timer question: Is there a way to integrate with tailwind CSS with shoe-lace with minimal work or we have to build the web components ourselves with the CSS or find web components lib that are unstyled?

I'm thinking to just use raw html with Tailwind CSS and use the @keyup etc for raw html tags?

[JordanMarr]

I've never used Tailwind. I usually just style things myself via CSS or inline styles.