41,99 €
Create stunning web applications and Restful APIs from start to finish with Express, Loopback, MongoDB, and MySQL using this definitive guide
This book caters to developers who are looking to build projects right from a simple website to more complex one such as a blog, chat application, a photography site, and a lot more. A Basic knowledge of JavaScript and Node.js would be extremely beneficial.
Node.js is the most popular framework to create server-side applications today. Be it web, desktop, or mobile, Node.js comes to your rescue to create stunning real-time applications. Node.js 6.x Blueprints will teach you to build these types of projects in an easy-to-understand manner.
The key to any Node.js project is a strong foundation on the concepts that will be a part of every project. The book will first teach you the MVC design pattern while developing a Twitter-like application using Express.js. In the next chapters, you will learn to create a website and applications such as streaming, photography, and a store locator using MongoDB, MySQL, and Firebase.
Once you're warmed up, we'll move on to more complex projects such as a consumer feedback app, a real-time chat app, and a blog using Node.js with frameworks such as loopback.io and socket.io. Finally, we'll explore front-end build processes, Docker, and continuous delivery.
By the end of book, you will be comfortable working with Node.js applications and will know the best tools and frameworks to build highly scalable desktop and cloud applications.
This is an easy-to-follow guide full of practical examples. This book takes a project-based approach and each chapter contains step-by-step instructions to create stunning applications across different application domains from scratch.
Sie lesen das E-Book in den Legimi-Apps auf:
Seitenzahl: 272
Veröffentlichungsjahr: 2016
Copyright © 2016 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(s), nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be 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.
First published: August 2016
Production reference: 1220816
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham
B3 2PB, UK.
ISBN 978-1-78588-843-4
www.packtpub.com
Author
Fernando Monteiro
Copy Editors
Vikrant Phadke
Safis Editing
Reviewer
Magesh Kuppan
Project Coordinator
Nidhi Joshi
Commissioning Editor
Amarabha Banerjee
Proofreader
Safis Editing
Acquisition Editor
Manish Nainani
Indexer
Mariammal Chettiyar
Content Development Editor
Mayur Pawanikar
Production Coordinator
Nilesh Mohite
Technical Editor
Karan Thakkar
Fernando Monteiro is a full-stack engineer, speaker, and open source contributor. He has built and made some of his personal projects open source, such as Responsive Boilerplate, Frontend Boilerplate, Angm-Generator, and TrelloMetrics, written in AngularJS, Node.js, Less, and SASS.
With around 16 years of experience in information technology, his current focus is on web and mobile JavaScript applications. He has a strong understanding and experience with all phases of the software engineering life cycle, including source control, design, build/release, and automated testing.
He has worked as a manager of e-commerce, and a UX designer for various companies and products, including mobile applications.
When not programming, Fernando enjoys riding Harley Davidson bikes, making his own beer, and watching movies with his family.
You can find him on LinkedIn at https://br.linkedin.com/in/fernando-monteiro-69881b28/en.
The following are his previous books with Packt Publishing:
Instant HTML5 Responsive Table Design How-to in April 2013 :
http://www.amazon.com/Instant-HTML5-Responsive-Table-Design/dp/1849697264/ref=sr_1_3?s=books&ie=UTF8&qid=1454389499&sr=1-3&keywords=Fernando+Monteiro.
Learning Single Page Web Application Development in December 2014:
http://www.amazon.com/Learning-Single-Page-Application-Development/dp/1783552093/ref=sr_1_6?s=books&ie=UTF8&qid=1454389499&sr=1-6&keywords=Fernando+Monteiro.
AngularJS Directives Cookbook in November 2015 :
http://www.amazon.com/AngularJS-Directives-Cookbook-Fernando-Monteiro/dp/1784395897/ref=sr_1_1?s=books&ie=UTF8&qid=1454389499&sr=1-1&keywords=Fernando+Monteiro.
I would like to say thank you to all my family, who supported me in this journey–especially my mother, Paschoalina Patrizzi – for their strength and perseverance in life. And to all of the Packt Publishing crew who helped me with one more book.
Magesh Kuppanis a freelance consultant and trainer on web technologies with over 17 years of experience. Everything about technology excites him.
I am grateful to my parents, without whom I would not be what I am today. I am also thankful to my wife for she has been instrumental in all my efforts. Thanks to my little son who brings bliss to my life.
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 [email protected] 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.
https://www2.packtpub.com/books/subscription/packtlib
Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can search, access, and read Packt's entire library of books.
Web applications with Node.js are increasingly popular and accessible to all developers. Today, with the growing evolution of Node.js, we can see numerous companies using this technology for the development of their applications. Among them, we can mention Netflix, Paypal, and many others who use Node.js in production environments.
The hosting companies also made a breakthrough by supporting Node.js on their platforms. Plus, many building tools, such as task runners, generators and dependence managers, emerged using the Node.js engine, such as Grunt, Gulp, Bower, and more.
Throughout the book, we will show you how to build and deploy Node.js applications from scratch by using all the resources available on the Node.js ecosystem and exploring cloud services for testing, image manipulation, and deployment.
Dealing with all these tools and getting the best out of them all is a very interesting and motivating task.
We will also introduce the concept of Docker containers and continuous integration using different tools and services.
Over the course of our book, we will see how to get the best out of this development method using the latest and greatest technologies to build ten applications from start to end.
Enjoy!
Throughout this book, we'll explore different ways to build Node.js Applications and understand what elements make up a basic blog page using MVC design patterns. We will learn how to deal with different types of view templates such as EJS and SWIG and more complex stuff using command-line tools to deploy and run applications.
We will cover fundamental concepts of the Restful API architecture and client-side communication using jQuery, React.js and Angular.js.
Although some points are advanced, you'll be prepared to understand the core concepts of Node.js applications, and how to deal with different types of database's such as MongoDB, MySQL, and the Express and Loopback frameworks.
Chapter 1, Building a Twitter-Like Application Using MVC Design Patterns, shows the main concepts of the MVC pattern applied to Node.js applications using the Express framework, mongoose ODM middleware, and MongoDB database. We see how to deal with user sessions and authentication using Passport middleware.
Chapter 2, Building a Basic Website Using MySQL Database, is a real dive into a Node.js application using a relational database. We see how to use the Sequelize (ORM) middleware with Mysql database, how to create database relationships, and how to use migration files.
Chapter 3, Building a Multimedia Application, teaches you how to deal with file storage and upload multimedia files such as images and videos. We also see how to save filenames on MongoDB and how to retrieve the files and show them on user interface. Then we learn how to deal with write and read using the Node.js streams API.
Chapter 4, Don't Take a Photograph, Make It – An App for Photographers, covers an application to upload, store, and manipulate images using the Cloudnary cloud services, and interacting with MongoDB. Also, we will see how to implement the Materialize.css framework for the user interface, and introduce the use of dot files to load configuration variable.
Chapter 5, Creating a Store Locator Application with MongoDB Geospatial Query, explains the core concepts of geospatial data and geolocation using MongoDB, and one of the most useful features to support GEOJSON data format, the 2dspheres indexes. You will understand how to integrate Google Maps API with a Node.js application.
Chapter 6, Building a Customer Feedback App with Restful API and Loopback.io, explores the loopback.io framework to build a Restful API. We will see the fundamentals of the Loopback CLI in order to create an entire application using the command line. You'll learn how to deal with the relationship between models using MongoDB and how to use React.js on the client side to communicate with the API.
Chapter 7, Building a Real-Time Chat Application with Socket.io, shows the fundamentals of Socket.io events to build a chat application using Express and jQuery for the user interface. It covers the basic concept of task managers and how to use Gulp and livereload plugin.
Chapter 8, Creating a Blog with Keystone CMS, discusses the use of a CMS made entirely with Node.js, called Keystone. It's a deep dive into the Keystone application structure and how to extend the framework in order to create new models and views. Also, we will see how to customize and create new Keystone themes.
Chapter 9, Building a Frontend Process with Node.js and NPM, is especially interesting because we will create a Restful application using the loopback.io framework and AngularJS for the user interface. Also, we will use different building tools to concatenate, minify, and optimize images using the command line and Node Package Manager (NPM). And we will see how to use the Heroku toolbelt CLI to create and deploy the application.
Chapter 10, Creating and Deploying Using Continuous Integration and Docker, explores the continuous delivery development process with Node.js applications. You will learn how to integrate tools such as Github, Codeship, and Heroku into your development environment to deal with unit tests and automated deployment. This chpater also teaches you how to set up environment variables to protect your database credentials and how to create a full application using the concept of Docker containers.
All the examples in the book use open source solutions and can be downloaded for free from the links provided in each chapter.
The book's examples use many Node.js modules and some JavaScript libraries, such as jQuery, React.js, and AngularJS. The most current versions when writing this book are Node.js 5.6 and 6.1.
In chapter 1, Building a Twitter-Like Application Using the MVC Design Pattern, you can follow the step-by-step guide to install Node and Node Package Manager (NPM).
You can use your preferred HTML editor.
A modern browser will be very helpful too. We've used Chrome, but feel free to use your preference. We recommend one of these: Safari, Firefox, Chrome, IE, or Opera, all in their latest versions.
You must have basic to intermediate knowledge of JavaScript, HTML, and CSS to follow the examples in the book, but slightly more advanced knowledge in web development/Restful APIs and Node.js modules/middleware may be required in some chapters. Do not worry about it; with the examples, we will detail all of the code and give you a lot of links to interesting stuff.
In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.
Code words in text are shown as follows:
Before we proceed, let's change the welcome message from: routes/index.js file to the following highlighted code.
A block of code is set as follows:
/* GET home page. */ router.get('/', function(req, res, next) { res.render('index', { title: 'Express from server folder' }); });When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
/* GET home page. */ router.get('/', function(req, res, next) { res.render('index', { title: 'Express from server folder' }); });New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "clicking on the Next button moves you to the next screen".
Warnings or important notes appear in a box like this.
Tips and tricks appear like this.
Warnings or important notes appear in a box like this.
Tips and tricks appear like this.
Feedback from our readers is always welcome. Let us know what you think about this book-what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of. To send us general feedback, simply e-mail [email protected], and mention the book's title in the subject of your message. If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at www.packtpub.com/authors.
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
You can download the example code files for this book from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
You can download the code files by following these steps:
Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:
The code bundle for the book is also hosted on GitHub at https://github.com/PacktPublishing/Node.JS-6.x-Blueprints. We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books-maybe a mistake in the text or the code-we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title.
To view the previously submitted errata, go to https://www.packtpub.com/books/content/support and enter the name of the book in the search field. The required information will appear under the Errata section.
Piracy of copyrighted material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at [email protected] with a link to the suspected pirated material.
We appreciate your help in protecting our authors and our ability to bring you valuable content.
If you have a problem with any aspect of this book, you can contact us at [email protected], and we will do our best to address the problem.
The Model View Controller (MVC) design pattern was very popular in the eighties in the software industry. This pattern helped so many engineers and companies to build better software for a while and is still useful nowadays with the rise of Node.js and some Node frameworks as Express.js (more information about Express.js and its API can be found at http://expressjs.com/).
As the Express.js website says, it is "Fast, unopinionated, minimalist web framework for Node.js."
Express.js is the most popular Node framework and many companies across the globe have adopted it. So in our first application, let's see how to apply the MVC pattern to create an application using only JavaScript at the backend.
In this chapter, we will cover these topics:
First off, we need to install the most up-to-date Node.js version. At the time of writing this book, Node.js's latest update is v6.3.0. You can go to the Node.js website at https://nodejs.org/en/ and choose your platform. For this book, we are using Mac OS X, but the examples can be followed on any platform.
To check the Node and Node Package Manager (NPM) version, open your terminal/shell and type these:
The book uses Node version 6.3.0 and NPM version 3.10.3
Throughout this book, we will use some tools that accelerate our development process. One of them is called Yeoman (more information can be found at http://yeoman.io/), a powerful web application generator.
Now let's install the generator. Open your terminal/shell and type the following code:
npm install -g yoFor our first application, let's use the official Express generator. The generator helps us in creating the initial code of our application and we can modify it to fit into our application.
Simply type the following command in your terminal or shell:
npm install -g expressNote that the -g flag means installing globally on your machine so that you can use it on any project.
Express is a powerful micro framework for Node.js; with it, it's possible to build web applications with ease.
The project that will start now will be a fully server-side application. We will not use any interface framework such as AngularJS, Ember.js, and others; let's just concentrate on the express framework.
The purpose of this application is to use all the express resources and middleware to create an application following the MVC design pattern.
Middleware is basically functions that are activated by the routing layer of express. The name refers to when a route is activated until its return (from start to end). Middleware is in the middle as the name suggests. It is important to remember that the functions are executed in the order in which they were added.
In the code examples, we will be using middleware including cookie-parser, body-parser, and many others.
You can download the code used in this book directly from the book page present at Packt Publishing Website and you can also download this chapter and all others directly from GitHub at:
https://github.com/newaeonweb/nodejs-6-blueprints.
Each application is given the name of the relevant chapter, so let's dive into our code now.
First off, create a new folder called chapter-01 on your machine. From now on, we will call this folder the root project folder. Before we move on and execute the command to start our project, we will see a few lines about the flags that we use with the express command.
The command we use is express --ejs --css sass -git, where:
As I'm using git for version control, it will be useful to use the express option to add a .gitignore file to my application. But I'll skip all git commands in the book.
To check all the options available from the express framework, you can type this into your terminal/shell:
express -hAnd the framework gives us all the commands available to start a project:
Usage: express [options] [dir] Options: -h, --help output usage information -V, --version output the version number -e, --ejs add ejs engine support (defaults to jade) --hbs add handlebars engine support -H, --hogan add hogan.js engine support -c, --css <engine> add stylesheet <engine> support (less|stylus|compass|sass) (defaults to plain css) --git add .gitignore -f, --force force on non-empty directoryNow, open your terminal/shell and type the following command:
express --ejs --css sass -gitThe output in the terminal/shell will be as follows:
create : create : ./package.json create : ./app.js create : ./.gitignore create : ./public create : ./public/javascripts create : ./public/images create : ./public/stylesheets create : ./public/stylesheets/style.sass create : ./routes create : ./routes/index.js create : ./routes/users.js create : ./views create : ./views/index.ejs create : ./views/error.ejs create : ./bin create : ./bin/www install dependencies: $ cd . && npm install run the app: $ DEBUG=chapter-01:* npm startAs you can see in the following screenshot, the generator is very flexible and only creates the minimum necessary structure to start a project:
However, we will make some changes before we proceed.
Open package.json in the root project folder and add the following highlighted lines of code:
{ "name": "chapter-01", "description": "Build a Twitter Like app using the MVC design pattern", "license": "MIT", "author": { "name": "Fernando Monteiro", "url": "https://github.com/newaeonweb/node-6-blueprints" }, "repository": { "type": "git", "url": "https://github.com/newaeonweb/node-6-blueprints.git" }, "keywords": [ "MVC", "Express Application", "Expressjs" ], "version": "0.0.1", "private": true, "scripts": { "start": "node ./bin/www" }, "dependencies": { "body-parser": "~1.13.2", "cookie-parser": "~1.3.5", "debug": "~2.2.0", "ejs": "~2.3.3", "express": "~4.13.1", "morgan": "~1.6.1", "node-sass-middleware": "0.8.0", "serve-favicon": "~2.3.0" } }Even though it is not a high-priority alteration, it is considered a good practice to add this information to your project.
Now we are ready to run the project; let's install the necessary dependencies that are already listed in the package.json file.
On the terminal/shell, type the following command:
npm installAt the end, we are ready to go!
To run the project and see the application in the browser, type the following command in your terminal/shell:
DEBUG=chapter-01:* npm startThe output in your terminal/shell will be as follows:
chapter-01:server Listening on port 3000 +0msYou can run just npm start, but you won't see the previous output with the port name; later in this chapter, we will fix it.
Now, just check out http://localhost:3000. You'll see the welcome message from express.
