OK. Wow. It was 19 days ago that I posted these posts. Boy, how time flies. Here is a suggestion I have for the book. It does not fall under the category of errata ( instead it is an enhancement I think ). Anyway, after a couple of days going over chapters 12 and 13 and getting all the dev environment working and such ( many many thanks for this by the way, the videos that go with the book are really great! ) I spent basically a whole day trying to get the output of “npm run build” to work. And went full circle. Here is my suggestion for addition to the Production Build section of Chapter 13…
Creating a Production Build
We’re almost done. We’ve got just two more things left to do. So far, we’ve been building this app in development mode. In this mode, our code isn’t minified and some of the things run in a slow/verbose setting so that we can debug issues more easily. When it’s time to send the app live to our real users, we want the fastest and most compact solution possible. For that,
- Navigate to the helloworld folder that you have been building the helloworld app in. Find the file named “package.json”. Open the file with your favorite Text Editor…
See near the top of the file the following…
Add the line “homepage”: “.”, to the file as shown…
Save and exit the “package.json” file.
- Now, we can go back to the command line and enter the following (after stopping the build by pressing Ctrl+C):
npm run build
The script takes a few minutes to create an optimized set of files for you. Once it has run to completion, you’ll see some confirmation text that looks as follows:
FINAL BUILD OUTPUT SCREEN SHOWN HERE.
When this has completed, you can follow the onscreen prompts to deploy it to your server or just test it locally using the popular serve node package.
Also take a moment to browse through all the files that were generated in the “build” folder inside the helloworld project folder. The end result is just plain HTML, CSS, and JS files. No JSX. No multiple JS files. We have just a single JS file that contains all the logic our app needs to work. You should be able to open the “index.html” file now with a browser directly and the web app should show and function correctly, same as in the development environment.
Thanks again for the great book an the videos. I love your humor.