a first look at aleph.js

Should have called it Dext.

Install Aleph

deno install -A -f -n aleph https://deno.land/x/aleph@v0.2.24/cli.ts
export PATH="/Users/ac/.deno/bin:$PATH"
aleph init ajcwebdev-aleph

Start development server

cd ajcwebdev-aleph
aleph dev

My port 8080 is forever stuck on Nginx from a botched install attempt. If you know how to fix that please let me know.

Open browser to localhost:8081

Directory structure

index.tsx

import { Import, useDeno } from 'https://deno.land/x/aleph/mod.ts'
import React, { useState } from 'https://esm.sh/react'
import Logo from '../components/logo.tsx'

export default function Home() {
  const [count, setCount] = useState(0)
  const version = useDeno(() => {
    return Deno.version
  })

  return (
    <div className="page">
      <Import from="../style/index.less" />
      <p className="logo"><Logo /></p>
      <h1>Welcome to use <strong>Aleph.js</strong>!</h1>

      <p className="links">
        <a href="https://alephjs.org" target="_blank">Website</a>
        <span>&middot;</span>
        <a href="https://alephjs.org/docs/get-started" target="_blank">Get Started</a>
        <span>&middot;</span>
        <a href="https://alephjs.org/docs" target="_blank">Docs</a>
        <span>&middot;</span>
        <a href="https://github.com/postui/alephjs" target="_blank">Github</a>
      </p>

      <p className="counter">
        <span>Counter:</span>
        <strong>{count}</strong>
        <button onClick={() => setCount(n => n - 1)}>-</button>
        <button onClick={() => setCount(n => n + 1)}>+</button>
      </p>

      <p className="copyinfo">Built by Aleph.js in Deno v{version.deno}</p>
    </div>
  )
}

Edit the home page

return (
  <div className="page">
    <Import from="../style/index.less" />
    <p className="logo"><Logo /></p>
    <h1>ajcwebdev</h1>

    <p className="links">
      <a href="https://dev.to/ajcwebdev" target="_blank">Blog</a>
      <span>&middot;</span>
      <a href="https://github.com/ajcwebdev" target="_blank">Github</a>
    </p>

    <p className="copyinfo">Built by Aleph.js in Deno v{version.deno}</p>
  </div>
)