Table of Contents for
Node.js 8 the Right Way
Node.js 8 the Right Way
Published by
Pragmatic Bookshelf, 2018
- Title Page
- Node.js 8 the Right Way
- Node.js 8 the Right Way
- Node.js 8 the Right Way
- Node.js 8 the Right Way
- Acknowledgments
- Preface
- Why Node.js the Right Way?
- What’s in This Book
- What This Book Is Not
- Code Examples and Conventions
- Online Resources
- Part I. Getting Up to Speed on Node.js 8
- 1. Getting Started
- Thinking Beyond the web
- Node.js’s Niche
- How Node.js Applications Work
- Aspects of Node.js Development
- Installing Node.js
- 2. Wrangling the File System
- Programming for the Node.js Event Loop
- Spawning a Child Process
- Capturing Data from an EventEmitter
- Reading and Writing Files Asynchronously
- The Two Phases of a Node.js Program
- Wrapping Up
- 3. Networking with Sockets
- Listening for Socket Connections
- Implementing a Messaging Protocol
- Creating Socket Client Connections
- Testing Network Application Functionality
- Extending Core Classes in Custom Modules
- Developing Unit Tests with Mocha
- Wrapping Up
- 4. Connecting Robust Microservices
- Installing ØMQ
- Publishing and Subscribing to Messages
- Responding to Requests
- Routing and Dealing Messages
- Clustering Node.js Processes
- Pushing and Pulling Messages
- Wrapping Up
- Node.js 8 the Right Way
- Part II. Working with Data
- 5. Transforming Data and Testing Continuously
- Procuring External Data
- Behavior-Driven Development with Mocha and Chai
- Extracting Data from XML with Cheerio
- Processing Data Files Sequentially
- Debugging Tests with Chrome DevTools
- Wrapping Up
- 6. Commanding Databases
- Introducing Elasticsearch
- Creating a Command-Line Program in Node.js with Commander
- Using request to Fetch JSON over HTTP
- Shaping JSON with jq
- Inserting Elasticsearch Documents in Bulk
- Implementing an Elasticsearch Query Command
- Wrapping Up
- Node.js 8 the Right Way
- Part III. Creating an Application from the Ground Up
- 7. Developing RESTful Web Services
- Advantages of Express
- Serving APIs with Express
- Writing Modular Express Services
- Keeping Services Running with nodemon
- Adding Search APIs
- Simplifying Code Flows with Promises
- Manipulating Documents RESTfully
- Emulating Synchronous Style with async and await
- Providing an Async Handler Function to Express
- Wrapping Up
- 8. Creating a Beautiful User Experience
- Getting Started with webpack
- Generating Your First webpack Bundle
- Sprucing Up Your UI with Bootstrap
- Bringing in Bootstrap JavaScript and jQuery
- Transpiling with TypeScript
- Templating HTML with Handlebars
- Implementing hashChange Navigation
- Listing Objects in a View
- Saving Data with a Form
- Wrapping Up
- 9. Fortifying Your Application
- Setting Up the Initial Project
- Managing User Sessions in Express
- Adding Authentication UI Elements
- Setting Up Passport
- Authenticating with Facebook, Twitter, and Google
- Composing an Express Router
- Bringing in the Book Bundle UI
- Serving in Production
- Wrapping Up
- Node.js 8 the Right Way
- 10. BONUS: Developing Flows with Node-RED
- Setting Up Node-RED
- Securing Node-RED
- Developing a Node-RED Flow
- Creating HTTP APIs with Node-RED
- Handling Errors in Node-RED Flows
- Wrapping Up
- A1. Setting Up Angular
- A2. Setting Up React
- Node.js 8 the Right Way
Bringing in Bootstrap JavaScript and jQuery
So far, the web application we’ve been building brings in Bootstrap CSS for styling, but does not include the Bootstrap JavaScript that implements the functionality of a variety of Bootstrap components. In this section we’ll pull that in, as well as take care of a few other housecleaning details. After this, we’ll be in a great place to begin developing the application proper.
The various webpack plugins we’ve been using in this chapter provide their functionality by decorating the webpack core. In like fashion, Bootstrap JavaScript works by adding its functionality to the jQuery core. Plugging in to a parent library or framework in this way has been a common pattern in the front-end JavaScript community for a long time.
What this means for us is that we need to bring in jQuery for Bootstrap behaviors to work. The first step is to install it. Run the following command from your terminal:
| | $ npm install --save-dev --save-exact jquery@3.2.1 |
Next, we need to tell webpack how to incorporate jQuery into the project. Open your webpack.config.js file and start by adding this import at the top, right after the HtmlWebpackPlugin:
| | const webpack = require('webpack'); |
This brings in the webpack module, which doubles as a namespace for built-in plugins. The one we need is the ProvidePlugin, which we can use to indicate that a particular module provides a particular JavaScript global.
In your webpack.config.js, head down to the plugins section and add a ProvidePlugin after the HtmlWebpackPlugin as follows:
| | new webpack.ProvidePlugin({ |
| | $: 'jquery', |
| | jQuery: 'jquery' |
| | }), |
This indicates that the jquery module provides the jQuery and $ global variables.
Next, open your entry.js. At the top, right after the Bootstrap CSS import line, add the following:
| | import 'bootstrap'; |
This tells webpack that entry.js depends on the bootstrap module. Like with the CSS import, we’re not setting a local variable to the returned object, because we don’t need it programmatically. Bootstrap will take care of imbuing the various page elements with their functionality behind the scenes, provided it gets loaded into the browser.
Use npm start to run your webpack dev server. Once it has started, revisit the welcome page at localhost:60800 and confirm that the close button works. Now let’s move on to adding our own application logic.