Progressive Web Apps With React: Chapter 2, Getting Started with Webpack

Our project structure

So far we have been cheating, we have added script tags to get our code to run.  As our project grows this will become unwieldy and maintenance nightmare.  Let us introduce Webpack.

Welcome to Webpack

We have one goal in this section, take our JavaScript out of index.html and use Webpack to bundle and inject it.  Create a src folder, add an index.js file to it, add some code to that file  and run the following command
node_modules/.bin/webpack src/index.js public/bundle.js

Note there is no space between node_modules, and .bin.  I made that mistake when typing it it in. This command tells Webpack to take everything in the first file, and copy it to the second file.  The magic sauce here is that it takes all the dependencies required to make the first file run, and copies them also.  Now it's as simple as including that file in our index.html file, and it should work

Bundling files

Using webpack to bundle one file is a bit of overkill.  The author goes on to show us how we can use webpack to bundle multiple files by using the require syntax.

Moving our React

In this section, we get rid of all our old code, and move our react code into our index.js file.  I recommend changing the following line (Hello from react!) to something else ("This worked!"), just to verify that you have indeed moved the code and everything works as the author describes.
One concept is introduced here, and I can only assume it will be explained in later sections of the book.  The concept of var React = require('react');  If you are familiar with other programming languages, this syntax is probably familiar.  If not, then you are probably a little lost.  Essentially, we are saying take all the code in the file/class React, and add it to a variable called React.  This will allow us to do some "magical" things in the future.  I don't know what they are right now from reading this section.

Shortcuts

This section details a couple of shortcuts we can use to run our build functions, without typing in the long nasty commands we have been using.  I did find an "error" in the code as written.  The author says to put a comma after

     "build": "node_modules/.bin/webpack",
but the comma there will cause an error.  The correct line is
    "build": "node_modules/.bin/webpack"


After that, you can use yarn build to your heart's content.

Our Dev Server

I spent about an hour trying to get this code to work.  The code in the book was developed using webpack-dev-serv 2.7.1.  There are newer versions out there, and some of them are broken.  Or at least broken as described in the book.  I used this site (https://github.com/webpack/webpack-dev-server/issues/1355) to diagnose the problem.   For you sake, all you have to do is the following command
yarn add webpack-dev-server@2.7.1
instead of

yarn add webpack-dev-server
I'm not sure why the author didn't add a version number in this section for the dev server.

Webpack loaders 

Javascript got an update in 2015 called ES6.  In this book, we are going to use ES6, but older browsers are not capable of running ES6.  To get around this problem, we are going to introduce Babel.  Babel will transpile our ES6 code into ES5, and that will allow our code to run on older browsers.  The author gives a quick example of the difference between ES5 and ES6.  We are also given some new code to add to our webpack.config.js file.  I ran into an issue with the versioning again.  Luckily, the error message given by yarn was very helpful.  The command to get past this part of the code was:
yarn add babel-loader@7
After, that yarn start and everything compiled successfully.

Our first ES6

We are finally starting to use some ES6.  We removed set everything equal to a variable, and saw the use of the import statement.  We are also introduced to JSX, which is a hybrid between JavaScript and HTML.  This is a quick section, and everything just worked.

Splitting up our app

This section moves our JSX code into it's own JS file, it's a beginning of showing how we can separate our concerns, and make our app a little easier to manage in the beginning.

Hot reloading

There is a lot of hands on coding in this section.  The author gives the steps (but not a good explanation) of how to make the server "hot" reload.  If you have any experience with JavaScript, this feels like a game changer.  Hot reloading is basically, change a file, have it change on the screen.  I really like this feature of, well I'm not sure.  It's not really explained, but I feel like it's a node.js thing, not a React thing.  All in all though, the code just worked, and the feature may be more important than than the black voodoo behind it. 

Building for production

This section contains a ton of instructions for adding a production deployment to our new app.  I probably wasn't paying as much attention as was necessary for this section, but I completely missed the part where we needed to create a new webpack config file for production.  Make sure you pay attention to that part.  Other than that, everything worked pretty much as described.

Creating a custom script

This section goes over how to create a custom script that will copy all of our files from public to our build folder.  I would have preferred more explanation on why we are doing this.  I hope the author will explain further in the future. 

Making an asset manifest

The last thing in this chapter is creating a manifest of all the static assets we are generating.  The author promises that we will use this in the future.  


 



















































Comments











Post a Comment































Popular posts from this blog









Go Programming Blueprints, Chapter 2, Adding User Accounts





















A universal truth in programming is that there are relatively few unique unsolved problems.  What tasked with a new problem, always see what other solutions exist and how we can solve our new one.  In this instance, we are going to use open source solutions to auth against existing services.   Handlers all the way down  Everything we write will be http handlers.  This allows us to encapsulate objects as far down the chain as needed.    Making pretty social sign in page  We get a quick lesson on bootstrap, and why and how to use it.  There are two methods to showing our bootst rap.  We can leave it hosted on a CDN or add it to our assets folder.    Endpoints with Dynamic Paths  Go doesn't support the most robust path selections (/path/options), such as ruby on rails or Django python.  As with everything Go, there are open source packages we can use to help with this functionality.  We will use string.split to break our argument paths in the re...








Read more










Successful Big Game Hunting Chapter 10





















                Chapter 10: Short Course on Bear Hunting  As with all the short course chapters, this is a quick chapter on hunting different types of bears.  Mr. Gilchrist has several tips on the different types of bears, and tips on how to distinguish between them.  In at least one western state, there is a test on how to visually tell the difference between a grizzly bear and a black bear.      Of course he as tips on how to prepare a bear hide for for taxidermy, and how to score a bear as a trophy.  He also has several tips on how to tell if a bear is a trophy.   Favorite Quote:  "Bears often react violently to a superficial hit.  He may fall as though mortally wounded, when only hit in the paw" 








Read more