Starter ​

The previous minimal example but with additional (optional) files recommended for going from prototype to production.

📄 main.tsx ​

The main.tsx file is the entrypoint of your project. It is the only file that is required to be present and the one that actually gets executed (e.g. deno run -A --unstable main.tsx). The project's module graph will be built dynamically from this file and all its dependencies.

Note that we can import directly from sift/ since we have registered it as a dependency in the "imports" field of the deno.json(c) file.

import { json, jsx, serve } from 'sift/mod.ts'

function App() {
  return <div>
    <h1>Hello World!</h1>
  </div>
}

function NotFound() {
  return <div>
    <h1>Page not found</h1>
  </div>
}

serve({
  '/': () => jsx(<App />), // server-side render a page using JSX/TSX
  '/api': () => json({ message: 'Hello World!' }), // return JSON
  '404': () => jsx(<NotFound />, { status: 404 }), // return a 404 page
})

import { json, jsx, serve } from 'sift/mod.ts'

function App() {
  return <div>
    <h1>Hello World!</h1>
  </div>
}

function NotFound() {
  return <div>
    <h1>Page not found</h1>
  </div>
}

serve({
  '/': () => jsx(<App />), // server-side render a page using JSX/TSX
  '/api': () => json({ message: 'Hello World!' }), // return JSON
  '404': () => jsx(<NotFound />, { status: 404 }), // return a 404 page
})

⚙️ deno.json(c) ​

A deno.jsonc or deno.json file used to configure the Deno runtime for local development and deployments (soon). It is a good practice to include a deno.json(c) file at the root of the project. See the Deno Manual for more information on the Deno Configuration File.

{
  "imports": {
    "@/": "./",
    "netzo/": "https://deno.land/x/[email protected]/",
    "preact": "https://esm.sh/[email protected]",
    "preact/": "https://esm.sh/[email protected]/"
  }
}

{
  "imports": {
    "@/": "./",
    "netzo/": "https://deno.land/x/[email protected]/",
    "preact": "https://esm.sh/[email protected]",
    "preact/": "https://esm.sh/[email protected]/"
  }
}

📑 readme.md ​

The readme.md is used to provide general information about a project like title, description, documentation and references. It is a good practice to include a readme.md file at the root of the project.

The structure of this file is up to you. Here is sample template:

# Project Title

Simple overview of use/purpose.

## Description

An in-depth paragraph about your project and overview of use.

## References

- [Reference 1](https://example.com)

# Project Title

Simple overview of use/purpose.

## Description

An in-depth paragraph about your project and overview of use.

## References

- [Reference 1](https://example.com)