Joe has been a web developer for the last 13 of his 16+ years as a professional developer. He has specialized in front end and middle tier development . Although his greatest love is writing code, he also enjoys teaching and speaking about code.
Deploying to Heroku Hello and welcome to the module on deploying your MEAN Stack applications to Heroku. In this module we are going to learn all about deploying our application to Heroku. We'll start by preparing our application for deployment by changing a few files and creating some new ones. Then we'll look at how to set up a MongoDB instance that will work when our application is running in the Cloud on Heroku. After that is done we'll actually deploy our application by pushing it to Heroku with Git. Once our application is up and running, we'll discuss how to troubleshoot application issues with Heroku. There will be two sections here, one on some general troubleshooting tips and one section devoted to troubleshooting and managing your SSH keys. As before, I'll be doing all of this on a Windows box, but following along in a Bash shell on a Linux or OSX box will be pretty straightforward and I'll make note of most of the differences between using these different operating systems. Heroku is a popular Cloud platform as a service. It supports many programming languages. Of course, for our needs we only care about Node. js. Heroku is extremely popular for Node applications since you can get some basic hosting for free and it will scale as you do. In addition, it supports many add-ons that can provide a lot of value to your application. In order to use Heroku for deployments, we'll need to do two things. First, create an account with Heroku. If you simply go to Heroku. com you will be prompted here to sign up for free. Second, you need to download and install the Heroku tool belt. That is available as a free download at toolbelt. heroku. com. Once you have downloaded and installed the toolbelt, be sure to close down and reopen your command shell and the Heroku command line interface will now be available for you to use. Now let's move on and get our application deployed to Heroku.
Designing the UI Hello, I'm Joe Eames. In this module we're going to design our UI. This may not seem like the most critical piece in a course on writing applications with the MEAN Stack, but there will be plenty to learn about placing HTML in the various files in use and organizing our Angular code. I will be showing the CSS changes that I need to make to get the design that I want. If you are very comfortable with the CSS, you may want to skip ahead a little during these parts. Now, let's look at the agenda. In this module, we will start by creating a common header and footer for our site. This will be just a little bit of HTML and CSS work. Then we'll design the content on the main page, giving us a more typical look for the main page of our site. And, finally, we'll hook up some sample data on the main page. This will give us a good start and template for the look and feel of the rest of our site.
Authentication Hello. I'm Joe Eames. In this module and the next one we are going to implement authentication and authorization for our MEAN application. Let's look at the agenda for the next two modules. Authentication is the means we use to make sure that a user is who they say they are, whereas, authorization is the process of restricting data and functionality to only those users who are allowed to access them. We'll begin our foray into the world of authentication and authorization by implementing login using Passport. Passport is a very common Node module for implementing authentication. Passport uses various different strategies for authentication and these involve anything from using a local username and password to using your Facebook account to log in. We will be implementing the local strategy, which uses a local username and password. Then, we'll make sure that our passwords are secure by encrypting them using a hashing algorithm. And finally, we'll implement authorization. Passport won't give us much help here, but implementing authorization on top of Passport is pretty straightforward. By the time we're done with this module, we'll be comfortable with typical authentication and authorization in a Node application.
Security and Authorization Hello, I'm Joe Eames. In this module, we are going to continue what we started in the last module by implementing some more security measures for our authentication and then implementing an authorization scheme.
Use Profile - Updating Data Hello. I'm Joe Eames. In this module we are going to create a profile page to let our users edit their name, username, and password. Now we are going to use an extremely streamlined implementation. The user experience is not really optimized and there are probably more features you would want to put into a production application, like making the user put in their password twice. Just keep in mind that we will illustrate the basics of updating information, but more comprehensive and detailed features are beyond the scope of this course. This module will be very straightforward. First, we'll put together the display for the profile page, then we'll write the client-side code, and finally, we'll write the server-side code. We'll make sure that only authorized users can make changes to data and we'll make sure that our code is organized for maintenance.
Course List - Sorting, Filtering and Caching Hello, I'm Joe Eames. In this module, we're going to create a Course List Page. This page will display the list of courses available on our site with the date that the course was published. Since we anticipate having hundreds and even thousands of courses, we want this list to be filterable and sortable so we'll add those abilities to our list. We'll also want to be efficient with this data, so we'll look at doing some caching by hand to avoid fetching the same data multiple times, unnecessarily. Let's look at the Agenda. First, we'll implement the Course List page. This page will display the list of courses from our library. Once that is in place, we'll implement Filtering and Sorting so that users can easily find the course that they are interested in. After the page is implemented, we'll switch the main page to get its data from the server as well and then we'll implement caching so that we only have retrieve the data once, for any view, and no matter how many times a page is visited.
Course Details - Selecting and Caching Single Entities Hello, I'm Joe Eames. In this module, we will create our Course Details page. This page will display information about a single course. The design won't be anything to write home about, but we'll do our best to at least keep the display neat and orderly. We only have a few pieces of information about courses to display, so the display will also be fairly small, but we'll also look at how to select these single entities and how to cache them effectively as well. Our Agenda will be straightforward. First, we'll implement the details page. We'll start with the display and the client side code and then we'll implement the server side code including selecting the data from the MongoDB database for the single course that we're looking at. We'll also make all the places on our site where we list courses, be a link that points to the details page for a course. Once that is in place, we'll figure out how to effectively cache the data and how that works in concert with caching the entire set of courses that we are already doing over on our Main page and Course list page.