Routes

Atlet allows you to write routes in variety of ways. Let's check some of them.

JSX

Your routes can just return JSX component, which will be rendered as HTML. 

/**@jsx h */
/**@jsxFrag Fragment */
import { serve } from 'https://deno.land/std/http/server.ts'
import { Props, h, Fragment } from 'https://deno.land/x/atlet@1.2.0/mod.ts'

const handler = await createHandler({
  '/': (props: Props) => (
    <h1>Hello from {props.url.hostname}</h1>
  )
})

// you can also use Deno.serve which is available in Deno 1.35
serve(handler)

Since everything in here is primarily SSR, you can even write async routes which are returning JSX.

/**@jsx h */
/**@jsxFrag Fragment */
import { serve } from 'https://deno.land/std/http/server.ts'
import { Props, h, Fragment } from 'https://deno.land/x/atlet@1.2.0/mod.ts'
import Database from 'legit-db'

const handler = await createHandler({
  '/': async (props: Props) => {
    const post = await Database.getRandomPost()

    return (
      <div>
        <h1>{post.title}</h1>
        <p>{post.text}</p>
      </div>
    )
  }
})

// you can also use Deno.serve which is available in Deno 1.35
serve(handler)

Of course, you don't have to have all of the component definitions in one file. You can write your components in a separate files, and reference them later.

Posts.tsx
/**@jsx h */
/**@jsxFrag Fragment */
import { Props, h, Fragment } from 'https://deno.land/x/atlet@1.2.0/mod.ts'
import Database from 'legit-db'

export default async function Posts(props: Props) {
  const posts = await Database.getAllPosts()

  return (
    <>
      {posts.map((post) => (
        <div>
          <h1>{post.title}</h1>
          <p>{post.text}</p>
        </div>
      ))}
    </>
  )
}
main.tsx
/**@jsx h */
/**@jsxFrag Fragment */
import { h, Fragment } from 'https://deno.land/x/atlet@1.2.0/mod.ts'
import Posts from './Posts.tsx'

const handler = await createHandler({
  '/posts': Posts, // This will work
  '/posts-idk': (props: Props) => (
    <Posts {...props} />, // This will also work
  )
})

By default, every page is rendered with this HTML template. The only thing which you can currently modify is the head part and the language of the html part.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <!-- Your content is injected here -->
</html>

HTTP responses

If you just want to return Deno's builtin Response object.

/**@jsx h */
/**@jsxFrag Fragment */
import { serve } from 'https://deno.land/std/http/server.ts'
import { Props, h, Fragment } from 'https://deno.land/x/atlet@1.2.0/mod.ts'

const handler = await createHandler({
  '/api/json': () => {
    return new Response(JSON.stringify({ msg: 'Hello' }), {
      status: 200,
    })
  },
  '/redirect': () => {
    return new Response(null, {
      status: 302,
      headers: {
        Location: '/some-other-web',
      },
    })
  }
})

// you can also use Deno.serve which is available in Deno 1.35
serve(handler)

Or you can use builtin utility methods for returing just basic data.

/**@jsx h */
/**@jsxFrag Fragment */
import { serve } from 'https://deno.land/std/http/server.ts'
import { Props, h, Fragment, json, text, redirect } from 'https://deno.land/x/atlet@1.2.0/mod.ts'

const handler = await createHandler({
  '/api/json': () => json({
    msg: 'Hello',
  }),
  '/api/text': () => text('Hello'),
  '/redirect': () => redirect('/some-other-web')
})

// you can also use Deno.serve which is available in Deno 1.35
serve(handler)

Route params

Atlet also allows you to write very simple dynamic routes with dynamic parameters. You can define them using a colon, and later extract them from the props.params object.

/**@jsx h */
/**@jsxFrag Fragment */
import { serve } from 'https://deno.land/std/http/server.ts'
import { Props, h, Fragment } from 'https://deno.land/x/atlet@1.2.0/mod.ts'

const handler = await createHandler({
  '/hello/:name': (props: Props) => (
    <h1>Hello {props.params.name}</h1>
  )
})

// you can also use Deno.serve which is available in Deno 1.35
serve(handler)

previous

Intro

next

Props