Table of Contents for
Node.js 8 the Right Way

Version ebook / Retour

Cover image for bash Cookbook, 2nd Edition Node.js 8 the Right Way by Jim Wilson Published by Pragmatic Bookshelf, 2018
  1. Title Page
  2. Node.js 8 the Right Way
  3. Node.js 8 the Right Way
  4. Node.js 8 the Right Way
  5. Node.js 8 the Right Way
  6.  Acknowledgments
  7.  Preface
  8. Why Node.js the Right Way?
  9. What’s in This Book
  10. What This Book Is Not
  11. Code Examples and Conventions
  12. Online Resources
  13. Part I. Getting Up to Speed on Node.js 8
  14. 1. Getting Started
  15. Thinking Beyond the web
  16. Node.js’s Niche
  17. How Node.js Applications Work
  18. Aspects of Node.js Development
  19. Installing Node.js
  20. 2. Wrangling the File System
  21. Programming for the Node.js Event Loop
  22. Spawning a Child Process
  23. Capturing Data from an EventEmitter
  24. Reading and Writing Files Asynchronously
  25. The Two Phases of a Node.js Program
  26. Wrapping Up
  27. 3. Networking with Sockets
  28. Listening for Socket Connections
  29. Implementing a Messaging Protocol
  30. Creating Socket Client Connections
  31. Testing Network Application Functionality
  32. Extending Core Classes in Custom Modules
  33. Developing Unit Tests with Mocha
  34. Wrapping Up
  35. 4. Connecting Robust Microservices
  36. Installing ØMQ
  37. Publishing and Subscribing to Messages
  38. Responding to Requests
  39. Routing and Dealing Messages
  40. Clustering Node.js Processes
  41. Pushing and Pulling Messages
  42. Wrapping Up
  43. Node.js 8 the Right Way
  44. Part II. Working with Data
  45. 5. Transforming Data and Testing Continuously
  46. Procuring External Data
  47. Behavior-Driven Development with Mocha and Chai
  48. Extracting Data from XML with Cheerio
  49. Processing Data Files Sequentially
  50. Debugging Tests with Chrome DevTools
  51. Wrapping Up
  52. 6. Commanding Databases
  53. Introducing Elasticsearch
  54. Creating a Command-Line Program in Node.js with Commander
  55. Using request to Fetch JSON over HTTP
  56. Shaping JSON with jq
  57. Inserting Elasticsearch Documents in Bulk
  58. Implementing an Elasticsearch Query Command
  59. Wrapping Up
  60. Node.js 8 the Right Way
  61. Part III. Creating an Application from the Ground Up
  62. 7. Developing RESTful Web Services
  63. Advantages of Express
  64. Serving APIs with Express
  65. Writing Modular Express Services
  66. Keeping Services Running with nodemon
  67. Adding Search APIs
  68. Simplifying Code Flows with Promises
  69. Manipulating Documents RESTfully
  70. Emulating Synchronous Style with async and await
  71. Providing an Async Handler Function to Express
  72. Wrapping Up
  73. 8. Creating a Beautiful User Experience
  74. Getting Started with webpack
  75. Generating Your First webpack Bundle
  76. Sprucing Up Your UI with Bootstrap
  77. Bringing in Bootstrap JavaScript and jQuery
  78. Transpiling with TypeScript
  79. Templating HTML with Handlebars
  80. Implementing hashChange Navigation
  81. Listing Objects in a View
  82. Saving Data with a Form
  83. Wrapping Up
  84. 9. Fortifying Your Application
  85. Setting Up the Initial Project
  86. Managing User Sessions in Express
  87. Adding Authentication UI Elements
  88. Setting Up Passport
  89. Authenticating with Facebook, Twitter, and Google
  90. Composing an Express Router
  91. Bringing in the Book Bundle UI
  92. Serving in Production
  93. Wrapping Up
  94. Node.js 8 the Right Way
  95. 10. BONUS: Developing Flows with Node-RED
  96. Setting Up Node-RED
  97. Securing Node-RED
  98. Developing a Node-RED Flow
  99. Creating HTTP APIs with Node-RED
  100. Handling Errors in Node-RED Flows
  101. Wrapping Up
  102. A1. Setting Up Angular
  103. A2. Setting Up React
  104. Node.js 8 the Right Way

Bringing in the Book Bundle UI

Now that you have your Router implemented and protected by authentication checks, it’s time to tack on the UI components to make it work end to end. The code for this is quite similar to the UI code you developed in Chapter 8, ​Creating a Beautiful User Experience​. And remember that you can review the b4-final application in the downloads that accompany this book, which include all of the code as well.

Open your index.ts file for editing. You’ll need a couple of methods—the first of which is getBundles. Add this code toward the top of the file, right after fetchJSON:

fortify/b4/app/index.ts
​ ​const​ getBundles = ​async​ () => {
​  ​const​ bundles = ​await​ fetchJSON(​'/api/list-bundles'​);
​  ​if​ (bundles.error) {
​  ​throw​ bundles.error;
​  }
​  ​return​ bundles;
​ };

In the last chapter, the getBundles method called out to Elasticsearch directly over the proxy provided by webkit-dev-server. This time we’re using fetchJSON to hit the /list-bundles route that you added to bundle.js.

Next, create an addBundle async function after getBundles. You can start with the code from ​Saving Data with a Form​, except that you should use fetchJSON rather than calling fetch directly.

After addBundle, insert the following listBundles function. This will be called to render the #list-bundles view.

fortify/b4/app/index.ts
​ ​const​ listBundles = bundles => {
​  ​const​ mainElement = document.body.querySelector(​'.b4-main'​);
​ 
​  mainElement.innerHTML =
​  templates.addBundleForm() + templates.listBundles({bundles});
​ 
​  ​const​ form = mainElement.querySelector(​'form'​);
​  form.addEventListener(​'submit'​, event => {
​  event.preventDefault();
​  ​const​ name = form.querySelector(​'input'​).value;
​  addBundle(name);
​  });
​ };

And finally, you’ll need to add this #list-bundles case to the switch statement inside of the showView method.

fortify/b4/app/index.ts
​ ​case​ ​'#list-bundles'​:
​  ​try​ {
​  ​const​ bundles = ​await​ getBundles();
​  listBundles(bundles);
​  } ​catch​ (err) {
​  showAlert(err);
​  window.location.hash = ​'#welcome'​;
​  }
​  ​break​;

When rendering the #list-bundles view, first we grab the user’s book bundles using the getBundles method you just added. Then we send that collection to the listBundles method for rendering using the related templates.

If something went wrong (for example, if the session timed out), then the rejected Promise returned by getBundles will become a thrown exception. The catch clause ensures that we notify the user of the error and send him back to the welcome screen.

Save your index.ts if you haven’t already, and nodemon should acknowledge the changes. If you head back to http://b4.example.com:60900, everything should be in place to create and list book bundles associated with your account once you sign in.

Whew! That was a lot of work—but such is the nature of software development.

Filling in more of the behavior of the app will be left as an exercise for the reader. But before we close out this chapter, let’s talk about serving in production.