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
Appendix
2
Setting Up React
React is a front-end-component rendering framework by Facebook.[116] Teaching how to construct UIs with React is outside the scope of this book, but here you’ll learn how to wire it into a webpack-built Node.js project. To learn to use React, I recommend stepping through the Tic-Tac-Toe tutorial.[117]
Fortunately, it doesn’t take much code to get started using React, though you will need a transpiler. React typically relies on transpiling with Babel, but here we’ll use TypeScript to maintain consistency with the rest of the UI code in the book. The differences between React and TypeScript are summarized in Transpiling with TypeScript.
In the code downloads that accompany this book, you’ll find a directory called extra/react-webpack. This directory contains a very simple React project that builds with webpack and TypeScript.
Like other webpack projects in this book, the react-webpack project runs with webpack-dev-server through npm. You can start it up and take a look if you’re interested in poking around.
| | $ cd react-webpack |
| | $ npm start |
| | |
| | > react-webpack@1.0.0 start ./extra/react-webpack |
| | > webpack-dev-server |
| | |
| | Project is running at http://localhost:61200/ |
| | webpack output is served from / |
| | Content not from webpack is served from ./extra/react-webpack/dist |
| | ts-loader: Using typescript@2.3.2 and ./extra/react-webpack/tsconfig.json |
| | Hash: 810e5499eb5e676ce562 |
| | Version: webpack 2.4.1 |
This is the simplest React project I could come up with that builds with webpack. You can use it as a reference implementation to compare against, or as a skeleton project rather than setting everything up yourself.
Here’s a listing of that project’s contents.
| | $ cd react-webpack |
| | $ tree -I node_modules --dirsfirst |
| | . |
| | ├── src |
| | │ ├── index.html |
| | │ ├── index.tsx |
| | │ └── vendor.ts |
| | ├── package.json |
| | ├── package-lock.json |
| | ├── tsconfig.json |
| | └── webpack.config.js |
Notice the now-familiar package.json, tsconfig.json, and webpack.config.json files. We’ll discuss these in a bit, but first let’s look at the src, which contains the project source code files (as per React’s convention).
The src/vendor.ts file includes links to Bootstrap’s CSS and JavaScript code. That way webpack will create a separate bundle file for those assets. For more on how this works, see webpack’s documentation on code splitting.[118]
Next, notice the index.tsx. This is the main entry point of the application. It pulls together the React components and injects them into an element defined in the index.html file. index.html is used as a base template for HtmlWebpackPlugin to load the main application component.
The reason for tsx instead of just ts is that React uses JSX to allow HTML literal content inside of JavaScript files.[119] TSX is the TypeScript flavor of JSX.
To build a React-based project using TypeScript, here are the packages you’ll need to add to your project:
- @types/react @16.0.5
- @types/react-dom @15.5.4
- react @15.6.1
- react-dom @15.6.1
- typescript @2.3.2
Since React is developed in regular JavaScript, the TypeScript typings are implemented separately and distributed under the @types/ prefix.
For webpack, you’ll need the familiar cohort of packages:
- css-loader @0.28.0
- file-loader @0.11.1
- html-webpack-plugin @2.28.0
- style-loader @0.16.1
- ts-loader @2.0.3
- url-loader @0.5.8
- webpack @2.4.1
- webpack-dev-server @2.4.3
tsconfig.json doesn’t need anything special to support React above and beyond what you used in Chapter 8, Creating a Beautiful User Experience. However, webpack.config.js requires one minor tweak. In the rules section, the test for ts files needs to be extended to match tsx files as well.
| | rules: [{ |
| » | test: /\.tsx?$/, |
| | loader: 'ts-loader', |
| | },{ |
With those changes out of the way, you should be in a good spot to use React to develop the front end for your own Node.js projects. Best of luck!