Full-stack project scaffolding

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.

Scaffolding an API with Express and Mongoose

In this module, we'll take the first steps in building our backend API. We'll begin by setting up Express and 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.

We'll be using MongoDB, and getting familiar with the Mongoose ORM makes CRUD operations with Mongo a breeze.

Creating tested API routes

Now that our API is scaffolded, we'll get stuck into creating our API routes in the third module, including the main CRUD endpoints, like GET items, POST items etc.

In addition to creating the routes, we'll also be creating tests for the routes to ensure the requests to our API endpoints provide the correct HTTP responses and database state.

API authentication

In the fourth module, we'll authenticate API requests by passing JSON web tokens in our request header, allowing us to add user accounts and authentication routes like register, login, and logout etc.

We can then 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 create unit tests that can check our authentication tokens are working.

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.

The Vue Auth library integrates with our HTTP client in order to manage authentication tokens. This will allow users to log in and out in the frontend app and make authenticated requests to the API.

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

Forms & documentation

In module 6, we'll be using Vuetify to create elegant, testable authentication forms. We'll add validation using the Vuelidate library.

Finally, we'll add component documentation by autogenerating it with the Vuese library.

Full-stack app deployment

Now that we've completed our app, it's time to deploy it for production. In this module, we prepare our app for production. We'll then create a free Heroku app and deploy the API. Finally, we set up a process to automatically deploy our static assets to a CDN.

Frontend unit tests

We'll now get an introduction to frontend testing. We'll set up Jest as a test runner and create our first component tests using Vue Test Utils.

Once we're comfortable with the basics of component testing, we look at some other methods like "snapshot" tests and create unit tests for the Vuex store to ensure its integrity.

Automated browser testing

We've unit tested the frontend components and each API route. To be sure our app is stable, we need to implement E2E (end-to-end) testing. To do this, we'll use the Nightwatch JavaScript framework which automates browser actions allowing use to ensure our main use cases function perfectly.

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.

This will allow us to ensure the code changes we make will be blocked until unit and end-to-end tests are all passing.

Finally, we'll integrate Heroku into the pipeline so that if our tests pass, our code can get automatically pushed to Heroku.