Directed Stack

Learn more about Remix Stacks.

npx create-remix --template freekrai/directed-stack

What's in the stack

• Healthcheck endpoint (/api/healthcheck)
• Email/Password Authentication with cookie-based sessions
• Directus handling auth, blog, pages, and backend storage
• Styling with Tailwind
• Markdown rendering by Markdoc
• Code formatting with Prettier
• Linting with ESLint
• Static Types with TypeScript

Not a fan of bits of the stack? Fork it, change it, and use npx create-remix --template your/repo! Make it your own.

Quickstart

Follow this tutorial to get started with the Directed Stack, there's a more in-depth step by step guide coming shortly.

Click this button to create a Gitpod workspace with the project set up, Postgres started, and Fly pre-installed

Development

This repo contains two folders plus the root:

• directus: our Directus headless CMS
• scripts: our Directus schema
• /: our Remix app

First run

On first one, clone this repo and run:

yarn
yarn setup

Then go into the directus folder and set up for local development by copying your .env.example into .env and filling out the fields.

Then run:

npx directus bootstrap

Markdown

We use Markdoc to render our markdown.

This lets us do syntax highlighting as well as adding other components, one example component is callouts

{% callout title="You should know!" %}
This is what a note message looks like. You might want to include inline code in it. Or maybe you’ll want to include a link in it. I don’t think we should get too carried away with other scenarios like lists or tables — that would be silly.
{% /callout %}

{% callout type="warning" title="Oh no! Something bad happened!" %}
This is what a disclaimer message looks like. You might want to include inline code in it. Or maybe you’ll want to include a link in it. I don’t think we should get too carried away with other scenarios like lists or tables — that would be silly.
{% /callout %}


{% callout type="success" title="Oh no! Something good happened!" %}
This is what a success message looks like. You might want to include inline code in it. Or maybe you’ll want to include a link in it. I don’t think we should get too carried away with other scenarios like lists or tables — that would be silly.
{% /callout %}

Deploying

Railway

This app uses a slugs extension that you want pre-installed, you can use my Directus Railway repo to get started on Railway, to deploy Directus to railway, click:

You can find more info on this repo here.

Fly.io

If you're prefer to install Directus on Fly.io, you can follow this repo instead.

Directus Cloud

Directus also gives a terrific option of hosting via their cloud service, but you can’t use extensions on the free tier so the included schema would need to be changed so that the slug field is just a text field instead.

Migrate Schema

Once deployed, save .env.example to .env, and save the required info then run the following to to create the necessary collections:

cd scripts
node schema.mjs

Users & Permissions

We also need to create a users user role, which has permissions to:

• notes
  • create: all access
  • view: where created By equals $CURRENT_USER
  • edit: where created By equals $CURRENT_USER
  • remove: where created By equals $CURRENT_USER
• users:
  • view: all access, Directus handles the proper rules
  • edit: where ID equals $CURRENT_USER

On the same page, there are checkboxes for app and admin, uncheck both of these if they are checked as this role will be through the api only.

Take note of this role's ID as you'll need it when you deploy the remix app

As for images, one recommended approach is to create a folder inside files called public or posts, make note of the ID then go into roles & permissions, edit the public role,

• directus_files
  • view: where Folder equals ID of folder you created
    • Then select just the ID field

This way, only images inside the posts or public folder is available publicly.

If you don't want to deal with folders, then you can make all directus_files publically viewable, the choice is yours.

Deploying the Remix app to Vercel