Lesson 11 rewrite

lessons/11-productionish-server/README.md

@@ -9,25 +9,35 @@ Webpack dev server is not a production server. Let's make a production
 server and a little environment-aware script to boot up the right server
 depending on the environment.
 
+Firstly, we will need to move a few files around. When in production, we don't want the user to be able to navigate around our root folder and see files such as `package.json`. To combat this, we will create a new public folder and serve everything we want the user to be able to access from there.
+
+1. make a `public` directory.
+2. Move `index.html` and `index.css` into it.
+
+We now have to change a few things to work with this new `public` directory.
+
 Let's install a couple modules:
 
 ```
 npm install express if-env compression --save
 ```
 
-First, we'll use the handy `if-env` in `package.json`.  Update your
+We'll make use of the handy `if-env` in `package.json`.  Update your
 scripts entry in package.json to look like this:
 
 ```json
 // package.json
 "scripts": {
   "start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev",
-  "start:dev": "webpack-dev-server --inline --content-base . --history-api-fallback",
+  "start:dev": "webpack-dev-server --inline --content-base public --history-api-fallback",
   "start:prod": "webpack && node server.js"
 },
 ```
+When you run `npm start` it checks if the value of our `NODE_ENV` environment variable is
+`production`. If yes, it runs `npm run start:prod`, if not, it runs
+`npm run start:dev`. We have also added that the content-base of `start:dev` is the `public` directory that we just created.
 
-In the root directly, go open up `webpack.config.js` and add the publicPath '/' as per below:
+In the root directly, open up `webpack.config.js` and add the publicPath '/' as per below:
 ```
 // webpack.config.js
   output: {
@@ -36,13 +46,10 @@ In the root directly, go open up `webpack.config.js` and add the publicPath '/'
     publicPath: '/'
   },
 ```
+We have now said a public folder will be the destination folder
+of the `bundle.js` file.
 
-When you run `npm start` it checks if the value of our `NODE_ENV` environment variable is
-`production`. If yes, it runs `npm run start:prod`, if not, it runs
-`npm run start:dev`.
-
-Now we're ready to create a production server with Express and add a new file at root dir. Here's a
-first attempt:
+Now we're ready to create a production server with Express! Add a new file in the root dir called `server.js` with the following code:
 
 ```js
 // server.js
@@ -51,12 +58,12 @@ var path = require('path')
 
 var app = express()
 
-// serve our static stuff like index.css
-app.use(express.static(__dirname))
+// serve our static stuff from the public directory
+app.use(express.static(path.join(__dirname, 'public')))
 
-// send all requests to index.html so browserHistory in React Router works
+// send all requests to public/index.html so browserHistory in React Router works
 app.get('*', function (req, res) {
-  res.sendFile(path.join(__dirname, 'index.html'))
+  res.sendFile(path.join(__dirname, 'public', 'index.html'))
 })
 
 var PORT = process.env.PORT || 8080
@@ -73,46 +80,7 @@ NODE_ENV=production npm start
 # SET "NODE_ENV=production" && npm start
 ```
 
-Congratulations! You now have a production server for this app. After
-clicking around, try navigating to [http://localhost:8080/package.json](http://localhost:8080/package.json).
-Whoops.  Let's fix that. We're going to shuffle around a couple files and
-update some paths scattered across the app.
-
-1. make a `public` directory.
-2. Move `index.html` and `index.css` into it.
-
-Now let's update `server.js` to point to the right directory for static
-assets:
-
-```js
-// server.js
-// ...
-// add path.join here
-app.use(express.static(path.join(__dirname, 'public')))
-
-// ...
-app.get('*', function (req, res) {
-  // and drop 'public' in the middle of here
-  res.sendFile(path.join(__dirname, 'public', 'index.html'))
-})
-```
-
-We also need to tell webpack to build to this new directory:
-
-```js
-// webpack.config.js
-// ...
-output: {
-  path: 'public',
-  // ...
-}
-```
-
-And finally (!) add it to the `--content-base` argument to `npm run start:dev` script:
-
-```json
-"start:dev": "webpack-dev-server --inline --content-base public --history-api-fallback",
-```
+Congratulations! You now have a basic production server for this app!
 
 If we had the time in this tutorial, we could use the `WebpackDevServer`
 API in a JavaScript file instead of the CLI in an npm script and then