<p>This course is just a collection of tips and tricks for Directus 9 platform.</p>

Directus 9

<p>In this course we will be using Directus 9 as our API and CMS, and of course Nextjs for the frontend of our site. Kind of like we did with <a title="" href="https://watch-learn.com/courses/making-websites-nextjs-and-strapi" target="_self">Making Websites With Next.js And Strapi</a> series.</p>
<p>This time however we will add Tailwind into the mix and also include React Query right from the start for better performing API requests, caching, state management and so on. Oh, and also instead of using REST API we are going to use GraphQL for this series.</p>

Directus 9 + Next

<p>In this series we are going to learn how to create a websites using Next.js. The main focus of the series will definitely be Next.js, but we will do some work with Strapi too, which we will use as our API and CMS</p>

Making Websites With Next.js And Strapi

<p>In this series we are going to learn basics of React library and all of it's advanced features that are applicable in the year 2020.</p>

React 2020

Will the AI take our jobs?

YES!

When?

We are not sure! (probably soon... ish).

Ok, now that we got that out of the way, since that seems to be a concern in the dev community, we can figure out what to do in the meantime. 

And I don't mean by helping you to code your apps (which it can do for sure), but to help with the features of your apps. 

For example, I put useful links to articles I find around the web in Notion or Obsidian apps. However I always need to categorise them somehow, by tags usually. 

Wouldn't it be great if I could just paste a link to a box, and then let AI generate most relevant  tags or keywords for that article and that way I would be able to categorise them. 

In this video we will create this exact example using OpenAI and NextJS.

And actually, it's incredible how easy this is. Let me show you.

### Setup

Let's quickly just go over the setup.

I have here NextJS 13 app with Tailwind for styling. What we will also need is an OpenAI SDK for Node. You can install it by running `npm install openai` in the root of your NextJS app.

Now you need to Signup for OpenAI API by clicking the API link on their site, and then click Signup. You can use Email or Microsoft or Google Accounts.

Once you are done with that - Login. Click on your profile and then View API Keys. 

Create new secret key, and save it somewhere because you will not be able to copy it again. You will only be able to create a new key.

Ok, setup is done. Let's write some code.

### Create API Endpoint

In your Next app create a file called `.env.local` add `OPENAI_KEY=` as a variable and add your key there. 

Now, create a file called `get-ai-response.js` inside of `pages/api` folder.

We need to setup OpenAI connection.

First we require `Configuration` and `OpenAIAPI` from `openai` module.

Then we define our configuration and pass in `OPENAI_KEY`  from our `.env.local` file.

Great. 

Let's define our async handler function for our API endpoint. In it, we will actually call the OpenAI API and give it a task. 

The most important parts here are `model` and `prompt` . `model` defines the AI  model that you wanna use. Different models have different usage cost. You can read about different models on the OpenAI site. We will use the most expensive one "text-davinci-003". Don't worry, you get 18 bucks of API calls for free for two months. And thats more than enough for what we are doing here. 

`prompt` defines what you wanna ask the API. Like when you go to ChatGPT page and ask it something. 

For this we will ask the AI to read the link we send it and give us 3 most relevant keywords of an article, and then return those keywords as a string separated with pipe symbol. This is so we can parse it easily into an array later on.

So we can say something like: 

```
Read this link: ${req.query.link} and give me 3 most relevant keywords, output them as a string separated with |
```

We will of course get the link from the request that we will send to our `get-ai-response` endpoint.

Only thing that is left to do is to return data from the response in json format. 

```js
const {Configuration, OpenAIApi} = require("openai");  
const configuration = new Configuration({  
  apiKey: process.env.OPENAI_KEY,  
});  
const openai = new OpenAIApi(configuration);  
  
export default async function handler(req, res) {  
  const response = await openai.createCompletion({  
    model: "text-davinci-003",  
    prompt: `Read this link: ${req.query.link} and give me 3 most relevant keywords, output them as a string separated with |`,  
    temperature: 0,  
    max_tokens: 100,  
  });  
  
  res.status(200).json(response.data)  
}
```

