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

Name: Full Stack Isomorphic JavaScript with Vue.js & Node.js
Rating: 4.2 (68 reviews)

Learn to build isomorphic JavaScript web applications using MEVN Stack - MongoDB, Express, Vue.js, and Node.js

Created byPackt Publishing

Last updated 5/2019

English

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

2 sections • 64 lectures • 5h 32m total length

The Course Overview1:20
This video provides an overview of the entire course.
What You Should Know First0:57
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
Single-Page Applications and Vue.js4:05
Understand what a Single-Page Application is.
Define a Single-Page Application
List popular frameworks used to build SPAs
Explain the benefits of SPAs
NoSQL and MongoDB2:18
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
Node.js and Express.js1:41
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
Installing Node.js and Node Package Manager (NPM)1:09
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
Installing Vue.js Command Line Interface (CLI) Project Generator0:51
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 MongoDB3:45
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 Integrated Development Environment (IDE)0:53
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
Create Vue.js Application1:45
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
Project Directory and Structure2:44
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
Vue.js Components14:56
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 Router6:38
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 Navigation Guards3:56
Protect routes in the Vue.js application.
Implement global route guards
Implement in-component route guards
Implement per-route route guards
Vuex State Management10:20
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
Create Server with Express.js8:30
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
Learn to Use Express.js Router5:50
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
Use Express.js Middleware and CORS Configuration6:42
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
RESTful Endpoints with HTTP Controllers7:51
Create controller methods that can communicate with client.
Define functions for each API route
Connect routes to controller functions
Verify connection to client
Check HTTP Status Codes3:17
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
Connect to MongoDB and Use MongoDB Compass GUI2:40
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
Working with Entity Models4:27
Define main Mongoose Schemas for MEVN Stack Application.
Use mongoose to define entity schemas
Access schemas in REST Controllers
Implement schema validation and methods
Create, Read, Update, and Delete (CRUD)8:08
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
Encrypt Passwords with Node.js and BCrypt2:55
Protect user account with encrypted passwords.
Add encryption library to Node.js
Use Bcrypt to encrypt passwords
Verify password encryption in MongoDB
Validate Passwords8:39
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
JSON Web Tokens3:12
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
Vue.js and JSON Web Tokens1:18
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
User Authentication3:06
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
Validating a User’s Session3:54
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
Managing User's Session3:15
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
Connecting Vue.js to Backend Server25:32
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
Getting Ready for Production3:19
Prepare a production-ready MEVN Stack application.
Connect to a production database
Add a production NPM script
Build and run application in production mode
Amazon Web Services and Amazon Elastic Compute Cloud3:48
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
Deploying App to the Web5:05
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
Final Thoughts3:49
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
Test Your Knowledge

The Course Overview3:32
This video provides an overview of the entire course.
First Step Towards Vue2:40
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
Setting Up Vue Using Node.js4:54
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
Basics, Directives, and Reactivity6:52
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.
Vue DevTools5:34
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.
Installing Vue-CLI and Creating a New Project3:53
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
Tour of Project Files and What Are Single-File Components?4:12
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.
Using Axios to Consume a Third-Party API5:54
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
Creating Custom Components and Importing Them5:22
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
Installing Vuex and vue-router and Adding Them to the Vue Instance4:01
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
Vue Core Concepts and How to Implement – Part 16:04
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 25:29
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
How to Use vue-router and Router Links6:45
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
Application Structure – Part 16:32
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 22:33
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
Putting Together the Sample API Code and Adding to the Frontend Application8:42
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
How to Set Up the Database5:53
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
Demonstration of API in REST Client4:08
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
Creating an Account and Then Authenticating /Getting a Token – Part 15: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
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 25:18
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
Setup Login Page, Functionality and Adding the User – Part 15:05
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 14:28
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
Using the API to Create, Read, Update, and Delete Items – Part 18:13
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 25:05
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 37:11
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 47:07
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 Vuex Store as a Single Point of Contact to the API4:56
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
Testing8:00
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
Security6:18
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
Test Your Knowledge

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.

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

What you'll learn

Explore related topics

Course content

Isomorphic JavaScript with MEVN Stack35 lectures • 2hr 53min

Full Stack Web Development with Vue.js and Node.js29 lectures • 2hr 40min

Requirements

Description

Who this course is for: