3. Contents of the course

In this video, we're going to get an overview of the 11 or so modules of the course.

Before we do that, let's start with a few words about the prerequisites.

Prerequiste knowledge

This is not a beginners course and I'm going to presume you come with a bit of existing knowledge.

  • Firstly, you'll need be familiar with Vue.js version 2;
  • You'll should also understand Vue Router and the single-page application architecture;
  • You'll also need to be familiar with Vuex and the concepts of state management;
  • It probably goes with saying, but you'll need to know HTML, CSS, and all the basics of web development;
  • You'll need to be okay with ES2015 JavaScript syntax and APIs, and we will be using a few proposed JavaScript features like async/await;
  • I'll also assume you know the basics of Node.js;
  • And Git;
  • And finally you should know at least the very basics of Webpack.

Of course, I don't expect you to be an expert on all of these topics, but if you've never heard of any of the above terms, it's probably a good idea to learn about those before you continue.

So now - what are we going to be covering in this course?

Module 1 - Full-stack scaffolding with Vue CLI

Setting up a Vue project with best practices is pretty easy with Vue CLI. 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 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 with Vue CLI.

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 - Building an API with Node, Express & MongoDB

In the second module, we'll take the first steps in building our backend API.

The main tools we'll be using are the Express framework which we'll scaffold with the MVC structure.

We'll be using MongoDB for the database, as well as the Mongoose ORM which will makes setting up CRUD operations a breeze.

Finally, to help us develop the API before we've got a working client app, we'll be using the Postman API development environment.

Module 3 - API unit testing with Mocha

In the third module, we'll be unit testing our Express app, helping us to ensure the API is robust and stable.

We'll begin with an introduction to unit testing with Mocha and also to Supertest which we use to mock our server.

We'll then write tests for the API endpoints we created in the previous module, learning how to assert the API response and status, and also the database state.

Module 4 - API authentication with JSON web tokens

In module 4, we'll be creating a token-based authentication system for our API.

We'll first learn about JSON web tokens and how to generate and store them using Node.js.

We'll then see how to authenticate an API request by attaching a valid JSON web token.

We'll also create some additional API endpoints for registering, logging in, and logging out a user.

Finally we'll protect our resources based on user roles, for example only allowing admin users to edit items.

Module 5 - Frontend CRUD with Vuex ORM

In module 5, we'll be integrating a frontend Vue app into the stack. I'll provide the basic app structure so we can focus on learning how to implement CRUD operations in a Vue app.

The main tool we'll be using for this is Vuex ORM, which is a Vuex plugin that gives us a simple, object-oriented way of managing data in the frontend.

We'll then integrate Vuex ORM with Axios to allow us to query data from our API while keeping data in sync between the back and frontend parts of the app.

Module 6 - Frontend authentication with Vue Auth

In module 6, we'll implement authentication in the client app by using the Vue Auth plugin.

We'll firstly need to ensure our HTTP requests are set up to work with the token-based authentication system we've set up.

We'll also need to create the UI side of the user management system, by setting up forms for registering, logging in and out and so on.

Finally, we'll use Vue Auth to help us adapt the UI based on a user's role and authentication status. For example, we can stop users from accessing certain routes, or seeing certain data.

Module 7 - Automated browser testing with Nightwatch

With most of the app development now complete, we're going to be looking at testing in the following modules.

We'll begin in module 7 by implementing automated browser testing, also known as end-to-end testing.

To do this, we'll use the Nightwatch JavaScript framework which automates browser actions like clicking buttons, filling in forms, and so on.

We'll begin with an introduction to Nightwatch and its key features and concepts

We'll then write end-to-end tests for our app's main uses cases like logging in, adding an item to the cart, and so on.

We'll also learn how to make our tests run automatically through headless Chrome.

Module 8 - Frontend unit testing with Jest and Vue Test Utils

In module 8, we'll learn how to unit test our Vue client app. The key tools we'll use are Jest and Vue Test Utils.

We'll begin this module with an introduction to using Jest as a frontend test runner. Then, we'll create our first component unit tests using Vue Test Utils.

Next we'll learn the most important testing patterns for Vue unit tests and use these to write a frontend test suite.

On the way we'll also learn important testing concepts like mocks, stubs, and spies.

Module 9 - Continuous Deployment of a full-stack Vue app

In module 9, we'll be deploying our app using continuous deployment.

We'll begin with an introduction to GitLab CI, and see how it allows us to create a robust deployment pipeline.

We'll then configure GitLabCI to create a build of our app in a cloud-based virtual machine and automatically run our test.

Finally, we'll integrate Heroku into the pipeline so that if our tests pass, our code can get pushed to Heroku and the app will be updated.

Bonus course - Documentation

If you want to make it easy for developers to maintain your enterprise application, it's essential that you provide quality documentation.

So that's why I've added a mini bonus course to the end of Enterprise Vue that some of you will be undertaking.

Module 10 - API documentation with apiDoc

In the first module of the bonus course, which is the 10th module overall, we'll learn to document our backend API using a tool called apiDoc.

We're first learn to use doc blocks to document our API source code, indicating to developers the inputs and outputs of requests, the format of the data the can expect, and so on.

We can then configure apiDoc to generate a beautiful documentation site to present all this information.

Module 11 - Interactive components docs with Vue Styleguidist

In the final module, module 11, we'll be creating a component styleguide using Vue Styleguidist.

Similar to the API, we'll begin by documenting our component interfaces, including the props, events, methods and so on which we'll use to automatically generate a documentation site.

But we'll also see how to add live component previews to our docs, so our team can see exactly what our components are intended to look like.

That bring us to the end of the overview of the course material. So in the next video, we'll be setting up our environment ready to start coding!

Complete and Continue  
Discussion

4 comments