We can already test this out by going to `localhost:3000` then `api/get-ai-response?link=<link-to-the-article>`.

Now wait a little and if everything is ok, you should get a response like this. 

```json
{  
  "id": "cmpl-6iSLDVJiFvEEx2WkCnA7wxvKAgMuA",  
  "object": "text_completion",  
  "created": 1676053395,  
  "model": "text-davinci-003",  
  "choices": [{"text": "\n\nDirectus|Newsletter|Flows|Subscribers|List", "index": 0, "logprobs": null, "finish_reason": "stop"}],  
  "usage": {"prompt_tokens": 48, "completion_tokens": 15, "total_tokens": 63}  
}

```


Notice that under `text` property we get a string with keywords separated by a pipe. 

It works!

All that is left to do now is to create a user interface for sending links and we are done. 

### User interface

So I removed almost everything from the home page of our NextJS app. And replaced it with just an input field and a button.

Input and button are inside of a form tag. 

Ok, first of all lets add two states, `loading`  for showing loading state while the AI is working, and `data`  for setting and displaying the keywords that we get from the AI.

Now let's add a function for submitting our link to the API. I'll call it `handleSubmit`. We will of course first `preventDefault` so that our page doesn't refresh. Then we set the loading state to `true` , get the link from the field named `link` in our form. And we send that to the API with `fetch`.  we await for the data, and when we get it we need to trim it to remove new lines, and then split it into an array on the `|` symbol. Set `loading` to false.

```js
const handleSubmit = async (e) => {  
  e.preventDefault()  
  setLoading(true)  
  
  const link = e.target.link.value  
  const res = await fetch(`/api/get-ai-response?link=${link}`)  
  const data = await res.json()  
  
  setData(data.choices[0].text.trim().split("|"))  
  
  setLoading(false)  
}
```

Great. 

Now all we need to do is pass `handleSubmit` function to `onSubmit` event of the form.

Under the form we show "Please wait..." if the loading state is `true`.

And then finally we spit out the keywords if we get the data and `loading` state is `false`.

And that is all there is to it!

```jsx
{loading && <div>Please wait...</div>}  
  
{data.length > 0 && !loading && data.map((tag, index) => <div key={index}>{tag}</div>)}
```

Let's test it out.

Find your article somewhere on the web, and paste that link. I will use the documentation for installing TailwindCSS on NextJS: https://tailwindcss.com/docs/guides/nextjs.

And if everything works as expected we should get some results. 

Try it out with a few more articles, and judge for yourself if the results you are getting are relevant.

### Conclusion

Of course this is just a proof of concept. But the possibilities are endless here. You could for example take those key words, save them to the database with a link. Maybe allow the users to add their own keywords, play around with refining the results and so on.

What would be your idea for using AI in your apps? Let me know down in the comments.

Everything we did here will be available for you on Github. The link is below. 

Frontend Tips

In this video I'm going to show you how you can use Open AI to create some nice features in your apps.

Using AI In Your Frontend App feat. OpenAI and NextJS

Ok, let's do one more Directus Flow, well actually two flows that are going to work in conjunction with one another.

So imagine you have a movie database type of website, and you want to add a large number of movies to it. Currently, you have those movies stored in a Google Sheets or an Excel Document. Of course, you don't wanna do that by hand, because it will take a long time to do it.

We can use Flows for this type of scenario, we will first save our Google Sheets or Excel document to a CSV file. We are going to parse that file on the front end and create a JSON object which we will send to a Directus Webhook, that will in turn trigger our first Flow. Since we are receiving an array of objects we can create a kind of for each loop by triggering another Flow for every object in that array. That other Flow is just simply going to add the data from the object it receives to the Movie collection.

Ok, so let's do this.

### Setup

Before we start creating our Flows, let's just take a quick look at the setup.

First of all, we need a Movies collection, I already have a simple one setup. It has just 3 fields `title`, `year`, and `director`.

