Creating our AdonisJS Project & Setting Up our API Keys

In This Lesson

We'll create our AdonisJS project and utilize our Jumpstart helper to bypass some set up work and keep the series on topic. We'll then integrate our Meilisearch API Keys into our project so they're ready to go!

Created by: @tomgobich
Published: 11 months ago

Join the Discussion 0 comments

Be the first to comment!

Transcript

If you'd like, you can put it inside of this MeleeSearch folder. I'm going to go ahead and move into a separate folder for this, so I'm just going to go back in the directory.
And to create our AdonisJS application, we're going to do npm init AdonisJS at latest, and then our application name, which I'll call this AdonisJS MeleeSearch.
There we go. Enter to run through the installation steps. Let's go ahead and select web there for our starter kit, and session for our authentication.
And then I'm just going to use SQLite here for our database driver, but feel free to select which one's most applicable to you. It's going to go ahead and install our dependencies from there, prepare the application, and do its configurations.
Okay, perfect. It's now done, so we can go ahead and CD into it here, and I'm going to go ahead and clear my terminal out. And we're going to install and configure one more thing.
It's just going to give us a simple auth system to go ahead and use, and it's also going to have TailwindCSS configured for us as well, along with some utility components and things like that.
So we'll run node ace add at anacast.com slash jumpstart for that, hit true to go ahead and install it. And this is just going to walk through.
I know that this is a little hard to read on my system, sorry, let me go ahead and select it here. All right, so it says jumpstart includes emails for the forgot password flow and email change notifications.
Let's add AdonisJS mail. So we can go ahead and hit true to install AdonisJS mail as well, and just select SMTP here for our mail service. We'll set up MailTrap real quick for that.
All right, and then it's going to install TailwindCSS, Edge Iconify, and then create a bunch of files for us from the get-go, and then it will ask if we want to go ahead and install it.
Since everything's done, we can hit true for that to uninstall that, and we're now good to go. Perfect. So let's clear out of there, and let's jump into our text editor now. For this one, I'm going to use Zed.
I'm going to try Zed out here. So let's go ahead and do open folder, and then we want to go into code. I put this in series, and then we did AdonisJS search right up there. Okay.
So the very first thing that we're going to want to do is set up our environment variables. Now whenever we ran Jumpstart, it added SMTP for us. For development purposes, we're just going to rig this up to MailTrap.
They offer a sandbox environment so that we can actually send mails here locally, but not have them go to the actual recipients. Instead, they'll be collected and displayed to us inside of the sandbox environment.
So for that, let's jump back into our browser, and you just want to head to MailTrap.io, and then create an account if you don't have one already.
I do here, so I'm going to go into my account, and what we want to do is set up a new sandbox environment.
So we'll do start testing right there, add sandbox, and then just give this sandbox a name. So I'm going to call this MillieSearch, hit save there. Perfect.
We can jump into that sandbox environment, and we're given our credentials right here. So we want to copy the host, jump back into here, paste that into the SMTP host. We want to grab the port.
I want to do 2525. That just tends to be the one that I always grab here, but you can select any of those four there and plop that into the SMTP port.
In addition to that, we also need username and password authentication.
So we'll do SMTP username equals as well as SMTP password equals for those two, and we
just want to copy them and paste them into their applicable environment variable slot. So we'll copy the password there and paste it just like so.
Before we move on to our MillieSearch environment variables, we also want to set up the username and password inside of our mail config because that comes commented out by default.
So we just want to uncomment that, and then you'll notice that we have some red squigglies. That's because they're not defined within our env.ts. So we want to go do that next.
So we'll jump inside of our start, env.ts, scroll on down to our SMTP section, just copy
the host port one, paste it in, and then we can switch this to username and password like so.
And that will make those red squigglies nice and happy because now they're required. Perfect. The next thing that we're going to want to do is set up our MillieSearch environment variables.
So for these, I'm going to prefix each of them with MillieSearch underscore. So I'm going to go ahead and give that a copy so I don't have to type it a bunch of times. And the first one is going to be our host.
The second one is going to be our search API key. And the last one's going to be our admin API key.
Again, this is the key that we're going to use to actually perform our search operations. And then this is the key that we can use to do managerial tasks like adding or removing
indexes and documents to and from our MillieSearch database. So the MillieSearch host is going to be the URL that our MillieSearch started at.
Again, we can copy that from our terminal that's running our MillieSearch instance. That's this server listing on URL right here.
So HTTP localhost colon 7700 for me, HTTP localhost 7700. Then we want the search key.
So we can grab that from our second terminal tab where we printed out our API keys. We want to make sure that we're grabbing the one for our search API key here.
So we'll copy this whole string right there, jump back into our .env, paste it in there. And then we want the one for our admin.
So that's the second one here, our default admin API key. Copy that whole key just like so and paste that one in there.
In addition to that, we also want to add these into our env.ts as well so that we can be sure that we have them defined inside of our application and get type support for them.
So I'm going to copy the whole app URL section, get rid of the comment there and switch it to MillieSearch. And then we'll do MillieSearch underscore host.
Since it has a port in there, I'm going to leave off the URL designation from that. We'll just leave that as a string. And then I'm going to copy that one and we'll paste it in here two more times because we
also want our search key and our admin key. Perfect. So with all of that set, we should now be able to jump back into our AdonisJS terminal
here and do npm run dev to boot it up. If all went well, we should get our server address printed out here. And now we jump back into our browser.
I don't actually think we're going to utilize MailTrap there. We just had that set up so that we could boot our application okay. So I'm going to close that out and I'm going to go back to this MillieSearch tab here.
And we should now be able to go to our AdonisJS URL at localhost 3333 and see it booted here.
What Jumpstart does is it adds in a couple of URLs at slash jumpstart. We haven't run our migrations yet, so we can't actually log in or register.
But this is the base of our application as we saw in the introduction lesson. So we'll be building onward from here.
In addition to that, if we open up a new tab and we go to our MillieSearch host URL.
So HTTP semicolon slash slash localhost and mine was at 7700. We actually get a dashboard here with this as well.
Now we're limited with the self-hosted option and what we can do here. For the most part, you are going to want to utilize the actual MillieSearch API within your terminal to do administrative things.
But if we enter in our master key, so some master key here, hit enter, we're now granted access to this.
We have a little getting started section over here that points to the MillieSearch cloud stuff as well as documentation, help center, and all of that fun stuff.
But as we index things, we're actually going to be able to see the indexes listed here and the documents for those indexes listed here, and we'll be able to type and search to see things work that way.
There is this API key button, but for me, it just gives me a loop of enter your admin API key here, which is why I said you're going to want to reach for the MillieSearch API
within your terminal to do most administrative things. But we'll leave this open so that we can see our documents come through as we index them down the road.

Building A Multi-Search with Meilisearch & AdonisJS

12 Lessons

1h 38m

Stop losing your best ideas!

Use our integrated note feature to capture and organize your key insights. Take a note at any timestamp and jump instantly back to that moment in the video with a single click.