Full-Stack Web Development with Vue.js and Node Build scalable and powerful web apps with modern web stack MongoDB, Vue,… (Aneeta Sharma) (Z-Library)

📄 File Format: PDF

💾 File Size: 17.6 MB

📖 Read Online ⬇️ Download

Registered users can read the full content for free

Register as a Gaohf Library member to read the complete e-book online for free and enjoy a better reading experience.

📄 Page 1

(This page has no text content)

📄 Page 2

Full-Stack Web Development with Vue.js and Node Build scalable and powerful web apps with modern web stack: MongoDB, Vue, Node.js, and Express Aneeta Sharma BIRMINGHAM - MUMBAI

📄 Page 3

Full-Stack Web Development with Vue.js and Node Copyright © 2018 Packt Publishing All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book. Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information. Commissioning Editor: Kunal Chaudhari Acquisition Editor: Nigel Fernandes Content Development Editor: Jason Pereira Technical Editor: Leena Patil Copy Editor: Safis Editing Project Coordinator: Sheejal Shah Proofreader: Safis Editing Indexer: Pratik Shirodkar Graphics: Jason Monteiro Production Coordinator: Shantanu Zagade First published: May 2018 Production reference: 1100518 Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK. ISBN 978-1-78883-114-7 www.packtpub.com

📄 Page 4

mapt.io Mapt is an online digital library that gives you full access to over 5,000 books and videos, as well as industry leading tools to help you plan your personal development and advance your career. For more information, please visit our website. Why subscribe? Spend less time learning and more time coding with practical eBooks and Videos from over 4,000 industry professionals Improve your learning with Skill Plans built especially for you Get a free eBook or video every month Mapt is fully searchable Copy and paste, print, and bookmark content PacktPub.com Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at service@packtpub.com for more details. At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters, and receive exclusive discounts and offers on Packt books and eBooks.

📄 Page 5

Contributors About the author Aneeta Sharma is a software engineer from Kathmandu, Nepal who has been in the tech industry for more than seven years. She started her career as a Web Designer, before becoming a PHP Developer and then a Ruby on Rails engineer. She has been working on both frontend and backend aspects of web application development since she started her career and has been developing web applications professionally since 2009. She likes to explore new technologies and has learned to work with lots of them over the years. Most recently, she has been working with full-stack solutions with Ruby on Rails, along with frontend frameworks such as Vue.js and React.js. I am grateful to Packt Publishing for giving me the opportunity to write this book. I am thankful to the team with whom I worked and everyone who contributed to this book. Thank you all for spending your precious time in ensuring the quality of this book. I loved working with you. I am thankful for my family and friends, as well as my colleagues who supported and encouraged me on this journey. Thank you for being an inspiration.

📄 Page 6

About the reviewer Anton de Regt is a programmer and blogger with a passion for making life better, faster, and easier. After graduating with a bachelor’s degree in Embedded Systems and Automation, he worked in the Netherlands, China, and the USA as a programmer and database admin. Anton now develops apps for small business owners to help them focus on the things that matter and make their impact bigger. On his tech blog, he writes about a variety of subjects, ranging from cybersecurity and data science, to hackathons and socially responsible programming. Packt is searching for authors like you If you're interested in becoming an author for Packt, please visit authors.packtpub.com and apply today. We have worked with thousands of developers and tech professionals, just like you, to help them share their insight with the global tech community. You can make a general application, apply for a specific hot topic that we are recruiting an author for, or submit your own idea.

📄 Page 7

Table of Contents Preface 1 Chapter 1: Introducing MEVN 6 Evolution of the technology stack in JavaScript 7 Introducing MEVN 8 Installing Node.js 8 Installing Node.js on macOS 9 Installing Node.js using the installer 9 Installing Node.js using the bash 10 Installing Node.js on Linux 11 Installing Node.js from the default distribution 11 Installing Node.js from NodeSource 11 Installing Node.js on Windows 11 Introducing NVM 12 Installing Node.js from NVM 12 Introducing npm 13 Module 13 Package 13 Installing npm 13 Using npm 14 Installing an npm package locally 14 Installing an npm package globally 14 Introducing package.json 14 Creating a package.json file 15 Installing MongoDB 17 The benefits of MongoDB compared to Relational Database Management Systems (RDBMS) 17 Installing MongoDB on macOS 18 Installing MongoDB by downloading 18 Installing MongoDB via Homebrew 19 Installing MongoDB on Linux 19 Installing MongoDB using apt-get 19 Installing MongoDB using tarball 20 Installing MongoDB on Windows 20 Using MongoDB 21 Creating or using a MongoDB database 21 Creating documents 22 Fetching documents 22 Fetching all documents 23 Fetching a specific document 23 Updating documents 24

