Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Web app with node express and vue 400x277
  • Overview
  • Transcript

2.1 Initializing the Projects

Let's get started setting up our application. Now as I mentioned in the previous lesson, we are going to have two projects. We will have the server and the client. So we need two command line windows. And in one of them, we are going to just init our project. And I'm going to change the main file from an index to app. And everything else we'll do from the command line. So with that, we need to install several things. We, of course, need express. We also need body-parser, so that we can parse the body. Need cors, we need bcrypt, because we are going to encrypt our passwords, that always a very good thing to do. Never store passwords in plaintext, ever. We also need jsonwebtoken, jwt, for our authentication over our RESTful API. We also need mongoose so that we can interact with our mongodb. And I think that's it. So we want to save these dependencies. We'll get that installing. And then we will hop over to our other command line. Because now we want to setup our Vue application. Now we're going to use Vue CLI, and if you don't already have that installed, the first thing we need to do is install it. So we'll use npm once again. You can use yarn if you want to, but npm is going to be fine for me. We want to install this globally, and it's going to be @vue/cli. Now this is, of course, going to install the vue/cli globally so that we can use the vue command to create our project. So once this is done, then we will create our project. And it is going to be a subdirectory of our main portfolio project here. So all of our server stuff is going to be inside of a folder called server. So while everything is getting setup, let's go ahead and create that. And then our @vue/cli is going to create our client folder. And while we're here, let's just go ahead and let's create a new file. We will call this main.js. This is going to be inside of our server. And this is going to be basically what's going to set our server application. So we need several things here. We need express, so let's require that. We could use Babble to transpile ES6 into traditional JavaScript, but this is going to be just fine. I don't have to use the import keyword. We also need body-parser, and we will require body-parser. There are several things here. We also need a mongoose because we're going to set up mongoose here as well. So we want to bring that in. And we are also going to pull in the cors library, so we'll have that, and we will use that use that middleware. And we are also going to define a config file. So let's go ahead and create that as well. Because there are some important things that we want to store within our config. So for the time being, lets just say module.exports. And then we will just have an object here. We will have a couple of properties. One is going to be our MongoDB connection string. And we'll just go ahead and pull that in as well, so that we will require that. And then we can write the code to set this up. Although what we're going to do is export this. And we're going to have just a method called start. and this is where we're going to create our application. So we will create our application by calling the express function. We'll go ahead and setup our mongoose connection here. So we're going to use our config, we'll have a property called connectionString. And there's also the useNewUrlParser option that we will set to true. And that is going to set up Mongoose for us. We want to set up some of our middle layers, so one of those is going to be bodyParser.json(). Because practically everything that is going to be sent from the client is going to be in JSON format. We also want to go ahead and use cors as well, so that we can have some cross-origin requests. And let's see, as far as routes, we haven't gotten that far yet, but we do need to go ahead and listen here. So let's listen on port 4000. And let's also write something to the console so that we know that our application is up and running. And so we will say that we are listening at, and then we will have our URL. So localhost:4000. And yeah, that's a good starting point. So that outside of our server, at the root of our project, we're going to have our app.js. And what we're going to do here is pull in our application from our little main module that we wrote. So this is inside of server, and then main, and then we will just say app.start, there we go. And let's see, what else? I think that's it as far as that is concerned. We do to actually put something inside of our config, so let's do that. Now, our connection string, we can get from the Atlas. If you go to Connect and then Connect Your Application, and then click on the Standard connection string, it's going to have your connection string that you will then want to use. And this doesn't put your password in, you have to paste that in. But there are some things though that you will probably want to change, so let's copy that. And this is rather long. So let's first of all do connectionString. And then we will paste that in. And so the first thing you wanna do is, of course, change where it says password, and you want to put in the password. Now this is not the password that you use to connect to the Atlas platform. This is the password that you created whenever you created your database user and password. So you will want to replace that. There's also, do a search for test, this is the name of the database. And I'm going to change that to portfolio. And I think that is the only instance of that, yes that is. So those are the two things, do a search for test, and replace it with whatever you want that database name to be, and then change out that password here. Now the other thing that we need is a secret value, something that we are going to use whenever we create our tokens for authentication. So this can be whatever you want. I am going to use a string called penguins can't fly. I figured that's random enough. And it probably would be better to have a few other words, but that's going to be fine. Feel free to use whatever you want to use here. It really doesn't matter. But this will come into play anytime that we authenticate our user and then we need to supply a token to the client so that we can authenticate our requests from the client. So with those two things done, then we are pretty much done with our config and we can close it. Now if you haven't already, from the command line, and let's go to the one for the server, there it is. If you don't already have it installed, npm install -g nodemon, so that it will monitor all of the changes, and you don't have to constantly stop and restart your application. I already have this done. So if we say nodemon, now, then hopefully we don't get any errors. We don't, we are listening. And you know what? Let's do this, so we can at least see if this is going to work. So after we use the bodyParser and cors, let's do a get. And it really doesn't matter what we do here, we just want a response. So let's just have a string that is going to be sent, that says, hello world. That way, we can at least see something in the browser. Now, we're not going to really be using the browser for interacting with our server application. There are a couple of endpoints that we will have, as far as setting up an admin user. But other than that, everything is going to be through the RESTful API. So we can at least see that our application's working, that's good. As far as our client is concerned, we do need to create our client application. And we do that with vue create, and we're going to call it client. And this is going to give us several options to choose from. So if we want to choose the defaults, then we can go that route. I'm going to manually select the features, primarily because I don't want to use a linter. Yeah, that's bad. But the default settings for, I just don't like. So I'm just going to turn that off. We do want the router, and that's it. So Babel and the router. Use history mode, yes. Use dedicated config files, yes. Save as the preset for future projects, no. Okay, so that is going to then create our client, which is going to have most everything that we need. There are some things that we are going to have to install, which when this is done, we will do. In fact, through the magic of editing we are already here, because this can be a lengthy install. So first of all, you can see what our instructions are, cd in the client, run serve and all that stuff. We do want to cd into client because the things that we are going to install here are for the client and not for the server. And what we want to do then is install axios for our http stuff. We're also going to use bootstrap and jquery and popper.js. And of course, we're going to save those things. Everything else should be there for us. In fact, there's just three other things. If we go and look at our client folder now, there is, yes, the cli-plugin-babble, the cli-service, and then the vue-template-compiler. Although there is vue and vue-router, as far as our dependencies are concerned. Now, while everything else is getting installed, I do want to create a config file here. And one of the wonderful things about Vue CLI is that it does understand .env files. So we can create a new file called .env, and then we can create one for different environments. So since this is for development, I'm going to say .env.development. And what I want to do is create a value for the apiURL that we are going to be interacting with. This is for axios so that we can use this as a base. And that whenever we deploy our application elsewhere, then we can have whatever URL for our production environment inside of another .env file. So in this case, our API is going to be living at localhost:4000/api. And that will get us going there, so let's hop on back to the command line. We want to run, npm run serve. That's going to compile everything and get the client-side up and running so that inside of the browser, we should see the boilerplate view application. So let's go over there. There it is. We are, of course, going to be changing everything, but at least it's up and running. So in the next lesson, we are going to, of course, build upon all of this setup, and we are going to start writing our models and creating our admin user.

Back to the top