This is an example showing a basic integration of Remix with Strapi.

First, install dependencies in both the root folder (right here) and the strapi/ folder

npm i && (cd strapi && npm i)

Then, start both the Remix and the Strapi app concurrently with

npm run dev

In this example, a Strapi project was scaffolded at strapi/. The installation type is Quickstart, which uses SQLite as its default database. You can find it at strapi/.tmp/data.db.

Note that in a real app, you'd likely have either a separate repository or a monorepo setup for your Strapi app. This is for demo purposes only.

Strapi's administration panel is at http://localhost:1337/admin.

# Credentials
Email:    strapi@remix.example
Password: Passw0rd

Besides User, there is another collection type Post with the fields Title (Text) and Article (Rich text).

You'll find one pre-written article in the content manager. Feel free to add some more!

The Remix app is at http://localhost:3000.

It has exactly one route app/routes/_index.tsx which utilises a loader function to fetch all Posts from an external API (Remix docs), which in this case is Strapi's API.

Remix will then continue to render all the posts. To show a somewhat real-world example, the loader parses the Article (Rich text) (aka Markdown) into HTML with the help of marked.