fresh_gleam

A plugin to use Gleam inside of Fresh.

Features

• Use Gleam files inside of Fresh
• Create routes using Gleam
• You can even create a full Gleam app using Fresh

Roadmap

• Allow usage of pure Gleam Request and Response objects
• Add support for FreshContext in Gleam files

Instructions

Gleam only supports files inside of a src/ folder, so you will have to move your app into a src/ folder. See instructions

1. Add gleam.toml to your Fresh project

name = "main"
# Can be any name but remember to change
# the alias in the deno.json file as explained below
# and pass the name to the plugin
version = "0.1.0"
target = "javascript"

[javascript]
typescript_declarations = true # Needed if you want to use TypeScript
runtime = "deno"

1. Add fresh_gleam to plugins.

// deno.json
{
    "imports": {
        "fresh_gleam": "https://deno.land/x/fresh_gleam@v0.1.3/mod.ts"
        // Other imports
    }
}

// fresh.config.ts
import { defineConfig } from "$fresh/server.ts";
import { gleamPlugin } from "@notangelmario/fresh_gleam";
// Or add it directly from the URL
// import { gleamPlugin } from "jsr:@notangelmario/fresh_gleam@v0.1.3";

export default defineConfig({
    plugins: [
        // We use await because we want to wait for the gleam build to finish
        await gleamPlugin(Deno.cwd(), {
            // Optional, add Gleam project name. Default to "main"
            gleamProjectName: "main",
        }),
    ],
});

1. Add an alias to the compiled Gleam files and exclude the build folder

// deno.json
{
    "imports": {
        "$gleam/": "./build/dev/javascript/main/",
        // Other imports
    },
    "exclude": ["./build/*"]
}

1. Run Fresh

$ deno task start

And that’s it! Your Gleam files will be compiled an can be imported using the alias $gleam/.

How to use

You can import your Gleam files using the alias $gleam/:

// src/main.gleam
pub fn hello_from_gleam() -> String {
    "Hello from Gleam!"
}

// src/routes/index.tsx
import { hello_from_gleam } from "$gleam/main.mjs";

import { greet } from "$gleam/lib/utils.mjs";

You can also use Gleam files as routes:

// src/routes/api/hello.gleam
import gleam/http/request
import conversation.{type JsRequest, type JsResponse, translate_response}


pub fn handler(req: JsRequest) -> JsResponse {
    response.new(200)
    |> response.set_body(Text("Hello from Gleam!"))
    |> translate_response
}