An important thing to note here is that we have to set permissions for the public role so that it can add items to the Movies collection. Of course in a real-world scenario you would give that permission only to authenticated users, but to keep it simple we will allow everyone to be able to add Movies. 

Then we of course need a list of movies in Excel or Google Sheets format. I have one in Google Sheets here. We can save this list to a CSV file right away so we have it ready. 

We also need some kind of frontend so that the user can upload that list to our Directus backend.

I already have this ready, it's just a simple Next.js app with Tailwind for styling, that has a page on which we can upload our CSV file.

The code for uploading CSV looks like this.

I have a form that is going to do something on submit. Most of the code is just layout and styling for the file input field, which I stole from the Tailwind UI site. 

When the user chooses a CSV file and clicks Submit, we are taking that file and parsing it using `papaparse` package - so don't forget to install `papaparse`.

Once the CSV has been parsed, it's going to save the resulting JSON to the `moviesList` state.

And then we have `useEffect` that has `moviesList` dependency, so once the `moviesList` state changes it will send our JSON movie list to the Webhook in Directus using fetch. 

We will need to add a Flow ID to fetch the URL once we create our Flow. 

The link to this code will be in the description below. 

### The Flow

Now we have to create our Flow, or I should better say, Flows because we are going to have two of them.

One flow is going to accept our data using a Webhook, and another one is going to add the data to our collection.

First, let's create a Flow for getting our data. I will call it "Get Movie List".

Click the right arrow to create the trigger. 

The trigger is going to be a Webhook.

Set the method to POST, and check the "All data" checkbox.

Now click the checkmark to save the trigger, and then once again, to save the Flow.

We are not going to add the operation right away, because it is dependent on the other Flow. And since we don't have it, we won't be able to select it.

Ok, so now let's create another Flow, I will name this one "Add Items to Movies Collection".

And for the trigger, we are going to choose "Another Flow". We are doing this because another flow - in our case "Get Movie List" - is going to trigger this flow.

Check the "All data" checkbox, and click on the checkmark to save our operation.

Now let's create our operation, I will name it "Add Movie To Collection" and choose "Create Data" for the operation type.

I used a singular Movie for the name instead of Movies because this Flow is going to trigger as many times as you have movies in your list. And this is because we are going to pass an array of objects to this Flow. When you do that Directus is going to trigger this Flow for every object in that array. You can think of it like a for each loop for Directus Flows.

Ok, so for collection we are of course going to select "Movies", Permissions are going to come from the trigger. And for Payload, we just need to define the fields that are set for our movie collection - `title`, `year`, and `director`.

Very simple, it will look like this:


```json
{
    "title": "{{$trigger.title}}",
    "year": "{{$trigger.year}}",
    "director": "{{$trigger.director}}"
}
```

We are of course getting our data from the trigger. Notice that we don't have `$trigger.payload.something`  here, but just `$trigger.name_of_the_field`  this is because we are going to be receiving just an array of objects from that other Flow. 

Speaking of which, click the checkmark to save this operation, and once again to save the Flow, and let's finish setting up "Get Movie List Flow".

### Finish "Get Movie List Flow"

Go to Flows and select "Get Movie List" Flow.

We are going to add an operation here and name it "Send Movie". The operation type is going to be "Trigger Flow". Because remember, once we receive our array of Movies, we want to trigger the "Add Items to Movies Collection" Flow.

For Flow select "Add Items to Movies Collection".

We have to add our payload now, but there is a very important thing to note here, you don't add it directly to Payload input but click on the dropdown next to the label and select "Edit Raw Value". Now in here add just this simple line of code. 

`"{{$trigger.body}}"`

And click "Done". We need to do it this way because if we don't Directus is going to screw up our string with escape characters and then our payload will not work correctly. 

Also, note that we are saying `$trigger.body` - body is the body of the POST request that we are sending from our frontend, and that body is going to hold our array of movie objects.

