Subscribe

Resource routes in Remix

✍️

How to create different resource routes in Remix

2 May, 2022 Β· 2 min read

So far, we have been looking at routes in Remix, and they are always HTML-based output routes.

It means they render some HTML, but what happens if we want to have a different route type?

Some examples:

  • JSON endpoints
  • Images
  • PDF files

Don't worry. Remix got your back on that, as we can use their fantastic resource routes for this.

Resource routes in Remix

There are multiple ways of achieving the endpoint URL to create these routes.

You can create any of the following formats:

- app/routes/reports/$id/pdf.ts
- app/routes/reports/$id[.pdf].ts
- app/routes/reports/$id[.]pdf.ts
- app/routes/reports.$id[.]pdf.ts

All of these will have the same output format:

http://yourwebsite.com/reports/id.pdf

But let's see how we can output it as a file rather than plain HTML. To achieve this we have to use the loader function to change our output like this:

export async function loader({ params }) {
  const report = await getReport(params.id);
  const pdf = await generateReportPDF(report);
  return new Response(pdf, {
    status: 200,
    headers: {
      'Content-Type': 'application/pdf',
    },
  });
}

This example uses some functions we don't have, including the getReport and generateReportPDF functions. This means it's only an example of how you can achieve it (taken from the official Remix docs).

Using different types

Let's say we instead want to have a JSON format?

Let's change our document to the following format:

app/routes/reports.$id[.]pdf.ts

import { json } from '@remix-run/node';

export async function loader({ params }) {
  return json({ foo: params.id });
}

We format the ID from our dynamic URL into a JSON object in this example.

JSON output in Remix

This is pretty cool. This way, we can support all these different formats in Remix.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next πŸ“–

Adding Markdown plugins in Remix

15 May, 2022 Β· 2 min read

Adding Markdown plugins in Remix

Remix Markdown overview page

14 May, 2022 Β· 3 min read

Remix Markdown overview page

Join 1372 devs and subscribe to my newsletter