Get Started – Lagon

This page will guide you through creating a simple JavaScript/TypeScript Edge Function and deploying it on Lagon Cloud using the CLI. The Function will be deployed globally in multiple regions, and will be accessible through a unique URL.

Installation

The first step is to install the Lagon CLI. For more information about it, read the CLI documentation.

# NPM
npm install --global @lagon/cli esbuild
# Yarn
yarn global add @lagon/cli esbuild
# PNPM
pnpm install --global @lagon/cli esbuild

Create a new Function

We will now create a new Function, that listens for Requests and replies with Responses. Remember the fetch function from browsers? We use the same native Web APIs!

Create a new file called hello.js / hello.ts and add the following code:

// hello.js
export function handler(request) {
  return new Response('Hello, <b>World!</b>', {
    headers: { 'content-type': 'text/html' }
  })
}

Deploy the Function

Head over to the Dashboard at https://dash.lagon.app (opens in a new tab) and create an account. Once you're logged in, go back to a terminal and login with your newly created account:

lagon login

This command will open a new tab in your browser, where you can copy an authentication token. Paste it in the terminal and press enter. You should now be logged in!

Now, let's deploy our Function:

# JavaScript
lagon deploy hello.js
# TypeScript
lagon deploy hello.ts

You will be asked to select the Organization where you want to deploy this Function. Press enter to select the one you just created.

Then, you will be asked to either link this Function to an existing one, or create a new Function. Here, we don't have any Function created yet, so press n to create a new one. Enter the name to give for this new Function, and press enter.

Wait a few seconds, and you should now see a message with an URL, indicating that your Function has been deployed successfully! You can now curl this URL, or access it directly in your browser. Learn more about the Runtime APIs.

Going further

Updating the Function's code

Now that we have a Function deployed, we would like to add a new feature and return the name of the user that is making the request. To do so, we will need to update the Function's code:

// hello.js
export function handler(request) {
  const url = new URL(request.url)
  const name = url.searchParams.get('name') || 'World'
 
  return new Response(`Hello, <b>${name}!</b>`, {
    headers: { 'content-type': 'text/html' }
  })
}

We can now re-deploy the Function with the same command as before, and append --prod to automatically promote this new Deployment to Production:

# JavaScript
lagon deploy hello.js --prod
# TypeScript
lagon deploy hello.ts --prod

Try to access your Function's URL again with /?name=Your name, and you should see the new message!

Debugging

During development, you can use lagon dev to launch a local development server that will automatically watch your Function's code:

# JavaScript
lagon dev hello.js
# TypeScript
lagon dev hello.ts

Running the above code will start a local server on port 1234 by default. You can now access your Function at http://localhost:1234 (opens in a new tab).

You can also use the console API to log messages, objects and more. When using lagon dev, the logs are displayed in your terminal. When the Function is deployed, the logs are accessible in the Dashboard. Learn more about logs.

Introduction Runtime APIs