Save this operation by clicking on the checkmark, and once again to save the Flow.

### Test it out

Now we have to test this out. But before that, you need to copy the ID of this Flow from the URL. 

And then go to your frontend app and add the ID after `/flows/trigger` 

Save it and let's test if this works.

Let's add our Movie List CSV file, and click submit. 

Ok, now let's go to the Movies Collection and see if this worked. 

And sure enough, it works, and all our movies from the Movie list are now in the collection, with essentially one click. 

Nice.

As I've said, once you send an array of objects to the "Add Items to Movies Collection" Flow, this flow is going to trigger as many times as we have Movies in our list. And to check that, you can go to that Flow, and click on Logs on the right-hand side. 

You will see that we have logged five operations here, and if you click on one of them and then check the payload, you can see that the payload is just one movie object. So this Flow has run five times to add five movies. 


In this episode I'm going to show you how you can add large number of data to your Directus database using Excel and Flows.

Add Data From Excel Using Flows

Let us now create another Directus flow. This time just a bit more complex. 

If you don't know what Directus Flows are please check out the previous video for a quick intro.

### Create a newsletter list

First, let's create a new collection and call it `newsletter_list`

Now let's add three simple input fields to it and call them: `first_name`, `last_name`, and  `email`

In this collection we are going to save users that sign up to our app AND opt-in to receive the newsletter, users that don't opt-in will not be added to the collection.

Save the collection, and we are done with our Newsletter list collection

### Add opt-in field to users

In Settings -> Data models click on "System Collections" and then click on `directus_users` 

Create a new toggle field here and give it a name of `newsletter`.

Set the default value to be enabled and Save it.

Now that we have our opt-in field setup, we can start creating our flow.

### The Flow - Trigger

Go to Flows and Create a new flow, we will call it "Newsletter Flow".

The description can be something like "Add user to newsletter list".

Click the arrow so we can set up our trigger.

The trigger will be an Event hook with non-blocking Action.

The scope is of course `items.create` since we wanna trigger this flow once the user has been created.

Click on "Show 15 more" and then select "Directus Users".

Now click the checkmark to save our trigger. 

### The Flow - Operation One

This Flow is going to have two operations, the first operation will check if the user chooses to opt into our newsletter, and then if they did we are going to create another operation that will add that user to the "Newsletter list" collection. Easy peasy. 

Click the plus symbol to create the first operation, and name it "Check Newsletter Opt-in".

For the operation type, we are going to choose "Condition". 

And then in the "Condition Rules" box, we are going to check if the user has opted in using the following code. 


```json
{
    "$trigger": {
        "payload": {
            "newsletter": {
                "_eq": true
            }
        }
    }
}
```

Here we are checking if the `newsletter` field that is coming from our trigger is equal to `true`.

Now click the checkmark to confirm this operation. 

### The Flow - Operation Two

You will notice that this operation has a checkmark symbol and an X symbol on the bottom right side. When you click on the checkmark you can chain another operation that will run if the condition that we created is true, and by clicking on the X symbol you can chain the operation that will run if the condition is false. 

For this Flow, we will only chain the operation if the condition is true, because if it's false, then we don't wanna do anything. 

So now click on the checkmark symbol on the bottom right of the operation box, and we will create an operation that will add the user to our "Newsletter list" collection. 

We will call this operation "Add user to Newsletter list".

For the operation type choose "Create data".

For the collection, we are of course going to select "Newsletter List". 

In the Permissions field select the "From Trigger" option.

Now, all we have to do is set our payload, meaning we have to send values for the three fields that we created for our "Newsletter list" collection: `first_name`, `last_name`  and `email`.

We are going to get our data from the trigger again, so just add this simple bit of code in the "Payload" input box. 

```json
{
    "email": "{{$trigger.payload.email}}",
    "first_name": "{{$trigger.payload.first_name}}",
    "last_name": "{{$trigger.payload.last_name}}"
}
```

Click on the Checkmark to save the operation, and then once again to save the Flow. 