📄 Page 8

Table of Contents [ ii ] Deleting documents 24 Deleting documents that match a given criteria 24 Deleting a single document that matches the given criteria 25 Deleting all records 25 Introducing Git 25 Installing Git on Windows 25 Installing Git on Mac 25 Installing Git on Linux 26 Introducing GitHub 26 Why GitHub? 26 Using GitHub 27 Setting up a GitHub repository 28 Summary 30 Chapter 2: Building an Express Application 31 Introduction to Node.js 32 Understanding Node.js 33 Node.js programming 33 Node.js modules 35 Node.js core modules 35 Custom modules 36 Introducing Express.js 37 Installing Express.js 37 Creating an Express.js application 37 Express router 42 Request object 43 Response object 44 Introduction to MVC 44 Why MVC? 45 Changing the folder structure to incorporate MVC 45 File naming conventions 49 Creating view files for the Express.js application 50 Summary 53 Chapter 3: Introducing MongoDB 54 Why MongoDB? 55 MongoDB queries 55 Creating documents 56 insertOne() 56 insertMany() 57 insert() 58 Retrieving documents 59 Finding all documents 59 Finding documents via filters 60 Updating documents 61 updateOne() 62 updateMany() 62

📄 Page 9

Table of Contents [ iii ] update() 63 Deleting documents 63 deleteOne() 63 deleteMany() 64 remove() 64 Introducing Mongoose 65 Installing Mongoose 66 Connecting Mongoose to MongoDB 67 Creating records in Mongoose 68 Fetching records from Mongoose 71 Fetching all records 71 Fetching a specific record 72 Updating records in Mongoose 73 findById() and save() 73 findOneAndUpdate() 74 findByIdAndUpdate() 74 Deleting records in Mongoose 75 remove() 75 findOneAndRemove 76 findByIdAndRemove() 77 Adding validation with Mongoose 77 Default validations 78 required() 78 Type validation 79 String 79 Numbers 79 Custom validations 80 Summary 81 Chapter 4: Introducing REST APIs 82 What is REST? 83 Introducing REST APIs 83 Benefits of REST API 84 HTTP verbs 85 GET 85 POST 85 PUT 86 DELETE 86 HTTP status codes 86 2XX codes 86 4XX codes 87 5XX codes 87 Introducing Postman 88 Installing Postman 88 Testing APIs with Postman 89 Adding a GET endpoint in the users controller 91 Fetching all users 91

📄 Page 10

Table of Contents [ iv ] Fetching a single user 94 Adding a POST endpoint in the users controller 95 Adding a PUT endpoint in the users controller 97 Adding a DELETE endpoint in the users controller 98 Summary 99 Chapter 5: Building the Real Application 100 Introducing Vue.js 100 Installing Vue.js 101 Including it in a script tag 101 Using Content Delivery Network (CDN) links directly 101 Using Vue.js as an npm package 102 Introducing vue-cli 102 Initializing projects with vue-cli 102 Project folder structure 106 Building a static application with Vue.js 107 Redefining the home page 109 Segregating CSS 109 Introduction to Vuetify 110 Redesigning pages with Vuetify 112 Redesigning the home page 113 Redesigning the contact page 115 Understanding Vue.js components 117 Vue.js directives 117 v-text 118 v-on 119 Data binding 121 Handling forms with Vue.js 122 Creating a movies listing page 122 Creating an Add movie form 129 Communicating with servers 134 Adding express to our application 134 Adding a server file 135 Adding a Movie model 137 Adding movies controller 138 Connecting frontend and backend 139 Installing axios 140 Connecting all the pieces 140 Adding form validations 142 Adding a flash message 146 Loading dynamic content on the homepage 148 API endpoint to fetch all movies 149 Modifying Home.vue to display dynamic content 150 Adding a movie profile page 155 Summary 165

