Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.3 Starting the Angular and Express Apps

With both the front- and back-end apps started, you are going to need an easy way to launch them with automatic change detection and re-compilation. Luckily for us, we can take advantage of a built-in tool for Angular to do this. We'll also install one to do the same for the Express back-end.

1.Introduction
2 lessons, 07:21

1.1
Introduction
01:02

1.2
Prerequisites
06:19

2.Getting Started
3 lessons, 30:48

2.1
Creating the App Structure
11:46

2.2
Creating the Server-Side Entry Point
10:14

2.3
Starting the Angular and Express Apps
08:48

3.Setting Up the Mongo Database
4 lessons, 27:53

3.1
Getting MongoDB Up and Running
06:08

3.2
Connecting to MongoDB
06:47

3.3
Creating the Database Schema
07:49

3.4
Creating a Simple Data Access Layer
07:09

4.Creating an API With Express
6 lessons, 29:16

4.1
Handling Requests in Express
09:57

4.2
Taking Advantage of the Express Router
05:52

4.3
Adding the `GET` Handler to the API
05:34

4.4
Adding the `POST` Handler to the API
03:18

4.5
Adding the `PUT` Handler to the API
02:17

4.6
Adding the `DELETE` Handler to the API
02:18

5.Building the Front-End Angular App
6 lessons, 45:52

5.1
Creating the Front-End Models
06:57

5.2
Creating an Angular Service
07:31

5.3
Making HTTP Requests From the Service
08:33

5.4
Setting Up the User Interface
09:05

5.5
Creating All the Components
05:28

5.6
Adding Routing to the App
08:18

6.Creating the App Components
12 lessons, 1:00:02

6.1
Adding the View Lawn Markup
05:55

6.2
Adding the View Lawn Code
06:51

6.3
Adding the Add Lawn Markup
04:34

6.4
Adding the Add Lawn Code
07:41

6.5
Adding the Edit Lawn Markup
03:06

6.6
Adding the Edit Lawn Code
04:11

6.7
Adding the View Application Markup
02:54

6.8
Adding the View Application Code
07:46

6.9
Adding the Add Application Markup
02:16

6.10
Adding the Add Application Code
04:49

6.11
Adding the Edit Application Markup
04:20

6.12
Adding the Edit Application Code
05:39

7.Conclusion
1 lesson, 03:18

7.1
Conclusion
03:18


2.3 Starting the Angular and Express Apps

