Reshuffle API Serving

Posted on Nov 6 2019 by Ryland Goldstein

In the month since the launch of Reshuffle, the volume and quality of feedback has been nothing short of astounding. We’ve been so excited to see others engaged with and enjoying a product that we’ve poured our hearts into over the last 6 months. While the feedback made it clear to us that Reshuffle is solving many of the traditional fullstack development shortcomings, it was also clear that there were many problems left unsolved. Specifically, we received overwhelming feedback that people would like to bring their existing code onto the platform as well as expose endpoints from their Reshuffle apps.

Today we are excited to announce the newest feature of Reshuffle, API serving. The API serving feature enables Reshuffle apps to serve a public API, while relying on the tools you already love such as Express, GraphQL and Koa. To be clear, Reshuffle API serving is intended to be an extension to the existing Reshuffle experience, and you should feel free to use it in conjunction with the traditional decorator approach. Let’s take a closer look at how Reshuffle API serving works.

The first step we need to take to serve an API with Reshuffle is creating the _handler.js file in our Reshuffle apps backend directory. The file must be named _handler.js, as this makes it possible for the Reshuffle runtime to confidently identify whether your app has an API server. Within _handler.js you’ll need to import a few dependencies and create a traditional express app before you can start serving your API.


// backend/_handler.js

import express from 'express';
import { defaultHandler } from '@reshuffle/server-function';

const app = express();

Now that the boilerplate work is done, we can define a simple endpoint that will respond “Hello World” when users visit /hello:


import express from 'express';
import { defaultHandler } from '@reshuffle/server-function';

const app = express();

app.get('/hello', function(req, res) {
   res.send(‘Hello world!);
});

The defaultHandler is an express middleware which provides a mechanism to intercept HTTPS calls to your application, before the Reshuffle framework does. The defaultHandler is utilized like any other express middleware:


// backend/_handler.js

app.get('/hello', function(req, res) {
   res.send(‘Hello world!);
});

app.use(defaultHandler);

export default app;

It’s important to note that your express app must be exported as default from the _handler.js file because it provides the Reshuffle framework a deterministic way of importing your app. Here is the full “Hello World” example:


// backend/_handler.js

import express from 'express';
import { defaultHandler } from '@reshuffle/server-function';

const app = express();

app.get('/hello', function(req, res) {
   res.send(‘Hello world!);
});

app.use(defaultHandler);

export default app;

If this simple example wasn’t enough to make things clear, worry not. Here are three awesome Reshuffle apps that demonstrate how to utilize the new API feature:

Boilerplate API Serving (powered by GraphQL) app

CRUD API (powered by express) app