Book Image

Node.js 6.x Blueprints

By : Fernando Monteiro
Book Image

Node.js 6.x Blueprints

By: Fernando Monteiro

Overview of this book

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.
Table of Contents (16 chapters)
Node.js 6.x Blueprints
Credits
About the Author
About the Reviewer
www.PacktPub.com
Preface

Adding the Gallery script


As we can see, the default Keystone.js theme is very simple and uses only the Bootstrap framework. Now we will use a jQuery plugin called Fancybox to apply a new style in our gallery.

Tip

You can get more information about Fancybox at the official website: http://fancybox.net/.

  1. Open templates/themes/newBlog/layouts/default.swig and add the following highlighted code inside the head tag:

          {# Customise the stylesheet for your site by editing
           /public/styles/site.sass #} 
          <link href="/styles/site.css" rel="stylesheet"> 
          <!-- fancyBox --> 
          <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs
            /fancybox/2.1.5/jquery.fancybox.min.css" media="screen"> 
          {# This file provides the default styling for the KeystoneJS 
            Content Editor #} 
          {%- if user and user.canAccessKeystone -%} 
            <link href="/keystone/styles/content/editor.min.css" 
              rel="stylesheet"> 
          {%- endif -%}
    
  2. Now...