Build a mini app in under 10 minutes

Hi everyone, Sophie here. So today we're going to be making a brand new mini app using our new quick start guide. So I've gone into base docs under mini apps create new mini app. The two things that I need before I get started is a base app account. I definitely have that and a vessel account.

So definitely have that one as well. So the next step is that we're going to deploy a template. So let's get into it. So, I'm going to click this button right here, and then I'm going to hit create. Well, actually, I'm going to change the name here.

Going to call this weight list dash demo. And then hit create. Great. So, I'm going to give this a name a project name. So, we're going to call this weight list-demo as well.

And then I'm going to hit deploy. There are two things that are happening when we hit deploy. So, first we're going to be cloning the template from based from base demos to my private GitHub and then I'm also deploying the project. So, when I start building my mini app, I already have a deployed URL. Amazing.

So, our project has been deployed. So, this is looking really good. I'm going to continue to the dashboard and let's see what the next step is. So, I'm going to go to step two. Step two is that I'm going to clone the repository.

So I'm going to hit here on main. That will take me to my GitHub. So I have this project already. And then I'm just going to copy this. And then in my terminal I'm just going to enter the project.

Amazing. So I'm going to CD into my project which is wait list-demo and then I'm going to install the dependency that's going through. Okay, let's see what step three is. Awesome. So step three is all about updating our forecaster.

json which is I had highlighted earlier. Um essentially what we're going to I'm going to show you guys how to get here and what this file does. It tells apps like the base app, hey, the name of the mini app for our for all intents and purposes today is QV. Um, this is the subtitle. This is where the images are for this mini app and everything.

So like this, think about this as your config file for your app. And when I open the project, I go to then I am going to look into my mini config. Perfect. So, one thing that you are going to notice is that a lot of these are using root URL. And you may be wondering what is the root URL here?

Well, because when we first started in step one, we deployed the project already. This is already prepopulated with your VLE production URL. So, I never have to change this because it's it's already set up. Um, here is like where you have your images. All my images are in the public folder.

So I just need to make sure that I have named them correctly and then once I am able to deploy once I deploy my project um when I update my manifest and everything it should all just work out of box straight away. I don't need to change anything here which is really good for me. Just wanted to give you a bit of a a demo of how this all works now. So let's get to step four. Awesome.

So step four is all about creating the account association credentials. So this is me signing to say that I am the owner of this mini app and my mini app is hosted at this URL. So because I don't really have to change anything. I'm just going to use the URL that we got from Vel straight away. So I'm going to copy this.

Then I have logged into base.dev. And just to note that I've logged into base.dev tab with my base app account. I paste my URL in here and I hit submit.

Amazing. So, you can see already we have the images. That's all really good. But here's the really important part. We need to verify the mini account association.

So, I'm going to click verify. I'm going to sign the manifest. So, I'm going to hit sign. Now, I'm going to sign this with my mobile phone. Perfect.

I signed everything with my mobile phone now. So all I need to do is copy this account association and then I am going to paste it directly here in my config file and save. Now in order for me to update the state here, I'm going to have to redeploy my project to make sure that that is update and valid. So let's just run. So let's just run the cell d-pro.

Then I'm going to set this up. It's my project. And then the project is already existing. So I'm just going to hit Y cuz we want to link to it. And now this is just deploying.

Awesome. So that just finished deploying. So we finished step five where we've pasted the account association. We're we finished step six where we push to production. And now we're going to preview on the base dev app.

So we're going to close this. I'm going to resubmit and it's associated. So here you can see it's associated with my account. The domain matches and the signature is all valid. Is we want to check the console to see the mini app loading.

So I just click the button here. Perfect. Our mini app looks really good. And in our final step, I would just make a post like this image here. I would put the URL of the mini app and I would hit post.

And then that's it. You would have a working mini app. Thanks so much everyone. Thank you so much for building on base. See you next time.