Note: This video is out of date and will be archived. Check this page for instructions: Node.js integration documentation.
To be able to use the Node.js Integration module, you need to configure both a Node.js application, as well as the Drupal Node.js Integration module itself.
In this lesson, you will learn how to:
- Enable the Node.js Config module
- Understand of all of the configuration options
- Generate a config file for our Node.js application
- Edit the generated configuration for a basic working setup
- Start the Node.js application
Self-check question: Did you remember to change the protocols array in your nodejs.config.js?
Additional resources
The Node.js Notifications module is the User Interface (UI) component of the set of Node.js Integration modules. In this video, you'll see the Node.js Integration module's basic functionality.
In this lesson, you will learn how to:
- Enable the Node.js Notifications module
- Explore the configuration options
- Broadcast a notification message
The Node.js Actions module makes use of the Drupal Core module, Trigger, and adds a new Action type that allows for real time notifications to be sent for various Trigger events. Check out this lesson to see it all in action!
In this lesson, I will show you how to:
- Enable the Node.js Actions module
- Explore the various notification types
- Enable notifications for users logging in and out of the site
The Node.js Subscribe module lets you configure your site to allow users to subscribe to real time notifications through your site's UI for particular content types. The Node.js Subscribe module uses the Node.js Notifications module to provide the UI for the notifications, which we covered in Node.js Notifications Module.
In this lesson, I will show you how to:
- Enable Node.js Subscribe
- Set permissions to allow users to subscribe to content
- Subscribe to some content and see Node.js Subscribe in action
Have you ever wanted to watch the "Recent Log Messages" page of Drupal load automatically? This module can be really helpful if you'd like to do just that.
In this lesson, I will show you how to:
- Enable Node.js Watchdog module
- Generate and watch log messages in real time
The Node.js Integration module has a number of other contributed modules that depend on it. Node.js Checker is one such module. We'll take a look at how this is set up with the Node.js Integration module by adding a dependency to our Node.js server configuration, and then see it all in action!
In this lesson, I will show you how to:
- Install the Node.js Checker module
- Enable the extension in the Node.js server configuration
- Configure the Node.js Checker block
Additional resources
Once you're happy with your Node.js setup in a local development environment, there are some further steps to take before running this set up in a production environment.
While not a requirement, I would highly recommend you use an SSL certificate, and configure your Node.js application and the Drupal Node.js module to run in HTTPS. You can read more about SSL certificates at The Linux Documentation Project.
Up until this point, we have been starting our Node.js application manually, from the command line. This is not a good method for a production environment, so we'll use PM2 to manage the running of our application.
In this lesson, I will show you how to:
- Install PM2, a Node.js module to manage your Node applications
- Configure PM2
- Add SSL configuration for the Node.js server
- Start up our Node.js application with PM2
Additional resources
Decoupled Drupal
CourseIn this tutorial we'll begin building our simple Javascript blog application. Starting with Bootstrap templates, we'll use a Javascript implementation of the Twig template language to make our blog dynamic. In the course of doing so, we'll learn about Cross Origin Resource Sharing (or CORS). We will also begin to identify some common implementation patterns in our Javascript, and start to refactor our code to improve its organization.
Self-check challenge: Create another sidebar block in our blog that pulls data from Open Weather Map to display the current temperature in your city.
Additional resources
Building a traditionally "coupled" Drupal site provides us with a lot of functionality we've so far taken for granted when building our simple blog.
This lesson attempts to remedy some of that by: building a functional pager and a post archive.
We'll also make our blog into an actual Single Page Application (or SPA) by using the client-side router provided by Backbone.js
Self-check challenge: Add a form with select list elements that filter posts (instead of relying on the sidebar links).
Additional resources
One of the historic complaints—and drawbacks—of client-side Javascript applications is that they aren't SEO-friendly. While Google's crawler, in particular, is starting to execute Javascript on pages it indexes, in this tutorial, we'll take a look at a couple other of methods of mitigating this issue.
In particular we'll learn about:
- Prerender.io
- What is Isomorphic Javascript?
- Writing a server with Express.js
Self-check question: In addition to SEO, what are some other benefits of isomorphic javascript?
Additional resources
Prerender.io
Express.js
What is an isomorphic application? — by Juampy NR on Lullabot.com
Markup in Drupal
CourseIn this tutorial, I will explain what a base, or parent, theme is in Drupal and why it can be advantageous to use it in theming. We'll take a look at what is commonly provided by a base theme, including discussing what a "starter kit" is and how it is intended to be used.
Additional resources
Zen is a base, or parent, theme for Drupal that features lean, semantic HTML5 markup and a starter kit for custom theme development. In this tutorial, we will install Zen and create a subtheme for custom theme development using Drush. I use the Drush command provided by Zen because of all of the tedious renaming required when cloning the "STARTERKIT" into a subtheme. The Drush command provided by Zen automates this and makes it a relatively painless process. If you need to install Drush, see our related video tutorial, Installing Drush with Composer, or read the instructions for installation on the Drush web site.
In the next tutorial, I'll briefly explain why you might want to use a base theme and when it makes the most sense to do so. After that, I will walk through and highlight some of the HTML5 semantic markup in Zen's template files, contrasting the markup with the corresponding template files in the core Drupal 7 theme, Bartik.
Other tutorials in the Markup in Drupal series also use a subtheme of Zen, called zendemo, as a theme for the demo site. This was done to demonstrate how markup is first and foremost affected by the theme. It was also done to show how using a base theme that uses semantic HTML5 markup can be advantageous if you want to use HTML5 elements in the built-out components and pages of your Drupal site.
To follow along, download the latest version of Drupal 7, and follow the instructions in the video for installing Zen and a creating a subtheme.
In the downloads section below you'll find a database and files downloads, which is the state of the site after this tutorial, with Zen and the subtheme "zendemo" installed.
Additional resources
In this tutorial, I will take you on a tour of some of the template files included with Zen and highlight how HTML5 semantic markup was incorporated into the markup of several different template files.
Additional resources
Zen — Drupal.org
Zen documentation — Drupal.org
HTML5 Developer Guide — MDN
This is a review what I covered in the previous tutorials in this series about Zen, including how to use Zen as a base or parent theme, why you might use a base theme in theme development, how HTML5 markup is included in Zen's template files, and how to install Zen and create a subtheme for your own custom development.
Additional resources
Now let’s take a look at how we can configure fields to use semantic markup using the Fences module. In this tutorial, we’ll install and enable Fences module using Drush. Then we’ll take a look at the configuration settings for the module. Next we’ll hop into the field settings form for the body field and select an HTML5 tag as a new markup wrapper. Finally, we’ll take a look at how Fences field settings configuration carries over to Views and how we can override Fences markup in Views' field settings.
Additional resources
This next set of tutorials relates to controlling markup in Drupal when using the Views module. We’ll cover:
- What affects markup in Views
- Selecting an appropriate Views display format as a starting point for markup output
- Customizing field markup
- Customizing wrapper selectors and CSS classes
- Accessing theming information in Views
- Overriding Views template files
Additional resources
One thing that affects markup in Views is the format that is using for the display. In this tutorial we'll take a look, step-by-step, at the Unformatted list format in Views. We'll examine its default markup, how to add custom CSS classes—and to which elements—and what it looks like to remove all of Views' default markup.
Additional resources
Continuing our look at how Views' formats affect your markup, in this tutorial we'll take a look, step-by-step, at the HTML list format in Views. We'll examine its default markup and how to add custom CSS classes to various elements.