Welcome back, gang! I want to start pulling
in some of the packages that we need to set this up. The first thing we need
to do is install a new Laravel project. In order to get this to work correctly what
you need to do is create one main folder. In that folder we're going to have two
separate packages. One will be for the back end. One will be for the front end. Let's start with
the back end. We're going to create a new Laravel project and we're going to call it api.
We're going to let that run. Now that that's finished, we can go ahead and
just -- we don't need to cd into the project. We can just head right into our text editor
from here. The one I'll be using is VS Code. There it is. You can see that we
have our new project in here. We'll open that up. Here are all of our folders. We can come back in here and exit
out of this because we don't need it anymore. I want to open up the terminal. We'll just let that sit there for now. The
first thing that I want to do is connect to our database. I already have one set
up in here and it's called friendzy-demo. Username is root, password is blank and in this
terminal down here, we can cd here into the API. Then we're going to run php artisan migrate to make sure that that's connected
correctly. Now that that's done, let's just go ahead and check the database and make sure
that you have that in there so friendzy-demo. Cool! There's our database. Fantastic!
The next thing I want to do is head over into Laravel Fortify and start pulling
in the authentication package that we're going to be using. We'll go down to
installation and then composer require Laravel Fortify right here. We'll copy that and
we'll go ahead and paste it in our terminal. Now that that's done, I'm going to
leave it open for now. We'll stretch this out so that
we can see what's actually happening. Let's head back into Fortify and keep going. The next thing we need to do is publish
the vendor files. Grab this code here -- copy, paste it in our terminal, enter. That's brought in all the
extra files that we need for Fortify. Let's head back to the documentation and see
what else there is to do -- this will publish. Cool! Next, you should migrate your
database. We need to do that again. The next thing we need to do is, the vendor publish command discussed above will
also publish the providers. You should ensure this class is registered with the config
app. Let's just grab this, copy, and then migrations done. Great! We need to go to the --
bring this down and we'll go to the config/app. We'll scroll down to the provider
section. It should be down here somewhere -- yep, application service providers. We can just
drop it right under here. I can close this and then now we can add class and
that's done. Let's see what's next. Fortify features -- Fortify feature configuration
file contains the features configuration. We need to make sure that this stuff is uncommented
in that config file, which should be right here. Go down, go down, go down. I think it's this
stuff down below here. We're not going to be setting reset passwords
or anything. The only thing we really need from in here is the registration. Let's head back
to the documentation and see what else is next. Disabling views -- we want to change that
to false so head back to the text editor and views, which is right up
here, we'll change that to false because we're disabling all of the views that come
with Fortify. It automatically sets them for us and creates them for us but we're not using
Laravel as a front end so we don't need that. We're going to be doing all
that in Nuxt. Let's head back to the documentation. Disabling views and reset
password we're not dealing with any of that. I think that's pretty much it. If we run
into an error then we'll come back to this. Let's head over into Laravel
Sanctum and start pulling that in. In the past, Sanctum has been
a little bit tricky to handle front-end frameworks attached to Laravel.
It's been a little tricky but we're going to make it as easy as possible. Let's
go down to the installation and then we'll copy this code here. This is what we need to
install it. Go back to the terminal, open this up, paste it in, enter. Now that that's
installed, let's head back to the documentation. Next we should publish the configuration files, copy, paste, enter. Head back to the
documentation and see what's next. Finally, you should run your database
migrations. This is going to be the table that has our tokens. We don't really
need to run it, but in case you do want to switch this up to tokens it doesn't really hurt to
have it. We're going to be using cookies but it doesn't really hurt to have.
We'll head back to the documentation. It says next, if you plan to utilize Sanctum to
authenticate an SPA, you should add your Sanctum's middleware. Sanctum has two different
ways of handling authentication. You can either do tokens or you can use cookies and
that's what we're going to be using, cookies. API token is more of, if we were putting
it into the same project. So if we were putting Nuxt within the Laravel project, then
we can use the tokens, but we're not. We're just going to go ahead and use
this one. Let's head back down to the authentication and we need to put this
in our kernel file -- this line right here. Copy, and you want to make sure that
it's the kernel file that's in the app/Http/Kernel. We'll come down to -- the API in the middleware groups and we'll
paste that little bit of code right in. Don't forget to import it as well. Fantastic! Let's see what's next. Cors and cookies. If you are having
trouble authenticating, then you should make sure that your Cors configuration is returning
the access-control, allow credentials. Then you want to turn them to true.
Let's go into the Cors config, which is right down here. Open that up. We can close this. This is what's going to handle our Cors, our cross site --
Basically allowing the API to talk to an outside application. This supports
credentials, we want to change this to true. Up here is a list of the different paths
that it will allow and this we'll be giving permissions to different things up here in order
to have them be able to reach back to Sanctum. Let's head back to the documentation and see what else
is next. This Axios defaults, with credentials needs to be set to true but we're going to
handle that with the Nuxt. When we set it up, it'll automatically do it when we add the
Laravel Sanctum package to it. Finally, you should ensure your domain's application
session cookie -- we'll do that in a second. This we can do in a bit as well.
Logging in -- blah, blah, blah. Protecting routes. We need to change the Sanctum -- the route.
Because we're going to hold all of our routes in the routes API file. This we can just
go ahead and do it now, change it to Sanctum. Let's check back -- authorizing private broadcast, we're not doing. Mobile, we're not doing. Tokens. I think that's it. We need to change
some things in the environment variables. The first thing we need to change is
our app url. Our backend and our front end need to be on the same domain.
For the app url, we're going to change to localhost:8000. The other thing we need to
change is, if we go to the config/sanctum, this is our stateful domain,
which is localhost, localhost:3000. This is what we need to be able to contact our front end which
will be Nuxt. Nuxt will be on localhost:3000. Let's copy that, and we'll set that environment
variable in here. We'll just put it right under the session lifetime. We
need to make that equal to localhost:3000. The other thing we need to do, is also add our session domain and we are getting that from
our config folder, our session file. If you go all the way down here to our session domain, you see that it's -- by default, it's set to null. This we need to actually set it in
our .env file. We're going to come back here, we're going to set it here, and this one
is going to be called just localhost. The API will be able to recognize the Nuxt endpoint and our endpoint and it'll be
able to talk to each other and because localhost is the domain that's what's holding the session
for the entire application altogether. To find that you would go
to the Laravel documentation. If you come up here, all the way to
configuring your first party domains, everything that we just did is right in here. If you need
to go back, and take a look, and freshen up. Or just get some more information, that's where it would be.
Let's head back into the text editor. I want to get ready to start pulling in
Nuxt. We're going to open up another terminal. We'll bring this -- we can close all of these up
for now, and straighten that up. We'll pull this up. In this same generic
folder we have, if you can see we're logged in on the left side we're cd'd into the
API, but in this one we're just cd'd into the overall friendzy demo which is this one right here.
We're going to go back to the documentation. We're going to go over to the installation
page -- I'll make sure to post all of these links with the exception of Laravel because I think you
can find the documentation just fine. I'll go ahead and post up the Nuxt and the Laravel
Sanctum ones in case you wanted to know which ones they were. The one we're going to be
using is using create-nuxt-app. Nuxt is a really fun package. It's built right on top of VueJS
and everything good about VueJS, Nuxt just completely adds to it and makes it even
that much better for a lot of different reasons -- SEO and just the ease of the functionality.
The ease of the way you can do things. Nuxt is just a really cool thing to look into. If
you've never tried it before, we're going to do it here but if you've never tried it before, I would
definitely look into getting it and using it for other projects.
The documentation has changed up a little bit so it's kind of tricky to find but if you go down
a little bit you'll see -- to get started quickly you can use the create-nuxt-app. If you click
that, it'll open up a brand new GitHub page. This is the nuxt/create-nuxt-app
page on GitHub. If you go down to the actual documentation for it, you can pull it
in through different ways. You can either use npx, npm, or yarn. If you already have node and
npm installed then you can use either one of these. It doesn't really matter, but let's
go ahead and just use if you're using npm -- just go ahead and use this one. We'll copy.
We'll come back to the text editor and in the one on the right, we're going to paste that in.
This project we're just going to call it client. It's going to run for a little bit. It's
going to take a little while and then it'll bring up a list of different commands for us to
enter in. I'm going to pause the video and let it start. Working once it gets to that point, then I'll
resume the video. Now that that's done, let's start customizing this setup.
Our project name we're just going to keep it client. We're going to be using JavaScript and -- you
use your up down arrow keys to make changes. The package manager we're going to using is
npm. The UI framework -- we are going to be using Tailwind again. At some point I'm going to
use some of these others for different projects, but for now we'll just use Tailwind. We're
going to pick Axios and I think we can leave it there. We can leave these blank. Testing framework, we
can leave it to none for now. Universal, we'll use server. Development tools, we'll just use json.config -- you want to press the
spacebar to select it. What is your GitHub user? I'm just going to put -- it doesn't really matter. Version control, no we're not going to use any because I
am going to be pushing up this code to GitHub but i want both of the folders to be in it. I'm
going to do it separately than using this one here. We'll let that install. I'll pause the
video and then I'll come back when it's done. Fantastic! Now that that's done, I have already gone ahead and run php artisan serve on the left side. Just so that we could have the API running in
the background. This whole Nuxt setup on the right side has created this client folder
right here. What we have to do, is cd into that folder. We have to run
npm run dev. Here we have npm run dev We'll let that run. We can click
this link right here and it'll open up the new app that we just set up. I'm
going to slide this over to the left so that we can stay a bit organized. There
it is. Fantastic! Let's head back into the text editor. we'll drop this down.
We'll keep this running. We first want to go to the nuxt.config.js. There's
a few things that we need to fix in here but as you can see it has everything that holds
our package together. This is basically like the .env file for Laravel. It holds our
css, our plugins, our modules. You see we have Tailwind pulled in here. We have Axios pulled in.
We just now need to configure it. One thing that we do need to bring in,
and actually I'm going to stop this Nuxt for -- just real quick. We'll hop back into the browser. We've already done create-nuxt. We also
need to bring in the Laravel Sanctum package. that we can start setting this up.
What we want to do is head over to the setup guide, and then we need to
install it. Since we're using npm, we have already installed Axios, that's done,
but we do need to install this auth/nuxt package. Copy, and now we're back into
our client folder. We'll paste that in there. Let that run. What that's going to do is,
bring in all of our authentication for the Larvel Sanctum package. We need to bring in
this module since we already have it here -- the Axios we already have. We can just put this right
underneath, and then let's see if there's anything else. When adding -- we're not using Typescript. No, that's it. We can go back to the Laravel Sanctum. This is the strategy that we need to pull
in. As you can see, there are other ones here. They give more details on how to do them.
This is how you would log in on the login page. Let's grab this and go back to our text editor. Right under, we'll do it. Under Axios, we'll paste that in. One more thing that
I want to do is fix this spacing in the editor.config file.
I just want to change this to 4. Nothing against 2 but it's better for
me to have it in 4. It's just a personal preference. We'll go back to the nuxt.config.
We already have, as a strategy Laravel Sanctum. We have our provider. Our url
needs to be the url of our app so it's http//localhost:8000. I need a comma
under here so it stops screaming at me. Then we also need to add in some endpoints. Our endpoints are going to be -- we need
one for login, logout, and user. Login -- and that url is going to be login. We haven't set
up these routes yet but we'll do that in a second. Login. We're also going to need a logout and that url will end up being /logout. One more, we need user. That endpoint will end up being url -- apiuser and that's because --
if we go to the api folder, and head down to our routes -- in our api route.
That's what this is. Everything that goes through this route file, this api file --
it's prefixed automatically with api. Which is why here, we're going to be using api for this. We don't
need these for here because we're going to be using the Fortify routes which aren't
api. We won't need to make routes for them. They were already made when we installed
the Fortify package. That's good for right now. There's one
more thing we need to do and that's to set up the Axios module. We'll open this up. If you
take a look at the documentation for the Nuxt auth, you'll see that we need to set the credentials and
that's what it said in our Sanctum. That we need to make sure that we set those credentials
to true. I think they were up here. The Axios defaults with credentials.
The way that we would do that with Nuxt is, we would first add the base url, and then we'll
put http://localhost:8000, and this will just let the API know that every time we make an
Axios request, that we need to use the localhost:8000 because that's the address
of our API. Comma and then credentials true. Let's go ahead and
run npm run dev, make sure that compiles down. We want to make sure also, more
importantly, that we didn't break anything. Now that that's done, let's go and make sure
that it's working okay in our browser -- and it is. Very cool. One cool function about Nuxt
also, is that it automatically reloads every time. It hot reloads every time you make
a change into any one of the files. I'm going to leave it there for today. In the next
episode, we are going to start building out the pages -- or at least getting us ready for the
authentication so that we can set up the registration, the log out, the login and get that
entirely set up and connected to the backend -- because we haven't created any routes yet.
We're going to do that in the next episode and then we'll be able to push forward, go ahead,
and get ready to tackle our friendship system. All of this code is going to be pushed up to
GitHub. I forgot to set up the repo before I started the tutorial today. What I'm going
to do is make sure that everything that we've done today is going to be added in the initial
commit. When you're looking, just know that that's the case. Everything is under that commit --
that very first initial commit. Everything we've done today is going to be up there. If you
have any questions drop them down below and I'll try to get back to you as quickly as I can. Thanks
for watching and I'll see you guys next time.
