Exporting the dashboard

Before connecting Alinea to a backend we need to export the dashboard. We create a serverless/edge handler to host an API that connects the dashboard to the backend. Alongside we configure alinea to put together an html file and all static assets needed to host the dashboard.

Creating a handler

The handler can be deployed as a serverless function. Setting up this function will be different based on the framework and hosting provider you choose. We demonstrate setting up the handler for Next.js. If you're unsure how to handle this for other frameworks or hosts open an issue.

// pages/api/cms/[...slug].ts

// The nodeHandler utility exports the backend handle as a Node.js http handler
import {nodeHandler} from 'alinea/backend/router/NodeHandler'
// The generated backend file will connect to the backend we'll configure next
import {backend} from '@alinea/generated/backend.js'
// Handle cms API routes at /api/cms/[...slug]
export default nodeHandler(backend.handle)
// Disable the body parser middleware that next.js injects,
// we'll let the handler deal with it
export const config = {api: {bodyParser: false}}

Configuring static assets

The dashboard itself is hosted by deploying a static html file. Alinea generates this file and its assets for you once configured. Add the following options to alinea.config.tsx to get started.

export const config = createConfig({
  dashboard: {
    // The dashboard and its static assets will be generated in this location
    staticFile: './public/admin.html',
    // An url where the above file is hosted
    dashboardUrl: '/admin.html',
    // The url where the handler function created above is hosted
    handlerUrl: '/api/cms'
  },
  ...config
})

To generate run the following command. It's recommended to run this as part of your build step so it is run during CI deploys.

npx alinea generate

Connect with a backend

The final step is connecting your Alinea dashboard with a backend. Alinea ships with some packages that help you build a backend — or one can be hosted via our cloud service.

Continue with self-hosted backend

Alinea ships with some packages that help you build a backend from scratch.

Continue with cloud backend

Alinea.cloud provides a cloud service to setup a backend in a few clicks. It takes care of authentication, inviting other users to collaborate and pushing changes to Github.