3.1 Reorganizing the Code
Things change when writing an app, and our project is no exception. We'll reorganize some of our code so that we can have better separation between the front- and back-end.
1.Introduction1 lesson, 01:24
2.The Application's Front-End8 lessons, 1:06:02
3.Ticket Administration6 lessons, 56:09
4.Conclusion1 lesson, 01:13
3.1 Reorganizing the Code
In this lesson, we finally get to start focusing on the admin section of our application. And this is what I always like getting into, because it's a lot more involved than the front end. We're doing more than just reading and creating data. We are updating, we are performing user authentication, and in full-blown applications, there's a lot of other things going on. Now, I am going to go off script, and that's kind of funny, because that implies I had a script to begin with. But I had in my head how I was going to write this application, and I was originally going to put just everything inside of app.js. If you go to public>js, and then app.js, all of the files that we write are getting put inside of here. And that's great, but I kind of want to segregate the application. I want to have what is the client side, or the front end, in its own little self contained area, and then I want to do the same thing for the admin. So that means that instead of using the welcome view for all of our application, we're going to create another view. So the welcome view is going to be for our app. Then we will have the admin view for the admin. And so let's just copy the welcome view. Because, for the most part, we're going to use practically everything in here. We are, however, going to add a meta tag. Now, I don't have any processes running right now, so we can't see this in the browser, but if you'll remember, whenever we have looked at the console, there has been an error about the CSRF token. Well, we're going to fix that. We're going to add a meta tag where the name is csrf-token. And then the content is going to be set to the CSRF token. So we will call that function. Now, the reason why we want this is because we are going to be making some post requests to our authentication controller. That is how we are going to authenticate our users. And in order to do that, we need to supply the CSRF token. Now yes, we could turn off the CSRF token verification. However, I don't want to do that. That's really not something that we want to do, because if we do ever implement some traditional web application stuff within this project, and we have post requests, we want to have the CSRF token there. So it just makes sense, we can add the CSRF token here, and it's going to be automatically added to our requests because axios is going to do that for us. So the only other change that we need to make here is, instead of bringing in app.js, we're going to bring in admin.js. And that means that we need to generate that file, and that's done by laravel-mix. So if you go to webpack.mix.js, what we want to do is essentially call the js method again. And we are going to specify the input file as being admin.js. And it's going to output that inside of the same folder, public/js. And so, that means we're going to have a completely different set of source files for our admin. And that also means that the organization that we did a couple of lessons ago, while it was great that we did that, it's going to be different now. Because what we're going to do is, inside of the js folder we're going to create a new folder called admin, and then we're going to put all the admin stuff here, so all of the admin components, the routes and all of that. And we could go ahead and put the admin.js file inside of here. But I'm thinking that it's okay if we just put it here at the js level. And one thing I want to do, is I want to take the app component out of the components folder. And drop that just inside of js, because this is something that's going to be used for both the admin and the front end. So we will just have that there. And, you know what? Let's do this. Let's create a new folder. We'll call it shared, why not. And then we will put the App.vue file inside of shared. Now this does mean that inside of app.js we need to change the path here. It's no longer in components, but it is in shared, and then App.vue. Let's go ahead and create another folder inside of js. We'll just reorganize everything. And let's call this frontend. And then we will put the routes file inside of there. That, of course, means that inside of app.js, we need to change that route as well. So we will just add frontend to the route. And I guess, since we're here, we can go ahead and move our other views that are used for the frontend to that frontend folder. Just so that everything is going to be consistent, because consistency is a wonderful thing. Now, this does mean that we need to change the path here. So for our components inside of the routes file, we will simply get rid of everything except for the names, and that should be fine, and we can get rid of the components folder. So now let's create a new folder or a new file inside of the js folder, we'll call it admin.js. And let's use what we have inside of app as a basis, because we do want some of these stuff. So inside of admin.js we will import Vue, we will import the router, we still want VeeValidate, we still want App. Now, as far as the routes are concerned, we are going to define our own routes for admin. And so inside of the admin folder, let's create a routes.js file, and let's also create a component, one that's going to serve as kind of our home page. And that would be something like a dashboard, so let's create a dashboard.vue. You can call it dashboard component if you want, but I’m going to be lazy and just call it dashboard. Now, this is going to be rather simple to begin with. For right now, I just want to make sure everything is going to work okay, so this is the dashboard is all that's going to be here so that we can at least see something on the screen. And let's also write the script so that we export that. And then inside of our routes, we can bring that in. So we will import the dashboard, and we're going to use this as our first route. And we will essentially do what we did in the previous routes file, in that we will just export the array that's going to contain all of our routes. So our first and only item right now is going to have a path of nothing, because that's going to be home. And the component is going to be Dashboard. Now, we have not set up our route as far as the server side is concerned. So let's go to routes, let's go to web.php, and we are going to copy what is there for welcome and just make a quick replacement for admin. So that the path is going to be admin, and it's going to return the admin view, and so now I think everything's in place, let's start up the web server. So we will php artisan serve. And in another window, we will run the watch, and let's make sure that everything is going to compile. Now we should see three files being output. One is going to be app.js, the other is admin.js, and then the app.css. And we can see that there. So we can go to the browser, let's first of all check our existing stuff. We can view the existing tickets, that's great. We can submit a ticket. So now let's go to /admin, and what do we see? This is the dashboard. And so in the next lesson, we will start working on incorporating user authentication.