From 81801f512f4bfc7d930015277fbb03990a22f71a Mon Sep 17 00:00:00 2001 From: Svensk-Xavier Date: Sat, 1 Oct 2016 13:53:11 +1000 Subject: [PATCH 1/6] lesson 11 instructions fix --- lessons/11-productionish-server/README.md | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/lessons/11-productionish-server/README.md b/lessons/11-productionish-server/README.md index 30582eba..e67f70af 100644 --- a/lessons/11-productionish-server/README.md +++ b/lessons/11-productionish-server/README.md @@ -26,6 +26,9 @@ scripts entry in package.json to look like this: "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`. In the root directly, go open up `webpack.config.js` and add the publicPath '/' as per below: ``` @@ -36,10 +39,12 @@ In the root directly, go open up `webpack.config.js` and add the publicPath '/' publicPath: '/' }, ``` +Note that now we have designated a public folder will be the destination folder +of the `bundle.js` file, because of this, we'll need to reorganise our files a little, +namely: -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`. +1. make a `public` directory. +2. Move `index.html` and `index.css` into it. Now we're ready to create a production server with Express and add a new file at root dir. Here's a first attempt: @@ -78,10 +83,7 @@ clicking around, try navigating to [http://localhost:8080/package.json](http://l 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 +Let's update `server.js` to point to the right directory for static assets: ```js From ad25bc54e66cc37f4acbe93706b11e996cd40be9 Mon Sep 17 00:00:00 2001 From: Svensk-Xavier Date: Sat, 1 Oct 2016 14:08:30 +1000 Subject: [PATCH 2/6] reorganizing tutorial 11 to reduce risk of error by student --- lessons/11-productionish-server/README.md | 50 +++++------------------ 1 file changed, 10 insertions(+), 40 deletions(-) diff --git a/lessons/11-productionish-server/README.md b/lessons/11-productionish-server/README.md index e67f70af..886c04a6 100644 --- a/lessons/11-productionish-server/README.md +++ b/lessons/11-productionish-server/README.md @@ -56,12 +56,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 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 @@ -70,6 +70,12 @@ app.listen(PORT, function() { }) ``` +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", +``` + Now run: ```sh @@ -78,43 +84,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. - -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 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 From 4dd5085fec63f368a0bc702e3e1e56028ef72e63 Mon Sep 17 00:00:00 2001 From: Svensk-Xavier Date: Sat, 1 Oct 2016 14:24:15 +1000 Subject: [PATCH 3/6] lesson 11 draft 3 --- lessons/11-productionish-server/README.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/lessons/11-productionish-server/README.md b/lessons/11-productionish-server/README.md index 886c04a6..6664d4dd 100644 --- a/lessons/11-productionish-server/README.md +++ b/lessons/11-productionish-server/README.md @@ -22,13 +22,14 @@ scripts entry in package.json to look like this: // 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`. +`npm run start:dev`. We have also added that the content-base of `start:dev` is a folder called +public that we will create soon. In the root directly, go open up `webpack.config.js` and add the publicPath '/' as per below: ``` @@ -39,15 +40,14 @@ In the root directly, go open up `webpack.config.js` and add the publicPath '/' publicPath: '/' }, ``` -Note that now we have designated a public folder will be the destination folder +We have now said a public folder will be the destination folder of the `bundle.js` file, because of this, we'll need to reorganise our files a little, namely: 1. make a `public` directory. 2. Move `index.html` and `index.css` into it. -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! Start by adding a new file at root dir called `server.js`: ```js // server.js @@ -59,7 +59,7 @@ var app = express() // 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, 'public', 'index.html')) }) From 9890866d1191153966dbd9e08aff1bd62f9d576f Mon Sep 17 00:00:00 2001 From: Svensk-Xavier Date: Sat, 1 Oct 2016 14:40:46 +1000 Subject: [PATCH 4/6] lesson 11 draft 4 --- lessons/11-productionish-server/README.md | 28 ++++++++++------------- 1 file changed, 12 insertions(+), 16 deletions(-) diff --git a/lessons/11-productionish-server/README.md b/lessons/11-productionish-server/README.md index 6664d4dd..49582a29 100644 --- a/lessons/11-productionish-server/README.md +++ b/lessons/11-productionish-server/README.md @@ -9,13 +9,20 @@ 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 @@ -28,10 +35,9 @@ scripts entry in package.json to look like this: ``` 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 a folder called -public that we will create soon. +`npm run start:dev`. We have also added that the content-base of `start:dev` is a folder called public that we have 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: { @@ -41,11 +47,7 @@ In the root directly, go open up `webpack.config.js` and add the publicPath '/' }, ``` We have now said a public folder will be the destination folder -of the `bundle.js` file, because of this, we'll need to reorganise our files a little, -namely: - -1. make a `public` directory. -2. Move `index.html` and `index.css` into it. +of the `bundle.js` file. Now we're ready to create a production server with Express! Start by adding a new file at root dir called `server.js`: @@ -70,13 +72,7 @@ app.listen(PORT, function() { }) ``` -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", -``` - -Now run: +Simple enough, now run: ```sh NODE_ENV=production npm start From 3b645d046ed08e2556d1ab96a20d7d0e59438855 Mon Sep 17 00:00:00 2001 From: Svensk-Xavier Date: Sat, 1 Oct 2016 14:45:25 +1000 Subject: [PATCH 5/6] fix small typo --- lessons/11-productionish-server/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lessons/11-productionish-server/README.md b/lessons/11-productionish-server/README.md index 49582a29..ce8fa3c2 100644 --- a/lessons/11-productionish-server/README.md +++ b/lessons/11-productionish-server/README.md @@ -35,7 +35,7 @@ scripts entry in package.json to look like this: ``` 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 a folder called public that we have just created. +`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, open up `webpack.config.js` and add the publicPath '/' as per below: ``` From 4929f450417db8f29ee2283e2a7dae48378bb965 Mon Sep 17 00:00:00 2001 From: Svensk-Xavier Date: Sat, 1 Oct 2016 14:55:55 +1000 Subject: [PATCH 6/6] lesson 11 draft 5 --- lessons/11-productionish-server/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/lessons/11-productionish-server/README.md b/lessons/11-productionish-server/README.md index ce8fa3c2..8163917e 100644 --- a/lessons/11-productionish-server/README.md +++ b/lessons/11-productionish-server/README.md @@ -49,7 +49,7 @@ In the root directly, open up `webpack.config.js` and add the publicPath '/' as We have now said a public folder will be the destination folder of the `bundle.js` file. -Now we're ready to create a production server with Express! Start by adding a new file at root dir called `server.js`: +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 @@ -72,7 +72,7 @@ app.listen(PORT, function() { }) ``` -Simple enough, now run: +Now run: ```sh NODE_ENV=production npm start @@ -80,7 +80,7 @@ NODE_ENV=production npm start # SET "NODE_ENV=production" && npm start ``` -Congratulations! You now have a production server for this app! +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