All that is left to do now is to test this Flow out. 

### Testing it out

Go to users, and create a new user. I will name the user John Doe.

Note that at the bottom of the page you will have the `newsletter` field, which should be enabled by default.

If it's not, enable it.

Save the user. 

Now go to Collections and select "Newsletter List" collection to see if this worked. 

And as you can see user John Doe has been added to our list. 

Great!

Now create another user.

We will call this one Jane Doe. But for this one disable the `newsletter` field. 

Save it, and go to collections one more time.

And as you can see we still only have John Doe in our Newsletter list. This means our Flow works since Jane didn't wanna sign up for our newsletter.

### Activity Log

Before we conclude this video I just wanna show you one more thing that can help you when debugging Flows.

You can always go to Settings -> Flows, and then select the Flow you wanna debug. 

Here on the right side of the screen, you will notice the "Logs" tab, if you click on it you will get some useful information about the Flow. 

Like Options and what is especially useful Payload of your trigger. So if something is not working you can always check the Logs to see what might have gone wrong.

Just note that this will only show up if you choose to track Activity & Logs when creating a flow. 

Also note that Logs are going to be stored in the database so it would be good, to clean them from time to time. 

Maybe you can even create a Flow that will do that automatically for you, wink, wink, nudge, nudge. 

In this video, we are going to create a Flow that will add a user to a newsletter list if they opt in for it.

Create a Newsletter List With Directus Flows

Flows are a huge concept and allow us to do large number of automation tasks. Because I can't cover everything in one video, we are going to focus on sending emails when something happens in our application.

Be sure to let me know down in the comments what other Flows you would like to see on this channel. 

### What are flows

Flows are a low code way of setting up automation tasks in Directus. They consist of triggers and operations.

Triggers are actions or events that are happening inside your Directus app like when something is created, when there is an incoming webhook, when the cron job has started and so on.

An operation is an action or process performed within the flow. These enable you to manage data: send off emails, push in-app notifications, send webhooks and more. 

In this video we are going to send an email to the admin, when new user is created

### Mailgun

First we need to setup our email provider - something to send our emails with. In Directus you can use your own SMTP server, sendmail or Mailgun.

For this video we are going to use Mailgun because it is the easiest to setup, and has a free tier. Of course for production websites you would either have to pay for Mailgun or use some other method, like sendmail which should be available on most Linux systems. 

First signup to Mailgun and login into their dashboard. Here you will see your sending domain. Click on it. And then select API. Here you can see your API key and your domain name, which we will need to setup in Directus. 

But first note that sandbox domains are restricted to authorised recipients only. So add your email address here. I will use the one from temp-mail.org.

You will now get an email to verify that address. Verify it. 

Now in the `.env` file of your Directus app add the API key, and Mailgun domain. That is the last part of the "API base URL" in your Mailgun dashboard.

Also be sure to comment out any other mail delivery options if they are enabled in the `.env` file.

Now we can run our Directus app, using `npx directus start` 

### Setup simple flow

Let's now create a flow that will send an email to us once the user has signed up. Or when we create a user. We will create our users through the dashboard, but this will also work when someone registers from the frontend of your app or website. 

Go to settings and click on Flows.

Click on Create Flow.

We are going to give it a name of "Send email".

Description can be "Send email when new user is created".

Ok, now click on the arrow, so we can set up our trigger.

Remember, every flow needs to have a trigger.

As you can see you have a lot of options here, like Event Hooks, Webhooks, CRON jobs and so on. We will choose Event Hook.

And then select "Action (non-blocking)".

For the Scope select `items.create` because we want our flow to trigger once the user is created. 

As you can see there are no users in this short list, so we have to click on "Show 14 more". And then click on Directus users.

Click the checkmark to confirm.

Ok, so now we have or trigger set up, be sure that it is set to be active. Inactive flows will not work.

Click on the plus symbol to create an operation for our flow. We will name our operation, "Mail send".

