https://github.com/jcs224/oak_inertia

Oak middleware for Inertia.js
https://github.com/jcs224/oak_inertia

deno hacktoberfest inertiajs oak

Last synced: 26 days ago
JSON representation

Oak middleware for Inertia.js

• Host: GitHub
• URL: https://github.com/jcs224/oak_inertia
• Owner: jcs224
• Created: 2021-06-24T17:00:16.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-11-26T19:43:48.000Z (almost 2 years ago)
• Last Synced: 2024-09-16T15:07:43.852Z (about 2 months ago)
• Topics: deno, hacktoberfest, inertiajs, oak
• Language: TypeScript
• Homepage: https://deno.land/x/oak_inertia
• Size: 12.7 KB
• Stars: 8
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

• awesome-inertiajs - Oak (Deno)

README

        
# Inertia.js middleware for Oak framework

This middleware can be used to easily enable Inertia.js client libraries to interact with your Oak-based application. It checks for the Inertia header from the client on request, and modifies the response accordingly. Supports both the Deno CLI and Deno Deploy environments.

## Setup

```js

import { Application, Router } from 'https://deno.land/x/oak/mod.ts'

import { Inertia } from 'https://deno.land/x/oak_inertia/mod.ts'

// Instantiate Oak app

const app = new Application()

// Provide a template string

// Put '@inertia' somewhere in the body, which will be replaced by the Inertia bootstrapping frontend code

const template = `

  

  

  

  Deno and Inertia app

  @inertia

`

// Optional function to determine Inertia version

const checkVersion = () => {

  return Deno.env.get('OPTIONAL_INERTIA_VERSION')

}

// Add Inertia middleware to global Oak middleware stack

app.use(Inertia.initMiddleware(template, checkVersion))

// Use the Oak router

const router = new Router()

// use the 'inertia.render()' method now attached to the Oak context to render an Inertia page

router.get('/', (ctx, next) => {

  const componentName = 'HomePage'

  const payloadObject = {

    username: 'johndoe',

    email: '[email protected]'

  }

  ctx.state.inertia.render(componentName, payloadObject)

})

```

## SSR

Because React and Deno both use similar JavaScript functionality, SSR on initial page load is pretty feasible to achieve!

Full instructions aren't available yet on how to do this, but for now, here is an optional argument to inject custom server-side code into the initial template.

### Example Oak route with SSR string

```ts

// Make sure you have React loaded in Deno

import React from 'https://cdn.skypack.dev/[email protected]'

import { renderToString } from 'https://cdn.skypack.dev/[email protected]/cjs/react-dom-server.browser.production.min.js'

// Import a server-side render-able component

import ReactPage from './Pages/ReactPage.tsx'

// Example Oak route with SSR string

router.get('/', (ctx, next) => {

  const componentName = 'HomePage'

  const payloadObject = {

    username: 'johndoe',

    email: '[email protected]'

  }

  ctx.state.inertia.render(componentName, payloadObject, renderToString())

})

```