2.1 Initializing the Client Project

Now that we have our environment all set up and ready to go, let's start developing our application. And we will start with the client side because that is where the user first experiences our application. They go to the register or the login page. So that's where I want to start. And we're going to create a folder or a directory and then inside of that directory, we're going to have both our client and server projects. So the parent directory is going to simply be express-view. You can call it whatever you want and we will of course need to CD into that directory. But from here, we will simply use view create. And for the sake of brevity, let's just call it client. Let's do this. Let's do client app. Now this is going to take us through a few options for us to choose. First of all, it's going to ask if we want to use any of the presets and there are some that I have from previous courses, but there's also some of the default ones. Let's manually select the features. We will of course want to choose our view version because there is version two and version three. We want Babel we want the router. Let's also use view x that's going to allow us to manage our state, which is a very good thing. But I'm going to take out the linter and formatter. And that's going to be okay. So let's go on to the next one. We're going to use view three in this course. And then we're going to use the default for the history mode. So we'll have that we want dedicated config files. So we'll take that and then save this as a preset. No, we'll take that. So this is going to take a few moments to install that project but once it's done, we can start diving into the code. Next we want to install the bootstrap so we will of course want to cd into our client app directory and npm install bootstrap, and we're going to use the next version. And we also want to save this If we are gonna install bootstrap, then we also need to install popper. Now, this particular version of bootstrap is version five, which does not need jQuery, and it also helps if you type bootstrap correctly. So be sure that you do that at least it's not going to install something erroneous although I'm kind of surprised there's not an npm package called bootstrap. But there we go. So when this is done, we will install popper. And that is simply @popperjs/core and of course we want to save that as well. So let's first of all fire up the code editor. And we also want to go ahead and just get this started running. So we'll run npm run watch that to run the watcher that will of course, compile everything of theirs. So let's take a look at what is there it is, serve my apologies. So we will run the serve command. And that will compile our application and get everything up and running in the browser so that we can start working with it. While it's doing that, let's just dive right into our code. Now this is of course going to give us the plain ordinary starter application for view. If we point our browser to 8080, then we will of course See that. So that's what we see. And of course, that's not going to suit our purposes. So let's start by opening up main.js. This is the entry point of our application. And we're going to keep App.vue. So let's do that. But let's also go ahead and import bootstrap here. Now first, we're going to import the CSS and that is simply going to be bootstrap.min.css that is inside of our node modules. And then we want to simply import bootstrap. Now when it comes to incorporating bootstrap within a project using Webpack or NPM, I want to make sure that it's done so correctly. So I will take a look at what is currently in the browser. And whenever I save this, we should see the styling change. And yes, the styling did change. All right, so now we're going to use this app component because that is a great place for our application to live. However, inside of the app component. We want to get rid of the style here because we're not going to use any of that. We can also get rid of the nav here, because instead we are going to have our own markup and I'm just going to paste that in. So all this is going to do is add a nav bar at the top that we can see here we can see ExpressVue Reader. We'll have a menu out to the side. I mean, this is just basic boilerplate, bootstrap stuff. And then outside of the nav, we have a div element that has a container that has a row that then has the router view. So if we look at the router, we're going to see Two routes, one for home and one for about. And of course these are using pre-built views, which we don't really need here. So let's take out the home and let's say that we are going to have a component or a view called log-in. So in fact, let's just keep home there, let's change it to login so that we don't have to rewrite that line. And we will also have a route that is going to be /login. So I want the home page to be the login page. But of course, if a user is already logged in then we will need to take that into account. We will do that whenever we come across that. So as far as the path is concerned that's going to be simply /login. And I tell you what, let's call this route login. We'll change the other route name back to home, and then the component is going to simply use login. Of course this does not exist. So we want to go to our views folder. Let's just rename home with login. And I'm also going to paste in the markup for this view. And the reason is very simple. It's very straightforward. It's nothing more than two fields and a button. The field for the email address is called the email. The one for the password is called password. And there we go. I've gone ahead and set up the click event listener for the login button. And there are the models set up for the fields. So I'm going to put these on multiple lines just so that we can see them all on the screen at once. Now of course, we're not using this hello world component anymore so we can get rid of that and we can also get rid of Well, just about everything here will change. Well, we'll keep the name of, no, we're gonna change it to login. So we will do that. And there is our login view. So if we view this in the browser, there we go. So just very, very basic stuff here. Now we do need a register view which if you are logging in It's almost the same exact stuff. So let's copy our login.vue, let's rename it to Register. And there is a new trend, well I won't say it's new. It is fairly recent for registration forms to where there aren't two passwords. And I think we're going to follow that particular trend. So this is essentially going to be the same thing where we have the email address and then the password. And then instead of login, we will have the text register for the button. Now as far as our text down here, this needs to change. If you have an account, then login now and we will of course have links there to go to the different views. Let's change the name of this to register. And let's also add a route to this view. Let's just copy the login that has the path of /login. We will change that register the name will be register. And of course we want to import that register view. So that will give us a route to registration. And in the next lesson, we are going to start in Incorporating our view x store, because that is what is going to essentially maintain the state of our application including determining whether or not the user is authenticated.