Appendix B. Running the production build

In this appendix, you’ll learn how to get the production build of the Hacker News application running locally.

B.1 Understanding the production build

The Hacker News application has two build pipelines—production and development. The two different build pipelines exist because you want to produce different files depending on whether you’re developing or serving the app over HTTP.

The development build creates JavaScript files with source maps and hot module replacement. You can run the development build on a dev server by using the serve npm script as follows:

npm run serve

Definition

Hot module replacement updates modules in the browser without losing state when you make changes to the code. You can read about hot module replacement on the webpack website: http://mng.bz/NAAx.

The production build minimizes the JavaScript to make the final bundle size as small as possible. This app is designed to be served over HTTP, so the fewer bytes the better. There isn’t a server to serve the production files, so to run the production build you need to generate the build files and serve it over HTTP.

B.2 Running the Hacker News production build locally

To build the Hacker News app for production, you need to run the npm build script. In the Hacker News directory, run the following command in the command line to create the production build:

npm run build

This will bundle your project with webpack. The built files including index.html are generated in the dist folder.

You can create a server using the http-server Node module. The first thing to do is install http-server globally:

npm install http-server -g

Change into the dist folder with cd. Then run the simple server as follows:

http-server

This will start a server listening on port 8080. If you get an [Errno 48] error, port 8080 is busy. You can change the port number to something else and try again, as shown next:

http-server –p 1234

When the server is running, you’ll see a Starting up http-server, serving ./ message. Open a browser and go to http://localhost:8000. This is your application!

Deploying the application to production is beyond the scope of this tutorial. You could choose hundreds of ways to host your application, and choosing a provider is up to you.