- Read Tutorial
- Watch Guide Video
Right now our sign up and login screen don't really do anything because it's just the UI, It's just half of front end, and what we want to do is kind of connected to our backend.
So we can either come to GitHub.com (link below) or we can just type it the terminal so you don't you need to come here. But basically, we want to run these.
Now I didn't mention it in this ReadMe file I built, but you want to make sure that you have MongoDB installed. Now you may or may not have this installed, but if you're going through the react Python course you probably do.
So basically what you want to do is you want to go to mongodb.com (link below) and click on "Get Mongo DB" and you want to select community server because that's free.
So I recommend you install it with homebrew so go into instructions for installing with homebrew, and if you're on Windows, download it and follow the instructions. I've already installed so I'm not going to do it. You're going to want to select OSX most likely, if you're using a Mac. You're going to want to install it with homebrew so hit 'Instructions for installing with Homebrew', and go through it. (link below)
It's probably going to take a second to get mongoDB installed, so pause the video, and once you have Mongo on your system come back and we'll go through the ReadMe.
So what I'm going to do is open up a terminal window, and I'm going to click on the clone button in GitHub and copy the link. Then I want to go back to the terminal, and ideally you'd want to put this in the same folder as your project, but it doesn't really matter where you place it as long as you have it up and running.
So I'm going to put it next to the project, in the same folder with all my react apps and I'm going to put this link. Next, run git clone https://github.com/bottega-code-school/prop-management-server.git. It's going to say 'cloning in prop Management Server' and that's going to give us our server.
Now. switch into the folder, and what you're going to want to do is run through these commands. So the first thing we want to do after entering the folder is run npm install, which will install our require dependencies.
This includes things like BCrypt, to encrypt passwords, it includes files to handle file uploads, because we're going to have to upload images on some of our pages, and a lot of other stuff that is not React or Python, since it's a Javascript backend. It's not really important for us to know right now, but you can mess around it in if you want to, later.
Let's just clear the screen, and Let's type in touch config.js. Now we're doing in this config.js is providing a secret. Now it's for JSON Web token, so we can validate requests and authenticate users. Now this secret has something to do with how that's all programmed in and how I put that together. But you don't need to know what that is to learn react at all. That's just for some back-end programming.
So touch basically creates a file, so if you type in ls you'll see it says config.js. What we want to do is open up visual studio code, and again this isn't our React project. This is the server file we just installed, I just wanted to be crystal clear about this.
We want to open config.js and basically paste in the code from the ReadMe.
config.js
module.exports = {
secret: 'put-a-random-set-of-characters-in-here-instead-of-this-sentence'
}
I recommend just putting a random set of characters and numbers. Now we're all set up. You can feel free to mess around here and look at the endpoints and or how that works, but I'm not going to do that. I want to close out the code and I'm going to go back to my terminal and I'm going to run npm run dev.
We need hit tab to open up a separate terminal window and start up our mongo database. Run mongod, then run mongo.
If we try and perform sign in, sign out, and all these requests on our endpoints, nothing's going to work in the database it's not going to save anything and we're going to get errors. That's because we want Mongo running on our system. So it's very likely that a good portion of you are going to have at least a few hiccups in this process because Mongo is annoying, but we want to make sure this is running.
After you've done that, it's going to basically give us direct access to our database. Okay. So the way I've set it up it should all be hooked up on the server. Now what we can do is access it. So in the project here, I'll pull it up in VS code to show you, basically I have it running on 'mongodb://localhost/PROP_DEV' which stores the database or local database.
Now, let's go back to where you ran mongo, You can say use PROP_DEV and it's going as a switch to db PROP_DEV. basically you're going to have access to a few different models, and one of those is going to be users. So if I type db.users.count() it'll show that I have one user.Then you can type db.users.find() it will list all of your objects we'll see that I have one user object. Now yours is obviously going to be empty.
Now you'll see that each user has an ID, a fullName, a unit, an email, and a password. And as you can see, the password's encrypted. The password for this account is actually just password, but using BCrypt we've encrypted the password and it keeps it pretty secure. You can also see that we have this admin property that will tell us if a user is an admin or not, since we're going to implement permissions once we're done with all these features.
Now, I want this video purely to be on getting this server running because it's most likely going to be breaking for a few of you, just because of how it works to install things on your system, specifically Mongo, but once you get it running you should be able to basically have access to your PROP_DEV here in the terminal and will be referring to this as we go throughout the rest of this React course.
I'll see you in the next video.