Directus has a number of available operations like: conditions, create data, delete data, trigger another flow and so on.

We will of course be using Send Email operation.

Fill the "To" field with the email that you verified in the Mailgun. And be sure to press Enter.

Subject is going to be "New user has been created". 

Set the type to be WYSIWYG.

And for the body we can add something like "User has been created" for now. A bit later we will make this a bit more dynamic. For now let's just test if this works. 

Click on the checkmark to confirm it. And then once more to save our flow.

Now let's go to the users and create a new user. 

Check your email. If you didn't get the email, try checking your spam folder. I will check my mail on temp-mail.org. 

Here we have our Email. Great, it works.

### Make it a bit more dynamic

Ok, now I want to make the email that we receive to have a bit more data about the user that was just created. 

Let's go to flows again. 

Click on our flow, click the pen icon so we can start editing, and then again on the Send Email operation. 

When creating flows we have access to the `triggers payload`. To access it we would write something like this in the Body of an email. 

"User `{{$trigger.payload}}` has been created."

Let's save this. And then also save our flow.

Now we will create another user to see what our email looks like now.

Go to users and create a new user.

Great now let's check our email. 

As you can see, here we get full payload object, that we can use inside of our emails. Of course we don't wanna send full object to the admin, but maybe just first and last name.

Let's go to the flows again and edit the Body of an email one more time.

Now instead of `{{$trigger.payload}}` we will write `{{$trigger.payload.first_name}}`  and we will add `{{$trigger.payload.last_name}}` 

Save everything and let's add another user to see if everything is working as it should. 

Let's check our email. 

Nice. Now it says "User Matt Smith has been created". 

### Conclusion

As you can see Flows are very powerful, and can enable you to do lots of cool stuff. We just created a very simple Flow, but flows can have multiple operations and even multiple flows that depend on one another.

Maybe we will cover that in another video, so be sure to let me know what kind of flows you would like to see on this channel in the comments below. 



Flows in Directus enable custom, event-driven data processing and task automation. In this video we are going to send an email to the admin, when new user is created.

Send Emails With Directus Flows

Although Astro just recently got its first stable release, there has been a lot of talk about it in the last year. It has gone from an empty repo to over 18,000 Github stars and 30,000 early users in the last 16 months, it has been deployed by companies like Google, Trivago, The Guardian and IKEA.

Obviously there is something good, if not great about Astro, so let’s check it out and see what all the fuss is about.

### What is Astro?

Astro is an all-in-one web framework for building fast, content-focused websites. 

This does not tells us much,  so we will heave to dig deeper.

On the first glance Astro looks like a static site generator. And it technically is that, but it also has some features that makes it more than just a static site generator.

So let’s talk a bit about Astros key features to get a better understanding of what Astro does thats gotten it so much attention in the last few months.

### Astro Islands Architecture

Key feature of Astro is that it uses Islands Architecture aka Component Islands. 

Astro ships with ZERO JavaScript by default, making sites created in Astro super fast, because it means that it serves only static pages to the user, without any JS, which is well… the fastest way possible to serve a web page. 

Now, this is great if you are building fully static site… but chances are you are not. And your site is going to need some of that JavaScript goodness for user interactions.

That is where Islands architecture comes in, with Astro you can easily create Islands of interactivity inside of your mainly static web page. And Astro is going to ship just those small parts of JavaScript to the client, either on page load, or if it’s further down the page, you can set it to load that JavaScript when the interactive island or component is visible.

### Multiple frameworks

Another feature of Astro is that you can use pretty much any UI framework or library you like with it, for creating your components. 

You can even mix and match web frameworks if you are some kind of monster and have no regards for consistency… but you know, if that is your thing you can do it.

Astro officially supports React, Preact, Svelte, Vue, SolidJS, AlpineJS and Lit but you also have third party integrations for custom elements, Angular and even PHP.

### Multi-Page Application

Astro is a multipage application framework, which means that is similar to something like Ruby on Rails, Laravel or WordPress in the way it serves pages to the user. Those pages are usually rendered on the server. 

