Getting Started
Installation
Install and configure the package using the following command :
node ace add @osmosjs/adonis@alphaSee 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
Register commands
Registers the following commands inside the adonisrc.ts file
Getting Started
Create your first component. This is usually located inside app/osmos.
Your First Component
export function HomePage() {
return (
<html>
<body>
<h1>Hello world</h1>
</body>
</html>
)
}Then inside a route handler render the component using osmos.render().
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>
}