4. Contents of the course
In this video, we're going to get an overview of the contents of the course, starting with a few words about the prerequisites and then a brief overview of the 10 modules of the course.
Now this is not a beginners course as I'm sure you can tell, so I'm going to presume you come with a bit of existing knowledge.
- Obviously you need to know Vue.js;
- You'll should also understand the single-page application architecture, which includes Vue Router;
- You'll also need to be familiar with the Vuex and the concepts of state management;
- It probably goes with saying, but you'll need to know HTML, CSS, and really all the fundamentals of web development;
- I'll also assume you know the basics of Node.js;
- And Git;
- And finally you should know the basics of Webpack.
If you're missing knowledge of any of these topics, it's probably a good idea to pause your progress on this course and then brush up on whatever it is before continue.
Alright, let's now take a look at the modules of this course.
Module 1 - Full-stack project scaffolding
Setting up a Vue project with best practices is pretty easy with Vue CLI 3. However, it becomes a little trickier if you're going to set up a full-stack app where the codebase is split between client and server.
In the first module, we'll look at how to modify a Vue CLI 3 project scaffold to accomodate a full-stack app configuration.
This will involve modification of the Webpack config and package scripts that are provided out of the box.
We'll also be configuring our full-stack development tools, for example we'll be installing a package to help us seamlessly run our API server and the Webpack dev server simultaneously.
Module 2 - Scaffolding an API with Express and Mongoose
In the second module, we'll take the first steps in building our backend API.
We'll begin by setting up Express, which is a micro framework that is perfect for creating APIs.
We'll also scaffold the API using the MVC structure.
To help us develop the API before we build the client app to consume it, we'll be using the Postman API development environment. In this module, we'll do a brief introduction and setup of Postman.
Since our API will need to persist data, we'll be using MongoDB, which is a non-relational database and is great for loosely structured data like that of PrintBay.
In this module, we'll getting familiar with the Mongoose ORM which abstract Mongo DB to make CRUD operations a breeze.
Module 3 - Creating and testing API routes
Now that our API is scaffolded, we'll get stuck into creating our API routes in the third module.
We'll begin by creating our main CRUD endpoints, like GET items, POST items etc.
We'll then set up a database seed to load in our sample data and make development easier.
In addition to creating the routes, we'll also be creating tests for the routes. This module will introduce you to unit testing with Mocha and using Supertest to mock our HTTP server.
Module 4 - API authentication
In the fourth module, we'll look at how to authenticate API requests by passing JSON web tokens in our request header.
With this ability, we can now add user accounts to our API, as well as authentication routes allowing users to register, login and logout etc.
We can then protect certain endpoints, requiring users to login before they are allowed to create or modify items, for example.
To finish this module and our work on the API, we'll create unit tests that can check our authentication tokens are working.
Module 5 - Frontend authentication with Vue Auth
With our authenticated API now up and running, we're now going to return to the frontend app in module 5, and apply frontend authentication.
We'll be using Vue Auth, which is an authentication library for Vue.js.
Vue Auth integrates with our HTTP client in order to manage authentication tokens. This will allow to login and logout in the frontend app and make authenticated requests to the API.
We'll then set up user roles with Vue Auth, allowing us to have regular users and admin users using the same client app.
We can protect routes based on those roles, for example preventing a logged out user from accessing the shopping cart.
Finally, Vue Auth provides reactive global variables that will allow us to adapt the UI based on a user's role and authentication status. For example, we change a button's text based on whether a user was logged in or not.
Module 6 - Form validation with Vuetify and Vuelidate
Now I don't know about you, but no matter how simple and elegant my code is with Vue, it still becomes a mess when creating forms.
So in module 6 we'll be using Vuetify and Vuelidate to create elegant, testable authentication forms.
We'll then setup validation based on what the user types into the form,
And then, we'll validate based on the response recevied the server.
And with that done, we'll have completed the main development work on our app.
Module 7 - Full-stack app deployment
With the app now working, we're ready to deploy it for production.
In this relatively short module, we'll create a free Heroku app and deploy the Node API using Git.
We'll then set up a process to automatically deploy our static assets to a CDN.
Module 8 - Frontend unit tests
In the API section of the course, we write tests for our endpoints, helping us to ensure the API is robust and stable.
But what about our client app? Well, in module 8, we'll get an introduction to testing with Jest as a frontend test runner.
And then, we'll create our first component unit tests using Vue Test Utils.
Next look at some other methods of testing like "snapshot" tests,
And we'll also create unit tests for our Vuex store.
Module 9 - Automated browser testing
We've unit tested the frontend components and each API route by the time we get to module 9. But can we be sure that users can really use our app without any problems?
To provide an additional level of certainty, we'll implement end-toend testing.
We'll begin with an introduction to Nightwatch and its key features and concepts
Then we'll set up our pages and UI elements as Nightwatch objects.
With this done we can create tests for our main use cases and have them run automatically through Chrome.
Module 10 - Continous integration/Continuous deployment
In the final module of the course we'll be setting up a continuous integration and continuous deployment pipeline with Circle CI.
We'll begin an introduction to this platform, and see how it allows us to ensure the code changes we make will be blocked until unit and end-to-end tests are all passing.
We'll then configure CircleCI to create a builld of our app in a cloud-based virtual machine. Once the build completes, our automated testing will run.
Finally, we'll integrate Heroku into the pipeline so that if our tests pass, our code can get pushed to Heroku and the product will be updated updated.
That bring us to the end of the overview of the course material. In the next video, we'll be setting up our environment ready to start coding!