1.2 What You Need and App Overview

Since we are going to be improving an existing application, it makes sense to spend a few minutes talking about this application just so that you can have an idea of what you're going to be working with. I called it LaraCMS. It's a very simple content management system, but of course, you can call it whatever you want. [LAUGH] And I'll go ahead and point out that the version used for this project was 5.5.27. That is the latest version as of this recording. So naturally you can update this project if you wanted to but just be mindful that's there could be some things that break. I can't think of anything off the top of my head, but this is software, and Laravel is software. And software changes over time, so just keep that in mind. But the whole reason why I wanted to come to the command line first is because we want to run spm install. Because if we look at our project, there is a package.json file. Now this wasn't created by me. This was given to us us by the Laravel installer. So, any new project that you create is going to have package.json. There's some dependencies already listed here that we are definitely interested in. Vue and axios is something that we are going to use as well as laravel-mix. So these are all things. I did not modify the devDependencies at all. These were all here by default. So we want to install all of our dependencies so that we have them whenever we want to use them. Now if you wanted to just run the application, you could do that because all of the assets have already been compiled and everything is there. However, to go forward, from a development stand point, we do want to run npm install. Now, if you're not familiar with npm, it stands for node package manager. It's a tool that comes with Node.js. So if you don't have Node.js installed, you want to install it. Node is just a framework for writing applications in JavaScript. And it might sound a little strange that we are going to be using something like Node that is a JavaScript framework when we are going to write an application with Laravel. But the whole reason why we want Node is for npm. Because it drastically changed the way that we manage our client side dependencies, not just JavaScript, but CSS as well. So in order to get npm, we have to install Node.js. So you can download the LTS or the current version, it doesn't matter. We are just using this for npm, so once you install Node, be sure that you have npm installed as an option. It's done by default, but just make sure that that's there. And then we can go back to the command line and run npm install. Now the first time you run this on the project, it's going to take a little bit of time, because it's got to install all of those dependencies. So after it's done, then we can run the application and just briefly go over that. Now this particular application has two pieces. There is what I am going to call the front end, which is what you would go to in order to actually consume the content, and then there's the back end, which is all of the admin stuff. And really, our work is going to be in the back end because that is where we want to focus all of our enhancements. So whenever we go to the application, we're going to be greeted with the front end. And of course if we go to Login, then that's going to prompt us to log in. Now, there are migrations, there's seeders already available. So do be sure to run the migrations and run the seeders because that's going to give you all of the necessary data. And then we'll just log in. In this cases admin@admin.com and the password was password, unless if, yeah, okay, that works. So from an admin standpoint, we have individual pages where we can see the list of those pages. And we can delete them, we can edit them by clicking on the title. So we can see that. And any time that we have a form, that's a definite place where we want to spend some time. Because whenever you have a form that is going to be the primary focus of the user, that is how they're going to interact with our application. So, there's several things that we can do here. Because, although the validation and stuff is on the server side, and it still needs to be there. But it would be nice if we had some client side validation so that we can essentially do the same thing through JavaScript. So that it wouldn't have to do a complete page refresh in order to tell the user that something is wrong. So this is the edit page for an individual page. You can also create a new page which is practically the same form. The same is true for blog posts. We have a list. We can delete them and we can, of course, create and edit them, as well. And when it comes to the individual users, well, we can't really create them because that really wasn't implemented. There is the registration process and everything is protected through the roles. So you can edit the roles of a given user. Now one thing that comes to mind is we are logged in as admin. And if we try to go to admin, well it's going to say you cannot edit yourself. But notice that it takes a page refresh in order to show that. So that could be something else that we would want to enhance, as well. Now remember that our goal isn't to create a single page application. We simply want to enhance an existing application. So a lot of the work that we do is going to be with that in mind.