Full-stack Vue project scaffolding (29 mins)

Setting up a Vue project with best practices is pretty easy with Vue CLI 3. 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 accommodate a full-stack app configuration, including Webpack config and environment variables.

We'll also configure our full-stack development tools allowing us seamlessly run our API server and the Webpack dev server simultaneously.

Express API and database scaffolding (47 mins)

In this module, we'll take the first steps in building a robust backend API with Node, Express, and the MVC structure. We'll be using MongoDB as a database, and Mongoose ORM to make our main CRUD operations a breeze.

To help us develop the API before we build the client app to consume it, we'll be using the Postman API development environment.

Building and testing an Express API (59 mins)

Now that our API has been scaffolded, we can complete the main endpoints like GET /items, POST /items, etc.

In addition to creating the routes and controllers, we'll also be creating robust unit tests using the Mocha test framework to ensure requests to our API provide the correct HTTP responses and database state.

API security with JSON web tokens (1 hr 59 mins)

In the fourth module, we'll authenticate API requests using JSON web tokens (JWT) and use our security measures like hashing user passwords to keep our data safe.

We can use our authentication system to protect certain endpoints, requiring users to log in before they are allowed to create or modify items, for example.

To finish this module and our work on the API, we'll also be creating unit tests that can check our authentication tokens are working.

Scalable application state with Vuex ORM (1 hr 14 mins)

In this module, we'll be integrating Vuex ORM into our Vue app, giving us a simple, object-oriented way of managing our app data in the frontend.

Vuex ORM integrates with our HTTP client to allow us to query data from our API. It then allows us to treat this data within Vuex as models, e.g. Items, Users, etc, making our data seamless and scalable.

Frontend authentication with Vue Auth (1 hr 16 mins)

Now that we have an authenticated API on the backend, we need to give users access by adding authentication to our client app.

In this module, we'll use the Vue Auth library to integrate with our HTTP client and manage the login and registration actions and the auth tokens, as well as reactively update the UI based on the user's auth status.

We'll then set up user roles and protected routes with Vue Auth, allowing us to have guest users, regular users, and admin users all using the same client app.

Full-stack app documentation (1 hr 21 mins)

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

To document our backend API, we're going to use a tool called apiDoc. This tool will read the doc blocks from the source code to generate a beautiful documentation site.

For our frontend code, we'll create a component styleguide using Vue Styleguidist which not only provides documentation but also live, interactive component previews.

Automated (end-to-end) browser testing (1 hr 33 mins)

While unit testing allows us to see if individual functions or components are working as we want, automated browser tests, commonly called "end-to-end testing", tells us if the whole application is working as we want.

To perform this type of testing, we'll use an E2E framework called Nightwatch.js to instruct a headless Chrome browser to interact with our application like a real human user would, by clicking buttons, filling out forms, etc, and then making assertions about the page state.

Frontend unit testing with Jest and Vue Test Utils (1 hr 33 mins)

In module 9, we'll be unit testing our Vue.js app components. We'll be using Jest, which is a test framework for JavaScript, and Vue Test Utils which allows us to mount and render Vue components in isolation from a complete Vue app.

Along the way, we'll learn how to design effective component unit tests using key patterns like mocks, stubs, and spies, and a special component testing method called "snapshot testing" that can be used to ensure the rendered markup of a component is stable.

Continuous Deployment of a full-stack Vue app (1hr 2 mins)

In the final module of the course, we'll be setting up Continuous Deployment as a best-practice workflow for deploying code to a Heroku production environment.

The advantage of using continuous deployment is that it ensures the app is deployed easily and minimizes deployment errors by bundling all the steps of deployment into a script and automatically running tests.