Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

Full-Stack Web Development with Vue.js and Node

By : Sharma

2.3 (4)

Full-Stack Web Development with Vue.js and Node

2.3 (4)

By: Sharma

Overview of this book

Isomorphic JavaScript was the buzzword of the year 2017, allowing developers to utilize a single language throughout their web development stack and build cost-effective and scalable applications. MEVN is a one such modern web development stack consisting of web applications such as MongoDB, Express.js, Vue.js, and Node.js. Hands-On Full-Stack Web Development with Vue.js 2 and Node.js leverages the harmony of these technologies to help you create full-stack web applications. Starting with the core frameworks, this example-based guide explains all the key concepts of frameworks, how to set them up properly, and how to use popular modules to connect them together and make them work cohesively. You will learn all this with the help of real-world examples. In addition to this, you will be able to scaffold web application architecture, add an authentication layer, and develop the MVC structure to support the development of your application. You'll explore how to create data models for your applications and then write REST APIs by exposing your data model to your application. Solely orientated towards building a full, end-to-end application using the MEVN stack, this book will help you understand how your application development grows.

Preface

Preface

Who this book is for

What this book covers

To get the most out of this book

Get in touch

Free Chapter

Introducing MEVN

Introducing MEVN

Evolution of the technology stack in JavaScript

Introducing MEVN

Installing Node.js

Introducing NVM

Introducing npm

Installing MongoDB

Introducing Git

Introducing GitHub

Summary

Building an Express Application

Building an Express Application

Introduction to Node.js

Introducing Express.js

Introduction to MVC

Creating view files for the Express.js application

Summary

Introducing MongoDB

Introducing MongoDB

Why MongoDB?

MongoDB queries

Introducing Mongoose

Adding validation with Mongoose

Summary

Introducing REST APIs

Introducing REST APIs

What is REST?

Introducing REST APIs

HTTP verbs

HTTP status codes

Introducing Postman

Summary

Building the Real Application

Building the Real Application

Introducing Vue.js

Installing Vue.js

Introducing vue-cli

Building a static application with Vue.js

Vue.js directives

Data binding

Handling forms with Vue.js

Communicating with servers

Loading dynamic content on the homepage

Summary

Building Authentication with passport.js

Building Authentication with passport.js

Introduction to passport.js

passport.js strategies

Setting up user registration

Setting up the user login

Serving static files for Vue components

Passport's Local Strategy

Summary

Building OAuth Strategies with passport.js

Building OAuth Strategies with passport.js

Passport's Facebook Strategy

Configuring Passport's Facebook Strategy

Passport's Twitter Strategy

Configuring Passport's Twitter Strategy

Passport's Google strategy

Configuring Passport's Google strategy

Passport's LinkedIn strategy

Configuring Passport's LinkedIn strategy

Summary

Introducing Vuex

Introducing Vuex

Traditional multi-web page application

An introduction to SPAs

SPA versus MPA

An introduction to Vuex

Core concepts of Vuex

Creating a simple Vuex application

Installing and using Vuex in a movie application

Summary

Testing an MEVN Application

Testing an MEVN Application

Benefits of writing tests

Introduction to unit tests

An introduction to end-to-end test

Technologies we will be using

Introducing Mocha

Introducing chai

Introducing sinon

Writing tests for Node.js server

Writing tests for Vue.js components

Writing e2e testing

Summary

Going Live

Going Live

Continuous integration

Introduction to Travis CI

Introduction to Heroku

Summary

Other Books You May Enjoy

Other Books You May Enjoy

Leave a review - let other readers know what you think

Creating a simple Vuex application

We will start a fresh new application to learn the basics of Vuex. Let's get started.

Let's first create a new application:

$ vue init webpack vuex-tutorial

The preceding code snippet will ask you few questions about the application setup. You can choose what you want to keep. I will go with the following configuration:

After the installation, navigate to the project directory:

$ cd vuex-tutorial

The next thing to do is to run the following command:

$ npm install

After that, run the following command:

$ npm run dev

The preceding command will spin up your server and open a port in localhost:8080.

Installing Vuex

The next step is to install vuex. To do that, run the following command...

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Full-Stack Web Development with Vue.js and Node

Search

Your notes and bookmarks