Full Stack Isomorphic JavaScript with Vue.js & Node.js
3.9 (26 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
126 students enrolled

Full Stack Isomorphic JavaScript with Vue.js & Node.js

Learn to build isomorphic JavaScript web applications using MEVN Stack - MongoDB, Express, Vue.js, and Node.js
3.9 (26 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
126 students enrolled
Created by Packt Publishing
Last updated 5/2019
English
English [Auto]
Current price: $139.99 Original price: $199.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 5.5 hours on-demand video
  • 1 downloadable resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Build, test, and deploy web applications with Node .js, Express, Vue .js, and MongoDB
  • Create Single Page Applications using the Vue .JS command-line interface tool
  • Learn to manage application state with Vuex Library
  • Implement application routing with Vue .js Router
  • Create a songs playlist application using MEVN stack
  • Build a secure RESTful API with Express, including user authentication
  • Learn about the HTTP client Axios to consume REST APIs to get data
  • Deploy production-ready applications to the cloud
Course content
Expand all 64 lectures 05:32:46
+ Isomorphic JavaScript with MEVN Stack
35 lectures 02:52:35

This video provides an overview of the entire course.

Preview 01:20

Identify all prerequisites for the course.

  • Explain the need for HTML and CSS

  • Identify the need for knowledge in JavaScript and basic terminal usage

  • Present resources to assist in accomplishing prerequisites

What You Should Know First
00:57

Understand what a Single-Page Application is.

  • Define a Single-Page Application

  • List popular frameworks used to build SPAs

  • Explain the benefits of SPAs

Single-Page Applications and Vue.js
04:05

Define NoSQL and provide an explanation of MongoDB.

  • Provide an understanding of NoSQL in comparison to relational databases

  • List some popular companies utilizing NoSQL to emphasize its significance

  • Demonstrate the MongoDB querying syntax and document storage format

NoSQL and MongoDB
02:18

Understand the role of Node.js and Express.js in the MEVN Stack.

  • Explain the basics of Node.js and its purpose

  • Explain why Express.js is a popular framework for building web applications

  • Summarize how Node.js and Express.js work together in the MEVN stack

Node.js and Express.js
01:41

Install Node.js and NPM. Then, verify the installation in the Command-Line Interface (CLI).

  • Visit the Node.JS home page and download the latest stable release

  • Execute the CLI/terminal

  • Execute scripts to verify the installation of Node.js and NPM

Preview 01:09

Install the Vue.js CLI to generate Vue.js applications.

  • Visit the Vue.js CLI website and get NPM installation scripts

  • Execute Vue.js CLI installation scripts in CLI

  • Execute CLI scripts to verify proper installation of Vue.js CLI project generator

Installing Vue.js Command Line Interface (CLI) Project Generator
00:51

Provide clear and concise installation instructions for OS X and Windows.

  • Demonstrate the installation of MongoDB using Homebrew (OS X) / Download MongoDB MSI from the MongoDB home page (WIndows)

  • Create a MongoDB data directory for storage

  • Start Mongo Shell to ensure that the database was installed correctly

Installing MongoDB
03:45

Identify an effective IDE to use throughout project.

  • Discuss VS Code and provide general information about the IDE

  • Visit the Visual Studio Code home page and download Code Editor

  • Install and open Code Editor to verify the installation

Installing Integrated Development Environment (IDE)
00:53

Use the Vue.js CLI project generator to create a new Vue.js application.

  • Visit the Vue.js CLI home page to verify scaffolding scripts

  • Run project generator scripts to create a new project

  • Open a new project in Visual Studio Code to ensure that all files are in place

Create Vue.js Application
01:45

Understand a Vue.js CLI-generated project directory.

  • Use Visual Studio Code to access different sections of the application

  • Briefly explain the Vue.js application structure

  • Ensure that all sections of the project are highlighted and explained

Preview 02:44

Learn to create Vue.js Components.

  • Use pre-defined Vue.js components to understand syntax

  • Import components into other files and components

  • Create various components to be used in the application

Vue.js Components
14:56

Use the Vue.js router to create various sections in the application.

  • Access the Vue.js router configuration

  • Create main routes of the MEVN Stack application

  • Add further route configuration and active link indication

Vue.js Router
06:38

Protect routes in the Vue.js application.

  • Implement global route guards

  • Implement in-component route guards

  • Implement per-route route guards

Vue.js Navigation Guards
03:56

Create a centralized storage location for Vue.js application state.

  • Define Vuex and the purpose of state management

  • Add a centralized store

  • Dispatch store actions and manipulate state

Vuex State Management
10:20

Create a basic server with Express.js and Node.js.

  • Create a server using Node.js

  • Create a server using Express.js

  • Understand how a MEVN Stack server is created and operates

Create Server with Express.js
08:30

Create basic CRUD endpoints using the Express.js Router.

  • Add HTTP methods to Express.js Router

  • Evaluate an HTTP Request and Response

  • Verify implementation using Postman

Learn to Use Express.js Router
05:50

Implement needed middleware for client-to-server communication and data exchange.

  • Add Express.js json parser middleware

  • Add dev tools middleware

  • Enable CORS in development environment

Use Express.js Middleware and CORS Configuration
06:42

Create controller methods that can communicate with client.

  • Define functions for each API route

  • Connect routes to controller functions

  • Verify connection to client

RESTful Endpoints with HTTP Controllers
07:51

Utilize HTTP Status Codes for effective server-to-client communication.

  • Define some of the common HTTP Status Codes used in development

  • Return different HTTP Status Codes in REST Controllers

  • Verify status codes in Vue.js Client

Check HTTP Status Codes
03:17

Establish a database connection for Node.js application.

  • Install MongoDB object modeling tool, Mongoose, for Node.js

  • Add environment variables for database

  • Establish connection on server startup

Connect to MongoDB and Use MongoDB Compass GUI
02:40

Define main Mongoose Schemas for MEVN Stack Application.

  • Use mongoose to define entity schemas

  • Access schemas in REST Controllers

  • Implement schema validation and methods

Working with Entity Models
04:27

Use Mongoose.JS to define CRUD operations for a schema.

  • Create mongoose model object using request body

  • Add all necessary methods for task model management

  • Handle errors inside of callbacks

Create, Read, Update, and Delete (CRUD)
08:08

Protect user account with encrypted passwords.

  • Add encryption library to Node.js

  • Use Bcrypt to encrypt passwords

  • Verify password encryption in MongoDB

Encrypt Passwords with Node.js and BCrypt
02:55

Use BCrypt package to validate a user’s password.

  • Add statics to User Schema

  • Validate user password in login request

  • Confirm password encryption and validation in Vue.js Login and Register

Validate Passwords
08:39

Generate JSON Web tokens for Authorization.

  • Install JWT Library for Node.js

  • Encode a JWT with user’s data

  • Return a JWT in authentication controller

JSON Web Tokens
03:12

Receive JWT in Vue.js Application and store in web browser.

  • Use developer tools to verify HTTP response body

  • Verify receipt of JWT in Vue.js

  • Store JWT in browser local storage

Vue.js and JSON Web Tokens
01:18

Complete User Authentication process using Vue.js Directives and functions.

  • Dispatch authenticate to Vuex for User Logout

  • Use v-if directive to protect navigation links

  • Verify successful login and state action

User Authentication
03:06

Use JWT to validate a user’s session in Node.js.

  • Add middleware function to intercept HTTP Request

  • Access headers in Express.js HTTP Request

  • Verify a JWT using application secret key

Validating a User’s Session
03:54

Use JWT to access user’s data in session.

  • Decode JWT token from HTTP Request

  • Read user data from JWT and create utility functions

  • Save user’s data in controller methods

Managing User's Session
03:15

Finalize structure of Vue.js app and remaining components.

  • Build create-tasks form and edit-tasks form

  • Create Task service for handling tasks in application

  • Verify all CRUD operations for tasks are working properly

Connecting Vue.js to Backend Server
25:32

Prepare a production-ready MEVN Stack application.

  • Connect to a production database

  • Add a production NPM script

  • Build and run application in production mode

Getting Ready for Production
03:19

Define a cloud platform to host and run MEVN Stack application.

  • Discuss benefits and capabilities of AWS

  • Define different deployment options for Node.js applications

  • Create an AWS account and deploy a Ubuntu Server

Amazon Web Services and Amazon Elastic Compute Cloud
03:48

Run MEVN Stack application on Ubuntu Server.

  • Install Node.js and other needed tools on EC2 Instance

  • Add application to Virtual Instance, install dependencies, and execute production start script

  • Use tool to run Node.js Server without interruption

Deploying App to the Web
05:05

Provide final thoughts on course and any related topics.

  • Determine the road ahead for developers

  • Define real-world ideas to make application grow

  • Provide closing thoughts and advice

Final Thoughts
03:49
Test Your Knowledge
5 questions
+ Full Stack Web Development with Vue.js and Node.js
29 lectures 02:40:11

This video provides an overview of the entire course.

Preview 03:32

The aim of the video is to get familiar with Vue with some basic introduction.

  • Introduce Vue

  • Get familiar with Vue.js documentation

  • Introduce Express.js

First Step Towards Vue
02:40

The aim of the video is to learn how we can set up a Vue project quickly as a beginner.

  • Install Node and NPM

  • Setup Vue.js quickly with CDN

  • Setup Vue.js quickly with NPM

Setting Up Vue Using Node.js
04:54

The aim of the video is to get started with coding in Vue.js by trying out some basic example that helps us get better understanding of Vue.js basics syntax and learning the Directives, reactivity and two way bindings.

  • Understand Vue basics

  • Get familiar with Vue Directives

  • Understand the Vue reactivity.

Basics, Directives, and Reactivity
06:52

When working with any JavaScript framework developers are also in need of a good debugger, which is where Vue Devtools kicks in and saves the day.

  • Install Devtools browser extension

  • Load a Vue project in your browser to enable Vue Devtools in your browser

  • Learn how to explore components, Vuex and Events inside the Vue Devtools.

Vue DevTools
05:34

The aim of the video is to understand how we can use CLI to install Vue and then create a new project with it.

  • Install NodeJS and NPM

  • Install Vue using CLI

  • Create Vue project from the command line

Preview 03:53

The aim of the video is get familiar with the project directory structure and purpose of each directory/file. Also we get a better understanding of the single-file components.

  • Get familiar with the structure of the Vue project that we created with CLI

  • Learn purpose of each directory

  • Get familiar with Single file components.

Tour of Project Files and What Are Single-File Components?
04:12

The aim of the video is to learn and understand how to install Axios in Vue project and how we can utilize its syntax to consume APIs.

  • Learn what Axios is

  • Install Axios

  • Utilize a third-party API using Axios

Using Axios to Consume a Third-Party API
05:54

Learn how can we create our own custom components and embed them in new or existing projects by importing them.

  • Create new components

  • Learn how can we import custom components

  • Learn how we can embed new components within an existing project

Creating Custom Components and Importing Them
05:22

The aim of the video is to get familiar with Vuex and Vue-router and how to import/utilize them in your Vue project.

  • Install Vuex

  • Install Vue-router

  • Import Vuex and Vue-router into your Vue project

Installing Vuex and vue-router and Adding Them to the Vue Instance
04:01

The aim of the video is to learn about Vue core concepts and get hands-on experience by implementing them.

  • Introduce Vuex

  • Installing Vuex and setting up new project

  • Learning how Vuex core concept “State” works

Vue Core Concepts and How to Implement – Part 1
06:04

The aim of the video is to learn about Vue core concepts and get hands-on experience by implementing them.

  • Learn how Vuex core concept “Getters” works

  • Learn how Vuex core concept “Mutations” works

  • Learn how Vuex core concepts “Actions” and “Modules” works

Vue Core Concepts and How to Implement – Part 2
05:29

The aim of the video is to install and learn about Vue router and router links.

  • Introduce Vue Router and Install Vue-router

  • Import Vue-router and create a new Vue-router instance in your Vue project

  • Create router links

How to Use vue-router and Router Links
06:45

The aim of this video is to create our project’s frontend by creating a new Vue project and using Vuetify framework to design pages.

  • Create a new Vue Project

  • Install Vuetify framework

  • Create routes and designing Header component using Vuetify framework

Application Structure – Part 1
06:32

The aim of this video is to create our project’s frontend by creating a new Vue project and use Vuetify framework to design pages.

  • Create/Design a login page.

  • Create/Design a signup page.

  • Create and design a Playlist dashboard

Application Structure – Part 2
02:33

The aim of the video is to get familiar with Express.js and how to create an express server with an endpoint.

  • Introduce Express.js

  • Install Express server

  • Setup express server on port 3000 and create a register endpoint/API

Putting Together the Sample API Code and Adding to the Frontend Application
08:42

The aim of the video is to learn how you can install and connect to a database on your express server using Sequelize.

  • Introduce Sequelize

  • Install Sequelize and sqlite3

  • Set up a database connection

How to Set Up the Database
05:53

Get familiar with REST client, which plays a vital role when creating server endpoints and debugging them.

  • Introduce REST

  • Introduce REST client POSTMAN

  • Create endpoints and hitting it with POSTMAN

Demonstration of API in REST Client
04:08

The aim of the video is to create an API which will store a new user on register endpoint and in response will generate a JWT Token.

  • Create an Authentication controller

  • Install jsonwebtoken and generate a JWT token

  • Create a User model and insert new user into database

Creating an Account and Then Authenticating /Getting a Token – Part 1
05:30

The aim of the video is to create an API which will store a new user on register endpoint and in response will generate a JWT Token.

  • Create an Authentication Controller Policy for Email and password validation using a “Joi” framework

  • Use POSTMAN for testing or Validating error messages

  • Hit the register endpoint from front end Signup Vue component and display the validation errors

Creating an Account and Then Authenticating /Getting a Token – Part 2
05:18

The aim of this video is to create a login endpoint on our express server and validate the data that is sent from the frontend.

  • Create login service endpoint on the express server

  • Modify the login Vue component to hit the login endpoint and send email and password and show validation errors

  • Create a login controller on the express server and validate the user credentials from the database and send an appropriate response

Setup Login Page, Functionality and Adding the User – Part 1
05:05

The aim of this video is to create a Vuex store and allow the user to login from the front end using the login form utilizing backend API to verify credentials and inject user information into the Vuex store.

  • Use a REST client to validate our login API

  • Install Vuex Library into the project

  • Create a store and add user credentials and the received token into the store state

Setup Login Page, Functionality and Adding the User – Part 1
04:28

The aim of this video is to demonstrate how we can create a new song entry and save it in our database.

  • Create an add new song component and export song data

  • Create Add song route in Vue

  • Create add song endpoint on the express server that will save the song information that is received from the front-end into the database

Using the API to Create, Read, Update, and Delete Items – Part 1
08:13

The aim of this video is to demonstrate how we can fetch all the data from our database and display it on the front-end.

  • Create a song service that will send a request to fetch all the songs from the database

  • Create get songs endpoint on the express server to fetch all the songs

  • Create songs component and list all the songs received from the express server

Using the API to Create, Read, Update, and Delete Items – Part 2
05:05

The aim of this video is to demonstrate how we can fetch a song item from the database using an id and display its information on the front-end.

  • Create a server endpoint to fetch a single song entry from the database

  • Create Vue router to send a request for single song information

  • Create view song Vue component and display the stored information of the selected song

Using the API to Create, Read, Update, and Delete Items – Part 3
07:11

The aim of this video is to demonstrate how we can edit and delete an entry from our database.

  • Create edit and delete server endpoint that will delete and modify the song information on request

  • Create a vue route to send a request to the server for updating the song information

  • Create edit song component that will display the song information in an editable form

Using the API to Create, Read, Update, and Delete Items – Part 4
07:07

The aim of this video is to allow the user to navigate all its API communication with the server through Vuex store.

  • Import the store.js file into your routes and modify your routes to call Vuex store action

  • Create Vuex store actions to communicate with the server API endpoint

  • Store all the response received from the API into the Vuex state

Using the Vuex Store as a Single Point of Contact to the API
04:56

The aim of this video is to introduce viewers to unit testing and its benefits and how we can implement them in vue.js.

  • Create a Vue project using a Vue simple web pack

  • Install all necessary packages required for unit testing

  • Create a component and write and execute a test case for it

Testing
08:00

The aim of this video is to highlight the Vue.js application vulnerabilities and what can be done to prevent them from being exploited.

  • Add XSS validation to all you v-HTML directives

  • Use token for user validation on the routes

  • Redirect all unauthorized access to any route to login or home page

Security
06:18
Test Your Knowledge
5 questions
Requirements
  • Familiarity with JavaScript programming is assumed.
Description

Learn to build full-stack isomorphic JavaScript web applications with Vue and Node.js along with the MEVN stack. The MEVN stack is a collection of great tools—MongoDB, Express.js, Vue.js, and Node.js—that provide a strong base for a developer to build easily maintainable web applications. With each of them a JavaScript or JavaScript-based technology, having a shared programming language means it takes less time to develop applications.

This course enables you to build, test, and deploy full stack isomorphic applications with Node.js, Express, Vue.js, and MongoDB. You will start by setting up the development environment and grasping some of the essential concepts for building applications. You will then build a single page application using MEVN stack. You will also develop a songs playlist application wherein you will create a new playlist and search through YouTube videos. Next, you will learn to consume data from third-party APIs within your application as well as perform CRUD operations against a locally hosted API using the HTTP client Axios. Finally, you will learn to deploy the applications on the cloud.

By the end of this course, you will be able to build your own web and isomorphic applications using MEVN stack.
Meet Your Expert(s):

We have the best work of the following esteemed author(s) to ensure that your learning journey is smooth:

  • David Acosta is a professional Software Developer with a Bachelor of Science degree in Information Technology Management and more than three years' experience in web development. As a developer for CollaborateMD Inc., David develops web-based medical billing and practice management software services for independent practices and hospitals. His work mainly focuses on JavaScript, TypeScript, and Java-based technologies such as Angular 2, Spring, Swing, and JQuery. He also has extensive knowledge of many other libraries and frameworks such as Laravel, React.JS, Vue.js, Ruby on Rails, Bootstrap, and more.

  • Haider Rehman works as a DevOps and a Software Engineer for a well-known software company and has over 8 years of experience as a developer. He has a Master's degree in Telecom Systems and a Bachelor's degree in Telecommunication; after obtaining these, he switched to programming in IT and telecommunications to get a feel for the industry. Haider enjoys hanging out with friends, music, and coding.

Who this course is for:
  • This course is for web developers who want to create amazing real-world applications using MEVN Stack.