Table of Contents for

Node.js 8 the Right Way

Wrapping Up

In this chapter, you learned how to set up a front-end project for Node.js using webpack. To style the application, you used Twitter’s Bootstrap framework.

Rather than write front-end JavaScript code to the lowest common denominator among browsers, you installed and configured TypeScript to transpile and type-check your code. Knowing how to do this, you’re now able to explore using more TypeScript features in your Node.js and front-end code.

For handling synchronous and asynchronous code flows, we doubled down on async functions paired with Promise-generating methods. You learned how to issue asynchronous HTTP requests using the fetch method.

We explored the vulnerabilities inherent in generating HTML naively with JavaScript template strings. You learned how to sidestep these vulnerabilities by using a templating library like Handlebars.

In the next chapter we’ll pull everything together. Rather than proxying Node.js APIs through the webpack dev server, we’ll have an integrated application from end to end. This will require user authentication and thinking about protected APIs.

The tasks below ask you to build on the existing b4-app project you started in this chapter. If you get stuck, check out the b4-final application in the download that accompanies this book.

Extracting Text

The B4 project described in this chapter takes all the CSS from Bootstrap and puts it in a <style> at the top of the rendered index.html file. This is typically not the way you’d do things in a production-grade project. Instead you’d put the CSS in a separate file that is loaded in with a <link> tag.

A webpack plugin called ExtractTextPlugin can help with this; it’s in the npm package extract-text-webpack-plugin. Your task is to incorporate it into this project (version 3.0.1).

After you install the package using npm, make the following changes to your webpack.config.js:

• Bring in the plugin with a call to require at the top of the file.

• Replace the use field for the CSS entry under module.rules with a call to ExtractTextPlugin.extract.

• Insert a new instance of the ExtractTextPlugin class into the plugins array.

Both the ExtractTextPlugin constructor and the call to the static method ExtractTextPlugin.extract require particular parameters. To find out exactly what they need, see the project’s README.md file.^[83]

You can also take a look at the b4-final project in the downloads that accompany this book.

Deleting Bundles

One feature of the B4 application we didn’t discuss was how to delete bundles once they were made. In this task, you’ll wire up the Delete buttons produced in the table rendered by the listBundles in app/index.ts.

To get started, navigate to the listBundles function and add this block of code.

This code selects the Delete buttons from the table and sets up a click handler for each one. The click handler extracts the data-bundle-id attribute value and passes this into a function called deleteBundle. Your job is to implement this async function.

To get you started, here’s the basic outline:

Inside the try block, your task is to implement the following:

• Use getBundles to retrieve the current list of bundles.

• Find the index of the selected bundleId in the list. (If there is no matching bundle, throw an exception explaining the problem.)

• Issue an HTTP DELETE request for the specified bundleId using fetch.

• Remove the bundle from the list by calling splice, passing in the found index.

• Render the updated list using listBundles and show a success message using showAlert.

If any errors occur in the above sequence, they’ll show up in the catch block and show up as an alert. Good luck!