arrow_back Back to Guides
Integration

Get Started Building a React Website with Directus

By Eron Powell & Azri Kahar on February 21, 2022

This example will show you how to link a simple React frontend blog template to a Directus Project with a simple SQLite database containing a few blog posts.

Scope and Purpose

The purpose of this article is to focus on the bare basics of linking a React frontend to Directus, then show you where to learn about more robust authentication methods, roles & permissions configurations, and API functionalities. It is important to stress to new users that Directus is a general purpose database wrapper, which mirrors any linked database. No matter your data model or use-case, Directus can serve as a backend (plus no-code admin panel) for any type of project and also connect to any (or many) different front-ends.

Please keep in mind that this is not a demo showing what Directus can be used for, but rather a low variable entry-point on the path to understanding how to do anything you want with it.

This example was created for demonstration purposes and is not intended to be production ready, but PRs that address this and any other issues are always welcome! See Contribution Guidelines.

Setup

  1. Clone the examples repo.

Every frontend template in theexamplesrepo references thesharedfolder. So moving these directories around from one location to another could break the relative file path.

  1. From that repo, setup the provided Directus instance and get it running. Instructions are on theREADME.mdpage.

  2. Install dependencies for this example.

cd react
npm install
  1. Create a.envfile for this React template by copying and pasting the provided.env.examplefile. Nothing will need to be changed in the copied.envfile.

  2. Start the development server.

npm start
  1. Your Directus React example is now running at http://localhost:3000.

Now that you have the frontend and backend linked up, let's touch on what's happening in this project and where to find more sophisticated options.

React

React is a library primarily for building Single-page Applications (SPAs), though there are cases where you may want use it to extend your existing site. Some frameworks built on React also allow Server Side rendering and static site generation (e.g. Next.js and Gatsby). We have also provided examples alongside this one for Next.js and Gatsby.

Also, please note the JavaScript SDK is pulled in underreact > src > services > directus.js. To learn more, you can see the directus.js file with the SDK on GitHub and read the Directus SDK documentation.

Authentication

Aside from the defaultlocalauthentication mechanism, Directus also supports SSO throughoauth2,openid, andldap. To learn more about SSO options, read our SSO Documentation or follow our guide on how to setup SSO.

Users, Roles and Permissions

Directus Permissions

For simplicity's sake, this Directus instance provided has Public read permissions activated forarticlesanddirectus_users. Find Permissions in your local Directus Instance underSettings > Roles and Permissions.

Additionally, any number of Roles can be created and fully configured. Permissions are completely granular. Learn more about this in our documentation on Users, Roles and Permissions.

APIs

There are two simple requests in this example worth noting. The first is inHome.jsxand the other inArticle.jsx. If you'd like to see these, here are links to the Home and Article components on GitHub. However, please note that the Directus API is exhaustive for any database linked.

Directus uses Database Mirroring to dynamically generate REST endpoints and a GraphQL schema based on the connected database's architecture. This means the REST and the GraphQL APIs will both fit any project with any database schema, out of the box. Learn more in the API Reference.

More Help

Looking for technical support for your non-enterprise project? Please visit the Directus Discord Community.

Want to stay focused on your content and apps? Let Directus manage the platform with our Directus Cloud service.

Interested in contributing guides like this?

Just like our software, these guides are open-source! Getting started is as easy as submitting a pull-request to our Guides repository!

Press and Media
For any press or media inquiries, feel free to reach out via our contact form and we can discuss. Contact us
Brand Assets
Use the link below to download a zip file containing of our brand guidelines, vector logo, or other resources. Download brand assets

Take back control of your data.

No spam, just important updates regarding Directus.