However, traditional MPA frameworks would have you write a different language on the server (Ruby, PHP, etc.) and JavaScript on the browser. In Astro, you’re always just writing JavaScript, HTML and CSS. That way, you can render your UI components (like React and Svelte) on both the server and the client.

The result is a developer experience that feels a lot like Next.js and other modern web frameworks, but with performance characteristics of a more traditional MPA site architecture.

You need to keep this in mind when choosing Astro as your framework of choice. 

Because if you are building something like an application dashboard with a lot of shared state between pages and user interactions and don’t care about the SEO then Astro will not be a good fit for this use case.

But it’s a great solution for traditional websites, that are content focused and depend on speed and great SEO, with some user interactions sprinkled in.

### SSR

Since Astro can communicate with the server, that means that you don’t have to just deploy static sites but you can use Astro as a server side rendering framework. You can do this using adapters, Astro supports Cloudflare, Deno, Netlify, Node.js and Vercel at the time of making this video, with more adapters to come later.

### Community and integrations

And let’s not forget that even though Astro is a relatively new project it already has a great community with over 5000 developers and over a one hundred integrations.

Ok, so now that we have a general idea of what Astro is, let’s install it and try to build something with it.

### Editors

To work with Astro it is best to use VS Code, by using official VS Code extension. But you also have community support for Nova Editor, Vim and Neovim.

Unfortunately at the time of making this video there is no real plugin for JetBrains IDEs like WebStorm or PHPStorm, which I’m using. However there is a workaround, that will at least give you code highlighting in JetBrains IDEs.

You can follow the instructions in this comment on JetBrains Issues page, the link will be in the description below.

