OsmosJS

Getting Started

Edit on Github

Installation

Install and configure the package using the following command :

node ace add @osmosjs/adonis@alpha
See steps performed by this command

Installs @osmosjs/osmos

Installs the @osmosjs/osmos package using the detected package manager.

Register providers

Registers the following service providers inside the adonisrc.ts file

adonisrc.ts
{
  providers: [
    // ...other providers
    () => import("@osmosjs/osmos/providers/osmos")
  ]
}

Register commands

Registers the following commands inside the adonisrc.ts file

adonisrc.ts
{
  commands: [
    // ...other commands
    () => import("@osmosjs/osmos/commands")
  ]
}

Generates configuration

A configuration file config/osmos.ts is generated containing the default configuration.

Getting Started

Create your first component. This is usually located inside app/osmos.

Your First Component

app/osmos/pages/home.tsx
export function HomePage() {
  return (
    <html>
      <body>
        <h1>Hello world</h1>
      </body>
    </html>
  )
}

Then inside a route handler render the component using osmos.render().

route.ts
import router from '@adonisjs/core/services/router'
import { HomePage } from '#osmos/pages/home'

router.get('/', ({ osmos }) => {
  return osmos.render(HomePage)
})

Async Components

As Osmos runs exclusively on the server you can use async function and fetch values directly from your components.

const UsersList = async () => {
  const users = await User.all()

  return (
    <ul>
      {users.map((user) => (
        <li>{user.firstName}</li>
      ))}
    </ul>
  )
}

Accessing HttpContext

The Adonis Integration for osmos automatically provides an Adonis Extension using the Context feature.

import { Adonis } from '@osmosjs/adonis'

const UserIP = () => {
  const adonis = Adonis.getOrFail()

  return <div>Your IP is: {adonis.context.request.ip}</div>
}

Going Further

On this page