Support Koa

[jaydenseric]

Is your feature request related to a problem? Please describe.
I struggling to work out how to serve Altair using altair-static via a custom route in a Koa app.

Describe the solution you'd like
Official Koa middleware that would allow Alitair to be served via a custom route in a Koa app.

[imolorhe]

@jaydenseric Nice to see someone trying to build around Altair 🙂What challenges are you facing with using altair-static?

This is how altair-express-middleware uses altair-static. Maybe this would help: https://github.com/imolorhe/altair/blob/0a454c81de01623fafc79ebbae173ee80177551f/packages/altair-express-middleware/index.ts#L15-L17

[jaydenseric]

I worked out how to get it working with koa-router. Here is what I arrived at:

import altair from 'altair-static'
import send from 'koa-send'
import { ROUTE_PATH_GRAPHQL, ROUTE_PATH_EXPLORER } from '../config'

/**
 * Creates the explorer route.
 */
export const createRouteExplorer = ({ router }) => {
  router.get(ROUTE_PATH_EXPLORER, async (ctx, next) => {
    if (ctx.path.substr(-1) !== '/') {
      ctx.status = 301
      ctx.redirect(`${ctx.path}/`)
    }

    ctx.body = altair.renderAltair({
      endpointURL: ROUTE_PATH_GRAPHQL
    })

    await next()
  })

  // I prefer to use the main favicon for my API subdomain.
  router.get(`${ROUTE_PATH_EXPLORER}/favicon.ico`, ctx => {
    ctx.status = 301
    ctx.redirect(`/favicon.ico`)
  })

  router.get(`${ROUTE_PATH_EXPLORER}/:path+`, async ctx => {
    await send(ctx, ctx.params.path, { root: altair.getDistDirectory() })
  })
}

To publish generic middleware you probably wouldn't want to assume the presence of koa-router.

[imolorhe]

Nice! When are you going to publish the koa middleware npm package?
To fix the need for the forward slash at the end of the URL, I am going to update altair-static to accept a baseURL which would be used as the base for relative URLs. That should take out the need for

if (ctx.path.substr(-1) !== '/') {
    ctx.status = 301
    ctx.redirect(`${ctx.path}/`)
}

[imolorhe]

The baseURL has been added in v2.1.2 so you should be able to set the baseURL and it should work fine without needing the leading slash at the end of the URL.

Still anticipating the release of your koa package! 😊

[imolorhe]

@jaydenseric Would you publish this as a package, or you would prefer if I published it myself?

[jaydenseric]

You've been very encouraging! It's probably best for the community though for all the different middlewares to be available side by side with altair-express-middleware in the main repo.

[imolorhe]

Alright.

[jaydenseric]

Thanks for releasing the Koa middleware, I'll give it a go now :)

It would be nice to mention the koa middleware in the readme, next to the Express content:

https://github.com/imolorhe/altair#usage-with-express

GitHub

imolorhe/altair

✨⚡️ A beautiful feature-rich GraphQL Client for all platforms. - imolorhe/altair

[imolorhe]

Yeah, good point.