[https://youtrack.jetbrains.com/issue/WEB-52015/Astro-Language-Support#focus=Comments-27-5745973.0-0](https://youtrack.jetbrains.com/issue/WEB-52015/Astro-Language-Support#focus=Comments-27-5745973.0-0)

### Project structure

Astros project structure is pretty basic, and if you used React, Vue, Next.js etc. this will all look very familiar to you.

There is a `public` folder for your images and other assets. `src` with `components` `layouts` and `pages`. These are all pretty self explanatory, especially if you used Next.js since Astro also has file based routing just like Next. So all of your routes are defined as files inside `pages` folder.

### Components

Main building blocks of Astro app are Astro components. And I don’t just mean components in the `components` folder, but every file that has an `.astro` extension is an Astro component. 

Component structure is a mix of JSX, HTML, Vue components, Markdown files with frontmatter, but it also somehow manages to be its own thing.

There is a lot of things that you need to be aware about these components. And it would take a whole video just to cover all the ins and outs of Astro components, because they seem really powerful.

I will cover only the basics here, and you can learn the rest from the docs, which shouldn’t be a problem since Astro docs are one of the best that I’ve seen in a while, and you really should read them if you plan to use this framework.

**Astro component is composed of three main parts:**

**JavaScript** part where you write your JS code, here you can import other components, components written in other frameworks, helper functions, you can write your own logic, define local variables, define props for your component and so on. So all your JavaScript goes here. This code is written inside code fences --- similar to frontmatter in Markdown files.

You need to keep in mind that Astro components render to HTML during build. Even if you run JavaScript code inside of your components, it will all run ahead of time, stripped from the final page that you send to your users. 

There are ways to run code AS IS, if you need it, but you can read abut that in the docs. 

**Component template** comes below the script part of component, you can write plain old HTML here. However Astro’s component template syntax also supports JavaScript expressions, imported components and special Astro directives.

You can use JSX like expressions here, like mapping over an array and displaying its values just like in React,  but you need to keep in mind that although you can include dynamic values that are calculated in the script block, once included these values are not reactive and are not going to change. 

And finally you have <style> block in which you can write your styles. These styles are scoped to the component by default. However, keep in mind that the styles are going to apply only to the content of the components template, children and any imported components will not be styled by default.  
  
### Conclusion

Astro seems very interesting, but at least for now I would just use it for mostly static sites that need some interactivity. I would need to try Server Side Rendering, and see how that works in Astro to make a final conclusion. 

I also know that some people think that it’s problematic that Astro will fully load new pages when the links are clicked, like a traditional website, and it’s hard to share state between those full reloads. To me this is not a problem, because Astro is a content focused framework and it is not intended to be used like a Single Page Application. There are other tools for that if you need that sort of functionality. Although I’m sure that somebody will try to “fix” that problem sooner or later. 

Of course there are many more Astro concepts that I could cover, if you are interested in that let me know down in the comments.

In this video we are going to checkout Astro - all-in-one web framework for building fast, content-focused websites.

Let's Checkout... Astro

Viewer named Robert commented on one of the videos asking how to create a multilevel navigation in Directus 9 so that you can consume it through the API and that way create a navigation on the frontend. 

Unfortunately I wasn’t able to find a perfect no code way of doing this, so I don’t think that Robert will be very pleased with the result, since he already knows about this method. Sorry Robert.

However I think this is a good enough way to create multilevel navigation, it’s not perfect by any means, but it is good enough if your site or app does not heavily depend on multilevel navigations with a lot of levels. 

But if you need a way to allow users of your backend to create navigations, like Main navigation, Footer navigation, maybe navigation on a sidebar, with 2 or 3 levels - this way of doing things is going to be more than adequate. 

Let me show you how.

### Setup

For this demo I’m using Directus version 9.14.5, but I guess this method should work on any version that supports Repeater fields.

First of all I will create a collection called Menus.

This collection is going to have only two fields - one is going to be called title, so that we can name our menus and so that we can filter them by name on the frontend.

The other field is going to be a repeater field and that is where we are going to define our menu items. 

Let’s create repeater field, give it a name of `menu_items` 

Next let’s create two fields for the repeater - they are going to be called `label` and `url` and both are going to be just strings with input interface.

And by just doing this we created a system for single level navigation. 

However we want a multilevel navigation. So let’s create one more field, and this one is going to be of type JSON and with the repeater interface. We are going to call it  `submenu` and it is also going to consist of two fields called `label` and `url` .

And I think you can now see where I’m going with this. If you need three levels you would add one more repeater here and so on.

Of course if you need unlimited levels and you depend on that functionality, then maybe it’s best to try to find a code based solution for this problem. 

But from my experience two or three levels are going to be enough for at least 90% of cases. 

Ok, let’s save this and test it out.

### Create Menu

We go to Menus, create new add a title of “Main navigation”. 

And then on “Menu Items” you click “Create new” and start creating your menu items.

The first one is “Home” and it’s going to be only single level.

The second one is “About” and here we are going to add a few subitems. 

And let’s create one more, called “Contact” which is going to be single level item.

And that is it.

### API response

Let’s see how this is going to look when we try to get the menus from the API. 

First we go to “Roles and Permissions” . Click on “Public” and allow everyone to be able to see our navigations. 

Now go to `/items/menus`. And here we can see how this looks in JSON format that we can consume on our frontend.

One nice thing is that we can rearrange the menus in the backed, and that will reflect on our data. 

So now we have “Home”, “Contact” and “About”. 

You can do the same thing with submenu items.

Nice.

In this video I'm going to show you how to create multilevel navigation in Directus 9, without any code.

Video Tutorials For Curious Frontend Developers

Latest tutorials

Frontend TipsUsing AI In Your Frontend App feat. OpenAI and NextJS

Directus 9Add Data From Excel Using Flows

Directus 9Create a Newsletter List With Directus Flows

Directus 9Send Emails With Directus Flows

Frontend TipsLet's Checkout... Astro

Directus 9How To Create Multilevel Navigation In Directus 9 (NO CODE)

Latest Courses

Directus 9

Directus 9 + Next

Making Websites With Next.js And Strapi

React 2020

Get in touch