2.2 Backend Application Setup

Hi. In this episode we'll see up rails application and then connect angular application with rails via proxy. So every request angular application does to API address is redirected to rails application. Okay. So first, of course, you need ruby installed. So I have ruby 2.1 installed and you can install it via RBM, 4BM or any other. Ruby version manager you use. And also we need of course to install rails, so we do it with gem install rails. And I've already installed it, and I have rails version 4.0.2. Okay, so now we're ready to create rails application, and we do it with rails new. And we call it sw-backend. And we're gonna skip test, because we will use our spec. Okay. And so that's pretty much all we need to do for now. But we need to send requests from Angular application to this application, without the need to specify full web address. Like, local host 3,000. What we want is to send request to API/something. So to demonstrate is, so is first, I go to this sw-backend application. And I'm gonna just run rails server. And I'm gonna open new tab here. And I'm going to tuts/sw-front. And I'm gonna run grunt serve. Okay it works, so now in text editor, let's go to tuts, and to our front location. And I want to open an app/scripts/controllers main controller. Right here. I will make ajax request, so I will make something like this. Resource to api for example edges and then I want to query it. So I do it only to demonstrate you how we make request and where we wanted to end up. So of course we need to inject resource right here. So what we're doing here is just specifying resource. To point to /api/edges, and then we query it. So we want this api. So every time when we have requests to api something. This particular request, redirected to rails application. So if we now go to browser, and open console here. You will see that we have this request and we cannot GET /api/edges because we making this request right here at the local host 9000 instead of rails application. Okay to achieve it we are gonna use connect proxy package, and here it is grunt-connect-proxy. So as we saw in previous episode when we want to have some development dependencies we go to package.json. So let's open package.jason file. And somewhere here, it doesn't matter where, let's add grunt-connect-proxy. And we take the latest version. Let's save it. Now we got to terminal and right here to install it we do npm install and hit enter. And that will. Download and install grand-connect-proxy. Excellent. So first, we need to configure proxies, and you can get all instructions from this page on the github. So as you can see here, we need to configure proxies, and let's do it right now. So we go to our editor, and go to grunt file, and here where we connect. We define proxies array and inside of it a proxy object. And first we want to define context and our context is every request to api. Then when we have this context we want to redirect it to local host and port. Is 3,000 so that's where our rails application is. So next we need to add middleware for livereloading, and if we go to get app page and scroll down you see here with livereload we an options, this middleware method. So let's just. Copy and paste it in here. Under options you paste this middleware and let's save it. So the last then is to run configure proxy task. So let's go to the bottom of this file. And here where we have this registerTask('serve' we have. Task.run, and right here before we connect in to leave reload, let's add configureProxies: server task like this. And also we can of course add it to. Our task. Okay, so let's save it and now let's try it out. I go back to terminal and I run grunt serve and I have an error in grunt file so let's have a look. It's right here. I forgot to add comma here. So let's try it again. And now if we open developer tools you can see that we have this, this same request. But if we click on it, you'll see that this request is actually going to rails application. And if you go to terminal to the first tab you see that exactly we, we have this request. How cool is that? Excellent. So now let's go back to our main js and remove this request completely from the controller. And also let's commit our changes for our sw-backend application. So for sw-backend application all we've done actually was created rails application. We haven't done anything with it yet. But still let's initialize git repository, add everything, and make our first initial commit. And in our front-end application, let's also make a commit Grunt connect proxy setup. Okay in this episode, we set up the connection between angular and rails applications via proxy. Now we are ready to develop our first feature, so thank you very much for your time and see you in the next episode.