Getting Started with the Vue 2 Starter App

Sebastian Scholl (00:03)
Hey, everyone. This is Sebastian here from 8base. Today, what I'm going to be doing is walking you through how to get set up with our Vue 2 Starter app, so that in just a few minutes, you can have a fully functioning Vue.js application that has authentication pre-enabled as well as an API connection to an 8base workspace so you can just start developing your front-end application really fast. Let's get into it.

Sebastian Scholl (00:27)
Here in the 8base GitHub is where we have the Vue 8base Starter application. I'll put the link in the description of the video so you can access it easily. However, there's a readme that walks through these steps, but I'm going to walk you through it and then just point out some things inside the repository to help contextualize the way it's structured and just to help make some sense of it.

Sebastian Scholl (00:48)
The first thing I'm going to do is actually clone down the repo. I'm going to copy the repo link and then open a new terminal window. Now inside here, I'm going to move into my code, 8base, temp folder where here I don't have any projects. I'm going to go into Git, clone the repo here. I'm just going to leave it in the same name.

Sebastian Scholl (01:16)
Once that is copied to my computer locally, I'm going to move into that directory and just run npm install. As of today, which is June 17th, 2022, all the dependencies are up to date. If you're watching this video a year from now, hopefully no issues are running, but we'll also try to keep the starter app up to date as frequently as possible, as well as roll more of these out with different frameworks.

Sebastian Scholl (01:45)
That installed successfully. Now if we go to the Starter app readme, we can see this says run npm install and then create a local environment variable file. We're going to have to create these environment variables. I'm just going to copy the template for them.

Sebastian Scholl (02:03)
Then here I'm just going to say touch .env.local, just for our local environment variables. Then I'm going to use the pbpaste command into that .env.local folder. Now if we see the contents of our environment variable file, got it, we have all the environment variables in there that we need. We just need to set the values now.

Sebastian Scholl (02:29)
At this point, I'm actually going to open up the app in my IDE, which I can stretch out there. I'm going to open a terminal window so I have that. Awesome.

Sebastian Scholl (02:41)
Let's just open the environment variables file so we just knock this out of the way. It's running on port 3000. You can change the port depending on whatever port you want to run your app on.

Sebastian Scholl (02:51)
However, there's five environment variables that we need to set: the workspace endpoint; that's your API endpoint for the workspace or workspace environment that you want to work with, the auth-profile ID and the client ID, and the Auth client domain, which we are all going to get from authentication profile, and then separately, the workspace ID. If we wanted to, technically, we could use one to create the other, but we're just creating them all as separate variables right now.

Sebastian Scholl (03:15)
Let's go back to the browser. Here, I'm in one of my 8base workspaces that I use in a lot of these tutorials called Supertasks Backend, so it could be any workspace, it doesn't really matter. I'm going to go first to my home and I'm going to get the workspace API endpoint. Let's copy that one over.

Sebastian Scholl (03:41)
I'm just going to snag the workspace ID right off the end of that. Since I have CI/CD enabled in this workspace, you can see that the environment name, multitenant, is at the end of this workspace ID. You may not have that if you're just using a developer workspace or dev workspace, but no, that's why there's a funky name on the end of there.

Sebastian Scholl (04:04)
Next, I'm going to go into my app services and create a new authentication profile. In here, I'm just going to call this VUE, I don't know why I pronounced it weird, but VUE_APP_AUTH_PROFILE. We leave as 8base authentication. Once again, we have some other guides on how you can set up with auth0 or on Cognito. It all works the same way, but we'll just use 8base off for now.

Sebastian Scholl (04:33)
I'm just going to say anyone can sign up for this app, and anyone that does sign up is going to have the user role. Add that profile and now that gives all the other information that we need to set. First off is the Auth profile ID. I'm going to snag that and drop that in the Auth profile ID field or variable, the client ID, which I can get from here, and then finally, the domain. I'm going to stack the domain.

Sebastian Scholl (05:12)
With all our environment variables set, just going to open another terminal in case I want to get back to here. I'm going to run npm run start. Oh, one second. What's the right command? Serve, excuse me, npm run serve. Starting up our development server. Now the app is running at local host.

