Files
directus/docs/getting-started/quickstart.md
Rijk van Zanten 8d8b649a1f Theming various (#20426)
* Update the minimal theme

* Remove unused files

* Remove unused default dark theme

* Fix type error

* Fix the order of themes in the picker interface

* Fix account/sign-out not using module foreground color

* Fix module bar interface styling

* Update system match label

* Use half width for default appearance

* Fix preview changed based on appearance

* Add includeNull option to theme selector interface

* Add minimal theme extension docs

* Attempt to make typedoc play nice

* Remove module bar color override

* Add snippet on overrides interface

* Deprecate "normal" style v-notice

* System filter interface background

* Add menu scope

* Use colors consistent with interface previews

* Remove card-face-color usage

* Use consistent hover style in collections & fields

* Deprecate card-face-color

* Remove old --card vars

* Fix revisions divider styling

* Remove duplicate background from overview header

* Fix permissions overview corner overlap

* Make form input height configurable

* Allow overriding public form input height

* Rename text string

* updated data model icon

* Standardize form settings between scopes

* Allow overriding sidebar forms

* Add configurable form gap

* Add configurable input-padding

* Fix list-item padding

* Fix padding in block style

* Add links to defaults

* Apply color match updates

* Default to database icon

* Fix schaling of theme selector interface

* Fix font loading

* Fetch font weights from Google as well

* Use display weight in titles

* Fix color match display font

* Clean up font weights for labels

* Update test to remove normal state

* Remove typo

* Add lowercase dev

* Add changeset

* Remove font-weight

---------

Co-authored-by: Ben Haynes <ben@rngr.org>
2023-11-16 15:36:54 -05:00

161 lines
6.1 KiB
Markdown

---
description:
Get up and running with Directus in minutes. Learn the basics of building your data model and managing
permissions.
readTime: 7 min read
---
# Quickstart Guide
> This quickstart guide is designed to get you up and running with a Directus Project in a few minutes. Along the way,
> you will better understand what Directus is, setup your Directus project locally or with Directus Cloud, and get a
> hands-on introduction to the App and API.
## 1. Create a Project
::: tabs
== Directus Cloud
Create and login to your [Directus Cloud account](https://directus.cloud).
The very first time you log in to your Cloud Account, you will be prompted to create a Team. Each Directus Cloud Project
exists within the scope of one Team. They allow you to organize Team Members, Projects and Project Billing as desired.
Create a new project - once started, it should take around 90 seconds for the Cloud Project to created. During this
time, a link will be sent to the email associated with your Cloud Account. The email will contain your Project URL as
well as an email and password to login. If you used GitHub to create your account, this will be your GitHub email.
Login to your new project using the URL in your email inbox or on your Directus Cloud Dashboard.
_Learn more about Directus Cloud Projects in our [User Guide](/user-guide/cloud/projects)._
== Self-Hosted Installation
You will need [Docker](https://docs.docker.com/get-docker/) installed and running on your machine.
Open up your terminal and run the following command:
```
docker run \
-p 8055:8055 \
-e KEY=replace-with-random-value \
-e SECRET=replace-with-random-value \
directus/directus
```
_Learn more about self-hosting Directus in our [Self-Hosted Quickstart](/self-hosted/quickstart)._
:::
## 2. Create a Collection
Once logged in, you're greeted with the option to create your first
[Collection](/user-guide/overview/glossary#collections).
1. Navigate into the Content Module.
2. Click **"Create Collection"** and a side menu will appear.
3. Fill in a **Name**.\
For the sake of this demo, we'll call ours `articles`, but feel free to make it your own!
4. Leave the other options at default. Click <span mi btn>arrow_forward</span> and the **"Optional Fields"** menu will
open.\
Keep the values in this menu at the default, toggled off, for now. You can adjust them later.
5. Click <span mi btn>check</span> in the menu header.
::: tip Learn More About Collections
- [The Content Module](/user-guide/content-module/content)
- [Create and Manage a Collection](/app/data-model/collections)
- [Build Relationships Between Collections](/app/data-model/relationships)
:::
## 3. Create a Field
With your first Collection created, it's time to start adding some [Fields](/user-guide/overview/glossary#fields).
1. Navigate to **Settings Module > Data Model > `Collection-Name`**.
2. Click the **"Create Field"** button and select the **"Input"** Field type.
3. Fill in a Field name under **Key**. We'll be calling our Field `title`.\
Directus offers powerful Field customization options, but let's stick to the defaults for now.
4. Select **"Save"**.
::: tip Learn More About Fields
- [Create and Manage Fields in the App](/app/data-model)
:::
## 4. Create an Item
Now that we have a Collection with a Field configured, it's time to add an [Item](/user-guide/overview/glossary#).
1. Navigate to the Content Module.
2. Click <span mi btn>add</span> in the page header to open the Item Page.
3. Fill in the Field Value(s) as desired.
4. Click <span mi btn>check</span> in the top-right to save your Item.
::: tip Learn More About Items
- [The Content Module](/user-guide/content-module/content)
- [The Item Page](/user-guide/content-module/content/items)
:::
## 5. Set Roles & Permissions
Directus comes with two built-in roles: Public and Admin. The Public Role determines what data is returned to
non-authenticated users. Public comes with all permissions turned off and can be reconfigured with fully granular
control to expose exactly what you want unauthenticated Users to see. The Admin role has full permissions and this
cannot be changed. Aside from these built-in Roles, any number of new Roles can be created, all with fully customized,
granular permissions.
By Default, content entered into Directus will be considered private. So permissions always start off set to the default
of <span mi icon dngr>block</span> **No Access**, with full ability to reconfigure as desired. So, in order to have the
API return our Items, let's add some read permissions. For simplicity's sake, we'll do this on the Public Role, instead
of creating a new Role.
1. Navigate to **Settings Module > Roles & Permissions > Public**.
2. Click <span mi icon dngr>block</span> under the <span mi icon>visibility</span> icon on the desired Collection.\
In our case, the Collection name is `articles`.
3. Click **"All Access"** to give the Public Role full read permissions to the Items in this Collection.
::: tip Learn More About Roles & Permissions
- [Users, Roles and Permissions](/user-guide/user-management/users-roles-permissions).
:::
## 6. Connect to the API
Now that your Project has some content in it which is exposed to the Public, it's time to start using this content
externally! Data can be accessed in a number of ways, including the REST and GraphQL API endpoints. In this case, we'll
use the `/items/` [REST API endpoint](/reference/items) to retrieve the Item we just created.
1. Open `http://your-project-url.directus.app/items/articles` in your browser.
_And there it is! The Article Item you just created is being served in beautiful JSON, ready to be used anywhere and
everywhere!_
```json
{
"data": [
{
"id": 1,
"title": "Hello World!"
}
]
}
```
_In this example, we made a super-simple read request with the API, but there's more! The REST and GraphQL APIs provide
exhaustive endpoints for the data model and every single action that you can do in the App can be done via the API. In
fact, the App is just a GUI powered by the API._
::: tip Learn More About The API
- [Intro to the API](/reference/introduction)
- [JavaScript SDK](/guides/sdk/getting-started)
:::