freekrai/directed-stack

Directus + Remix full-stack starter

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

directed-stack's Issues

Blog post image is not loading

Have you experienced this bug with the latest version of the template?

yes

Steps to Reproduce

create a blog post with an image, preview the post

Expected Behavior

user should see the image attached,

Actual Behavior

image is not loading

the function getAssetURL behaves like it would get an actual ID of an image, gets object instead, this is why the final url ends up like this: ${env.DIRECTUS_URL}/assets/[object Object]

My suggestion would be to change it to something like this:

export function getAssetURL(image: any) {
if (!image || !image.id) return null;
return "${env.DIRECTUS_URL}/assets/${image.id}";
}

I am happy to provide PR, just not that experienced in Directus yet, maybe I am missing something.

Move from wpslugs extension to using a flow to generate slugs

Discussed in #4

^{Originally posted by freekrai October 7, 2022}
Currently, we use the wpslugs extension to generate slugs, this means deploying to Directus cloud is limited.

To improve support for everywhere, and to make use of the great Flows Data Studio, I want to switch this to use Flows rather than an extension to generate the slugs. This is the Flow I generally use now, and will be adding to the site, as I move away from including the slugs extension.

This also means adding a flows step to the docs as well.