Full-Stack Web Development with Vue.js and Node

Aneeta Sharma

• Publisher: Packt Publishing
• Year: 2018
• ISBN:
  9781788830775
• Edition: 1
• Topic: Computer Science
• Subtopic: Programming in JavaScript
• Index: Computer Science

Bring the frontend and backend together with Vue, Vuex, and Node.js

Key Features

• Construct modern web applications with Node 10, Express.js, MongoDB, and Vue
• Leverage the latest web standards to increase code performance, readability, and cross-compatibility
• Harness the power of the JavaScript ecosystem to effectively run, build, and test your full stack applications

Book Description

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.

What you will learn

• Build an application with Express.js
• Create schemas using Mongoose
• Develop a single-page application using Vue.js and Express.js
• Create RESTful APIs using Express.js
• Add test cases to improve the reliability of the application
• Learn how to deploy apps on Heroku using GitHub
• Add authorization using passports

Who this book is for

If you are a web or a full-stack JavaScript developer, and have tried your hand at traditional stacks such as LAMP, MEAN or MERN, or wish to explore a new stack with modern web technologies, then this book is for you. Prior knowledge of HTML, CSS, and JavaScript would be an added advantage.

Building the Real Application

We have covered the basic components that we need to have knowledge of in order to build a full-stack JavaScript application. From this point on, we will work on building a whole web application using all of these technologies.

We will be building a movie rating application that will have the following features throughout this book:

• A home page that lists all the movies with other attributes
• There will be an admin section where the administrator will be able to add movies
• The user will be able to log in and sign up
• The user will be able to rate a movie
• There will be a movie profile section where the logged-in user can rate the movie

So, let's get started.

Introducing Vue.js

Vue.js is an open source, progressive JavaScript framework for building user interfaces. The rise of new JavaScript frameworks has been tremendous. With such growth, you might get confused about where to get started and how. There are hundreds of JavaScript frameworks today; among them, there are dozens of frameworks that stood out. But still, to choose from those dozens might be a daunting task.

There are quite a few popular frameworks today, such as React, Ember, and Angular. While these frameworks have their own advantages, there are some limitations to them as well. While building an application with React or Angular is good in itself, Vue.js helps eliminate some of the limitations associated with these frameworks.

Vue.js is progressive. With Vue.js, you can start with small and then progress gradually toward building bigger applications. This means that if you are just starting out, you might want to start with a very small application and scale slowly. Vue.js is perfect for such applications. It is lightweight and flexible as well. The learning curve is also very easy and super easy to get started.

Vue.js was invented by Evan You. It was first released in February 2014 and gained huge popularity around 2016. He used to work for Google and in Angular projects. The motivation for this invention was mainly because he didn't want to use Angular for small projects, since Angular provides a lot of packages out of the box and, hence, is not lightweight and not suitable for small applications. Having said that, Vue.js does not only target the smaller applications. It definitely does not provide all the packages with it, but you can add them as you progress with your application. That is the beauty of Vue.js.

Installing Vue.js

Let's get started with the installation of Vue.js. There are three ways to install and use Vue.js.

Including it in a script tag

The easiest way to use Vue.js is to download it and include it in your script tag. You can download it from https://cdn.jsdelivr.net/npm/vue:

<script type="text/javascript" src="vue.js"></script>

Using Content Delivery Network (CDN) links directly

CDN is a network of distributed servers. It stores the cached version of contents in different geographical locations so that the content loads faster when fetched. We can use the CDN link directly in our script tag:

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue.js"></script>

Using Vue.js as an npm package

npm also has a package for vue, which can be installed as follows:

$ npm install vue

Introducing vue-cli

CLI stands for Command Line Interface. A cli runs one or multiple commands successively in a command line interface. Vue.js also has a cli which, when installed, makes it super easy to spin up a project. We will be using a vue-cli in this book to create the Vue.js application. Let's install vue-cli with the following command. You can execute this command in your root folder:

$ npm install -g vue-cli

Initializing projects with vue-cli

Let's go ahead with creating a new project folder for our movie rating application. We will call it movie_rating_app. Go to the directory where you want to create your application in the Terminal and run the following:

$ vue init webpack movie_rating_app

The preceding command initializes an application with all the depende...

Table of contents

• Title Page
• Copyright and Credits
• PacktPub.com
• Contributors
• Preface
• Introducing MEVN
• Building an Express Application
• Introducing MongoDB
• Introducing REST APIs
• Building the Real Application
• Building Authentication with passport.js
• Building OAuth Strategies with passport.js
• Introducing Vuex
• Testing an MEVN Application
• Going Live
• Other Books You May Enjoy