Now we're at a point where we have our basic server side code, at least written so we can get something up and running. And we also have a little bit of boiler plate Angular code that's already written as well, even though we haven't really done much with it yet, it is there. So now I wanna start talking to you a little bit about how we're actually gonna start running our application. So we can start to interact with it and debug it and all sorts of things like that. So right now, as I mentioned before, in the package.json file, we do have this script section. As you can see here, typically what you're gonna do if you wanna start interacting with at least your Angular application. Because this is how this was all built using the Angular CLI is you're going to typically use NG serve. Now NG serve is a very cool way to run your application when you're initially starting to debug it. Because what it will do is it will build your Angular project. It will start to serve your Angular project, and then it will also sit there and watch for any changes that happen. And if it detects that whether there were changes to any of the files that make up your Angular application, it will rebuild it and reserve it. So that you are always getting the latest and greatest. So you can run this directly if you want or as you see here, we have a script known as start and the way we run any of these scripts is simply by running npm start. So let's go ahead and check that out. So if I were to come to my command line and I would run npm start, you're gonna see that it's actually running ng serve, which is what's associated with that start script. So that's fine. So then basically what I said this is going to do is it's going to build my application, it's going to show what's going on here. And if I were to just kinda come in here behind the scenes so you could actually see this happening live. If I were to come into one of my projects here, one of my Angular files here. And let's just say I made a change. So let's say I added a space in here, or whatever that change was. If I were to save this, you're gonna see that it noticed that there was a change to a file, and it's going to recompile my Angular application and then serve it up again. And as you can see, I could remove that addition there and it's gonna go ahead and do it again for me. So this is really nice at least from an Angular perspective, but the problem we're gonna run into is that we have not just an Angular application, but we also have express in here too. And all we're really accommodating in this particular way is the Angular part of the world. But how do we get the Express application up and running, so we can do something similar. We can go ahead and we can create or we can start that application using the command line. Now what we've done so far is we've created this server.js file and they way if we were on it to start that, we would say node server.js and what that's gonna to do is it's going to start up that file. As kind of the entry point to our application and if you recall the last thing that we did once it started listening on port 3000 was to output started server on port 3000. So we see that, so that's now up and running but this is gonna pose problems, a number of problems. First of all, we're gonna have to run two separate commands to get our Angular application up and running. And our back end Express application up and running, so we're gonna constantly have to be juggling that. Then if I make changes to my Angular application, it's gonna recompile on its own because it's watching with ng serve, but on the Express side, it's not doing that. So every time I make changes to anything, anything in my Express application, whether it's in server.js. Or any of the supporting files that I might be bringing in. It's not gonna pick that up, so I'm gonna have to stop the server with control C and that's how you do it and then rerun that nodeserver.js. And that's a really big pain. So what I wanna do now is I wanna show you a nifty little trick that we can do to augment our current application structure using the package.json file and one other third party library. So that we can run one command, we can spin up both the Angular and the Express applications at the same time and have both of them being watched. So that we can recompile and rerun those every time that changes are being made, and this is really gonna help us as we continue to develop this application. So what we're gonna want to do actually is we're gonna wanna bring in another third party library known as Nodemon. And that's what we're gonna be able to take advantage of to watch our node or Express application and recompile that from the server side every time we need it. So if you recall before, the way that we brought in these dependencies is using npm. So once again, we're gonna do an npm install and we're gonna install this globally, and this one is called nodemon. So we're gonna go out and download nodemon and installed globally within our development platform. And once this is done, what I can do now is I can know take advantage my package.json file and I can use nodemon to run my application instead of just nod. So nodemon is going to call node kind of compile and run our application, but it's also gonna monitor or watch the source files. Now I could do that directly from the command prompt, but we already have this package.json file and I kind of wanna take advantage of it. So there's a small chance that I'm gonna have to make to the package.json file, so that is able to kind of all work together. So what I'm gonna do is I'm going to begin by coming up to the top, as you see we have name lawncare version, and you can change the version if you want. I'm just gonna leave it at zero. Another configuration option that you can put in here is one called main. And what main allows you to do is define kind of what that entry point JavaScript file is, that's going to kinda be the main file of your application. And in our case, it's gonna be server.js. So I'm gonna specify the main file of my application being server.js. And now what I can also do is I can take advantage of nodemon. So nodemon does take in a parameter, I can use it just the same way that I used node previously. I could say nodemon server.js. But one of the nice features of nodemon is if you have a package.json file, just like we have here, and just say nodemon. It's going to look into the package.json file and it's going to use the main configuration as the input to it. So how do we kinda put all these stuff together. So I'm gonna come into my start script and we all ready have ng server here, and that's fine. And then I'm gonna use a single ampersand here, which is kind of, it's typically like a conditional and type thing. But in this case, it's going to take that as a way to combine and run at the same time multiple commands, so I wanna run g serve and I also want to run nodemon. So let's go ahead and save this. So now if I were to come back into my terminal and I were to run npm start, you're now gonna see a couple things happening here. So you see ng serve is running down here. So it's gonna compile the Angular application. But you also see that nodemon is running now and it's starting node server.js that command that we did before. But it's also watching the files that are in this directory. So now we have a couple of different things going on, we are running and serving our Angular application and watching the files. We're also running and serving our Express server side application and watching the files. And just to prove that, once again we're gonna do a little experiment here. So we'll come over here and let's go ahead and change one of these files again just like we did before for the Angular side. And if I change that and save, you're gonna see that I'm recompiled and I am getting the latest and greatest. But if I were to come into my server.js file and do the same thing and change this file and save it, you're gonna see nodemon has picked that up. And it's restarting due to changes, now we're rerunning our node.server.js or nodeserver.js file again. So now we're at a point where we can finally, with confidence, make changes to our Angular application as well as our back-end server application. And everything is being watched and updated accordingly. So every time I go into my web browser or I use some tool to send request to my back-end server to my API. I know that I'm always hitting the latest and greatest because I'm watching those files and getting all of the latest compiled versions when necessary.

Back to the top