📄 Page 11

Table of Contents [ v ] Chapter 6: Building Authentication with passport.js 166 Introduction to passport.js 167 JWT 167 Installing passport.js 168 Configuring passport 168 passport.js strategies 169 Installing the passport-jwt strategy 169 Configuring the passport-jwt strategy 169 Using the JWT strategy 170 Setting up user registration 170 Creating a User model 171 Installing bcryptjs 171 Adding API endpoint to register a user 172 Creating a register view page 174 Adding submit and clear methods in the register form 176 Introducing axios 177 Using axios 177 Setting up the user login 180 Modifying the User model 180 Adding an API endpoint to log a user in 181 Creating a register view page 184 Adding submit and clear methods to the login form 186 Authenticating our user in Home.vue 188 Serving static files for Vue components 190 Passport's Local Strategy 200 Installing Passport's Local Strategy 200 Configuring Passport's Local Strategy 200 Adding necessary routes for Local Authentication 201 Installing express-session 202 Configuring express-session 202 Configuring emit method 205 Summary 211 Chapter 7: Building OAuth Strategies with passport.js 212 Passport's Facebook Strategy 213 Installing Passport's Facebook Strategy 213 Configuring Passport's Facebook Strategy 213 Creating and setting up a Facebook app 213 Adding a button to our login page that allows users to log in via Facebook 215 Adding configurations for Facebook app 217 Adding necessary routes for Facebook login 218 Passport's Twitter Strategy 222 Installing Passport's Twitter Strategy 222 Configuring Passport's Twitter Strategy 223 Creating and setting up a Twitter app 223

📄 Page 12

Table of Contents [ vi ] Adding a button to our login page that allows users to log in via Twitter 225 Adding configurations for Twitter App 227 Adding necessary routes for Twitter login 228 Passport's Google strategy 232 Installing Passport's Google strategy 232 Configuring Passport's Google strategy 232 Creating and setting up a Google app 233 Adding a button to our login page that allows users to log in via Google 234 Adding configurations for Google app 236 Adding necessary routes for Google login 237 Passport's LinkedIn strategy 239 Installing Passport's LinkedIn strategy 239 Configuring Passport's LinkedIn strategy 239 Creating and setting up a LinkedIn app 240 Adding a button to our login page that allows users to log in via LinkedIn 241 Adding configurations for LinkedIn app 244 Adding necessary routes for LinkedIn login 245 Summary 248 Chapter 8: Introducing Vuex 249 Traditional multi-web page application 250 An introduction to SPAs 251 SPA versus MPA 252 Pros of using MPAs 252 Cons of using MPAs 252 Pros of using SPAs 252 Cons of using SPAs 253 An introduction to Vuex 253 Core concepts of Vuex 253 Creating a simple Vuex application 255 Installing Vuex 256 Setting up Vuex 256 Creating a store file 256 State 256 Getters 259 mutations 261 Actions 261 Installing and using Vuex in a movie application 264 Defining a store 266 Modifying Home.vue 268 Creating an action 268 Creating a mutation 269 Creating a getter 270 Summary 274

📄 Page 13

Table of Contents [ vii ] Chapter 9: Testing an MEVN Application 275 Benefits of writing tests 275 Introduction to unit tests 276 Convention for writing unit tests 277 An introduction to end-to-end test 277 Convention for writing end-to-end tests 278 Technologies we will be using 278 Introducing Mocha 278 Introducing chai 282 Introducing sinon 283 Writing tests for Node.js server 287 Writing tests for controllers 288 Writing tests for models 295 Writing tests for Vue.js components 297 Writing e2e testing 301 Installing Nightwatch 301 Configuring Nightwatch 301 Summary 315 Chapter 10: Going Live 316 Continuous integration 316 Workflow for CI 317 Benefits of CI 318 Introduction to Travis CI 318 Setting up Travis in the app 319 Activating the repository 319 Specifying the Node.js version 319 Building the script 320 Managing the dependencies 321 Introduction to Heroku 327 Setting up a Heroku account 328 Creating a Node.js app 328 Installing Heroku 329 Installing Heroku in Windows 329 Installing Heroku in Linux 329 Installing Heroku in macOS X 329 Deploying to Heroku 329 Heroku error logs 335 Summary 335 Other Books You May Enjoy 336 Index 339

