The Directed Stack: A Full-Stack App built with Remix and Directus

The Directed Stack is a full-stack Remix stack that combines Directus as the backend and Remix for the app, easily customizable to build on

I use Directus for a lot of apps, from this blog, to several other projects.

The Directed Stack is based on the apps I built, you can see a demo where you can see the about page, blog posts and sign up and add markdown notes (based on the Indie Stack), all the backend work is stored in Directus.

To get started, you can fork the repo or run the following command:

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

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

You can then import your schema into your local Directus by going into the scripts folder, save .env.example to .env, and save the required info then run:

cd scripts
node schema.mjs

This will create the collections locally in Directus, you can update the .env and run it again once your deploy (we'll talk about that further down).

If you want to test creating users locally, then you'll also need to create a users role inside the Directus Data Studio, which needs the following permissions (again, we'll talk about that further down with prod):

• 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

Also edit the public role:

• directus_files
  • view: all access

Finally, let's load the remix app.

Copy .env.example into .env and fill out the info:

# run openssl rand -hex 32 to generate
SESSION_SECRET=session-secret

# DirectUs
DIRECTUS_URL=http://localhost:8055
DIRECTUS_STATIC_TOKEN=static-token
DIRECTUS_USER_ROLE=role-to-give-frontend-users

Now run yarn dev and go to http://localhost:3000.

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 repo instead.

Which will create the necessary collections on your deployed Directus site.

Permissions

Earlier, we setup permissions for testing everything locally, we need to do the same thing to our deployed site, so create a users user role, which has permissions as follows:

• 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

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

Also edit the public role:

• directus_files
  • view: all access

Vercel

The vercel button is already preloaded with the information you need to get deploying to Vercel

What's Next?

You can build on this pretty easily to create pretty much any type of app.

<callout-info>

Stay tuned for a more detailed post about how to build this site out step by step coming soon 🙏🏻

</callout-info>