Sebastian Scholl (05:41)
Now we have our app. As we can see, it says you need to log in, so that's a hint that there's authentication there. We have a few different pages, so the vue-router is installed. As well as then we have the profile, which is disabled because we're not logged in. I'm going to go and sign in, which brings me to the hosted login page, which in this case is offered by Cognito. That's what's happening behind the scenes for 8base at this point or 8base off.

Sebastian Scholl (06:08)
I'm going to sign up as a user. Here, I'm going to use my one random inbox account, Sebastian Scholl. You know what? Before I do that, I'm going to delete myself as a user; in this workspace, I was already there, so that there's not a conflict. If I had done that, it would just say that you already signed up, so we're just avoiding that.

Sebastian Scholl (06:37)
Sign up. Just going to wait a minute. Then I'm going to give it a super secret password, and I'm going to sign up. It redirected me back to the application. Now I'm logged in and it's returning me my user data showing that I've now been created and signed up as an authenticated user. Now we can see that the profile is available and that's actually using the API request to go get my information from the base back end, showing that I'm authenticated via the API.

Sebastian Scholl (07:08)
Everything works. At this point, you could jump into the Vue.js app and start building whatever you want to build. It's a really easy to get started Starter app.

Sebastian Scholl (07:19)
A couple of things. First off is that there's a folder in the root directory called 8base. Inside here, there is an index file which you can import everything from. It just imports the two different modules that we're using, which is the API module and the Auth module.

Sebastian Scholl (07:35)
Then here, we have the API, which here we can see that we're using Apollo Client. This is just a configuration of Apollo Client, which works pretty well. It has the link for the API, which is where it's in that environment variable, has an error handler for GraphQL errors or network errors, which you can change as you need. Then it sets the contacts with a function. Whenever an API request is made, it goes and tries to get the ID token they stored in the state, which brings us to the next thing, which is that VueX is being used as the state management system.

Sebastian Scholl (08:16)
If you go to the store, modules, here, we can see that we have one module being set in the VueX store, which is the session. If I go to the session module here, it's all set up for storing the ID token and storing an authenticated state, which you saw being used in the front-end a little bit, so handling mutations for whether users authenticated, logging in, logging out.

Sebastian Scholl (08:44)
As well as one thing that's important to understand is that when you authenticate with an Auth provider, the Auth provider is saying that this is returning the token, saying that this person is successfully authenticated. When we handle authentication on the front-end, we get that token back. The first thing that we actually want to do is set that token as a bearer token and then make an API request to 8base to say, "Hey, show me the current user."

Sebastian Scholl (09:05)
We want to catch that, because if there isn't that user in the 8base database yet, we want to then create that user because we know it's their first time signing in, it's their first time signing up. We catch that error and then we run a mutation that signs up the user using the Auth profile ID that they authenticated with, and in this case, their e-mail address, but you could throw any other data in there to add it to the user record. That's how the user gets signed up. Then we commit it or run the mutation, which authenticates them, which is just parsing out the data and storing it.

Sebastian Scholl (09:45)
Then after that API module, we have the Auth module, which essentially just is importing the 8base SDK. We tell the strategy we're using, which is Web 8base Cognito. Here, it's just setting some different settings, which we have documentation for the breaks down, essentially playing in those different environment variables, and then setting the login redirector URL and the redirect URI.

Sebastian Scholl (10:07)
It's important to note that you will get an error if these aren't properly set. They get properly set inside your back-end at the Auth profile in the allowed callback URLs and logout URLs. Pretty straightforward.

Sebastian Scholl (10:28)
Everything after that is really pretty cookie cutter. You have views, you have utils. This is organized in a little way to make it more convenient to use. However, as Vue.js developer, you can dive into here and have a field day and reorganize and restructure however you want.

Sebastian Scholl (10:46)
I hope that this helped you get a good understanding of how easy it is to get started with the Starter app. If you want to do Vue.js development using 8base back-end. 8base back-end is really a fantastic solution for building apps with Vue.js as a front-end technology. It just allows you to really focus in on building an amazing user experience with Vue.js while a lot of the back-end concerns are being handled for you.

Sebastian Scholl (11:11)
With that said, if you found this video helpful, please like it. If you want to get updates when future videos come out, please subscribe to the channel. Happy developing. Looking forward to seeing you in future episodes.

‍