📄 Page 14

Preface JavaScript has become one of the most important languages of today and tomorrow. The rise of JavaScript in the past few years has been so drastic that it has become a powerful language in the development of modern web applications. MEVN is one of the stacks for developing modern web applications in addition to MEAN and MERN. This book provides a step by step way of building a full-stack web application using the technology in MEVN, which is MongoDB, Express.js, Vue.js, and Node.js. The book will provide the basic concepts of Node.js and MongoDB, continuing with building an Express.js application and implementing Vue.js. In this book, we'll cover the following things: Learning about the technology stack—MongoDB, Node.js, Express.js, and Vue.js Building an Express.js application Learning what REST APIs are and how to implement them Learning to use Vue.js as the frontend layer in the Express.js application Adding an authentication layer in the application Adding the automation scripts and tests Who this book is for This book is designed for web developers who are interested in learning how to build a full-stack application with only one programming language as JavaScript using the technology stack: Mongo DB, Express.js, Vue.js, and Node.js. This book is suitable for beginners and intermediate developers with a basic knowledge of HTML, CSS, and JavaScript. If you are a web or full-stack JavaScript developer JavaScript developer and has tried hands on the traditional stacks, such as LAMP, MEAN, or MERN, and wish to explore a new stack with modern web technologies, then this book is for you.

📄 Page 15

Preface [ 2 ] What this book covers Chapter 1, Introduction to MEVN, gives an introduction to the MEVN stack and the installation of different tools required to build the foundation for the application. Chapter 2, Building an Express Application, provides an introduction to Express.js, an idea of what Model, Views, Controller (MVC) structure is, and shows you how to set up an application using Express.js and MVC structure. Chapter 3, Introduction to MongoDB, focuses on the introduction of Mongo and its queries, introduction to Mongoose and performance of Create, Read, Update, and Delete (CRUD) operations using Mongoose. Chapter 4, REST APIs, gives an idea of what REST architecture is and what RESTful APIs are. This chapter also gives an idea of different HTTP verbs and developing REST APIs. Chapter 5, Building the Real Application, introduces Vue.js and shows you how to build a fully working dynamic application using all technologies in MEVN. Chapter 6, Authentication with Passport.js, deals with what Passport.js and describes how to implement JWT and local strategy to add an authentication layer in the application. Chapter 7, Passport.js OAuth Strategies, gives idea about what OAuth strategies and guides you through the implementation of Facebook, Twitter, Google, and LinkedIn Passport.js strategies. Chapter 8, Introduction to Vuex, gives an idea about core concepts of Vuex – states, getters, mutations, and actions. It also describes how you can implement them in the application. Chapter 9, Testing an MEVN Application, explains what unit tests and end-to-end tests are and guides you through writing both unit tests and automation tests for the different aspects of the application. Chapter 10, Go Live, explains what Continuous Integration is, guiding you through how to set up a Continuous Integration service with the application and deploy the application on Heroku.

📄 Page 16

Preface [ 3 ] To get the most out of this book This book will be of most benefit if you have the following skills: A knowledge of HTML, CSS, and JavaScript A knowledge of Vue.js and Node.js is a plus A knowledge on how to build web applications using MEAN and MERN stacks is a plus Download the example code files You can download the example code files for this book from your account at www.packtpub.com. If you purchased this book elsewhere, you can visit www.packtpub.com/support and register to have the files emailed directly to you. You can download the code files by following these steps: Log in or register at www.packtpub.com.1. Select the SUPPORT tab.2. Click on Code Downloads & Errata.3. Enter the name of the book in the Search box and follow the onscreen4. instructions. Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of: WinRAR/7-Zip for Windows Zipeg/iZip/UnRarX for Mac 7-Zip/PeaZip for Linux The code bundle for the book is also hosted on GitHub at https:/ ​/ ​github. ​com/ PacktPublishing/​Full- ​Stack- ​Web- ​Development- ​with- ​Vue. ​js-​and- ​Node. In case there's an update to the code, it will be updated on the existing GitHub repository. We also have other code bundles from our rich catalog of books and videos available at https:/​/​github. ​com/ ​PacktPublishing/ ​. Check them out!

📄 Page 17

Preface [ 4 ] Conventions used There are a number of text conventions used throughout this book. CodeInText: Indicates code words in the text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: "A module is something that can be loaded by Node.js with a require command and has a namespace. A module has a package.json file associated with it." A block of code is set as follows: extends layout block content h1= title p Welcome to #{title} When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold: var index = require('./routes/index'); var users = require('./routes/users'); var app = express(); // Require file system module var fs = require('file-system'); Any command-line input or output is written as follows: $ mkdir css $ cd css Bold: Indicates a new term, an important word, or words that you see onscreen. For example, words in menus or dialog boxes appear in the text like this. Here is an example: "Just hit Continue until the installation completes."

📄 Page 18

Preface [ 5 ] Warnings or important notes appear like this. Tips and tricks appear like this. Get in touch Feedback from our readers is always welcome. General feedback: Email feedback@packtpub.com and mention the book title in the subject of your message. If you have questions about any aspect of this book, please email us at questions@packtpub.com. Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details. Piracy: If you come across any illegal copies of our works in any form on the Internet, we would be grateful if you would provide us with the location address or website name. Please contact us at copyright@packtpub.com with a link to the material. If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com. Reviews Please leave a review. Once you have read and used this book, why not leave a review on the site that you purchased it from? Potential readers can then see and use your unbiased opinion to make purchase decisions, we at Packt can understand what you think about our products, and our authors can see your feedback on their book. Thank you! For more information about Packt, please visit packtpub.com.

📄 Page 19

1 Introducing MEVN Mongo, Express, Vue.js, and Node.js (MEVN) is a collection of JavaScript technologies just like MongoDB, Express, Angular, and Node.js (MEAN), and like MongoDB, Express, React, and Node.js (MERN). It is a full-stack solution for building web-based applications that use MongoDB as data storage, Express.js as the backend framework (which is built on top of Node.js), Vue.js as the JavaScript framework for the frontend, and Node.js as the main engine for the backend. This book is for web developers who are interested in learning to build a full-stack JavaScript application using MongoDB, Express.js, Vue.js, and Node.js. It is suitable for beginners and intermediate developers with a basic knowledge of HTML, CSS, and JavaScript. The term MEVN may be new, but the technologies used in it are not new. The only new technology that is being introduced here is Vue.js. Vue.js is an open source JavaScript framework, and its popularity is growing rapidly. There's not much of a learning curve with Vue.js and it is also a fierce competitor of other JavaScript frameworks such as AngularJS and ReactJS. Modern web applications need to be fast and easily scalable. In the past, JavaScript was used in web applications only when there was a need to add some visual effects or animations that normal HTML and CSS could not achieve. But today, JavaScript has changed. Today, JavaScript is used in almost every web-based application, from small- to large-scale apps. JavaScript is chosen when the application needs to be much faster and more interactive.

📄 Page 20

Introducing MEVN Chapter 1 [ 7 ] Building a full-stack application using JavaScript as the sole programming language has its own benefits: If you are just starting out and learning how to program, you only have to master one language: JavaScript. Full-stack engineers are high in demand. Becoming a full-stack developer means that you have an idea of how databases work, you know how to build both the backend and the frontend, and you also have the skills for UI/UX. In this book, we will build the application using these technology stacks. We will cover the following topics in this chapter: An introduction to the MEVN technology stack An introduction to Node.js and its installation on Windows, Linux, and macOS An overview of npm and its installation An introduction to MongoDB and its installation and a few basic commands used in MongoDB An introduction to GitHub version control and how it helps software engineers in terms of easy access to code history and collaboration Evolution of the technology stack in JavaScript JavaScript is one of the most important programming languages today. Founded by Brendan Eich in 1995, it has done superbly well, not only in maintaining its status, but also in rising above all other programming languages. The popularity of JavaScript is ever growing with no end in sight. Building web applications with JavaScript as the sole programming language has always been popular. And with this fast growing pace, the need for software engineers to have knowledge of JavaScript is only increasing. No matter what programming language you choose to excel at, JavaScript always crawls its way in to get involved with other programming languages as well, one way or the other.