Make a copy of your solution for the previous lab and store it under lab11. Note that as with previous labs, some of the configuration in this lab is version-dependent so we suggest that you integrate the package.json file provided in the course repo lab 11 as you did in lab 9.

Now, add a production configuration using Webpack as follows.

1. You can skip this step if you’ve integrated the suggested lab 11 package.json fild discussed above. If still necessary, install some new tools using the Node Package Manager (npm).

   npm install autoprefixer extract-text-webpack-plugin --save

2. Add a separate Webpack config file for production by copying webpack.config.js to a new file, webpack.production.config.js, and making the following updates.

   var webpack = require('webpack');
   var HtmlWebpackPlugin = require('html-webpack-plugin')
   var ExtractTextPlugin = require('extract-text-webpack-plugin');
   
   module.exports = {
       entry: [ … ],
       output: { … },
       module: { … },
       postcss: [
           require('autoprefixer')
       ],
       plugins: [
           new webpack.DefinePlugin({
               'process.env':{
                   'NODE_ENV': JSON.stringify('production')
               }
           }),
           new HtmlWebpackPlugin({template: __dirname + "/app/index.tmpl.html"}),
           new webpack.HotModuleReplacementPlugin()
           new webpack.optimize.OccurenceOrderPlugin(),
           new webpack.optimize.UglifyJsPlugin(),
           new ExtractTextPlugin("[name]-[hash].css")
       ]
       remove the development server configuration...
   };

   Note that this:
   • adds process environment variable for “production” mode.
   • removes hot module replacement.
   • adds occurence order, uglification, extract text and auto-prefixing.

3. Add scripts to package.json for production mode.

   {
     "name": "server",
     old settings...
       "scripts": {
           "build": "webpack --progress",
           "dev": "node server.js & webpack-dev-server --progress",
           "install": "webpack --progress --config ./webpack.production.config.js",
           "start": "node server.js"
       },
     old settings...
   }

   Note that these scripts use default npm names, so they can be run by saying npm install and npm start. Note also that the install script will still install the module dependencies as needed.

4. If necessary, (re)set the MongoDB password in the environment variable as you did in the previous lab.

The server and application should run as they did before and the new install/start scripts should run a production version of the system. When you’ve confirmed that they do, consider the following:

1. Compare and contrast your development and production deployments and explain how each is designed.
2. List the optimizations you’ve configured for this production version and, if possible, find evidence of then in the deployed application files.

Save (one-to-two-sentence summaries of) your answers to these questions in a lab11.txt file in the root of your lab repo.

Prepare and deploy your application as follows.

1. Auto-deploys are easy to configure, but Heroku requires that your app be stored in the root directory of your repo, which currently isn’t the case with your cs336 repo. To address this issue, use Git subtree branches by doing the following from the root directory of your cs336 GitHub repo.

   1. Copy your .gitignore file into your lab11 sub-directory. This is not strictly necessary, but it will allow you to test your production branch locally before deploying it.

   2. Create a new production branch for this lab (production11) in your repo based (only) on your solution sub-directory for this lab.

      git subtree split --branch production11 --prefix your-lab11-sub-directory/

   3. Push your updated repo, including the new branch, to GitHub.

      git push origin --all

      Note that the copied .gitignore file will prevent dependent files/directories from being committed to the repo.

   You should now be able to see the new branch on GitHub. Switch to it and verify that only the lab11 files/folders are in the root. You can check this locally as well by checking out the new branch (git checkout production11) and listing the directory. Be sure to go back to the master branch before making updates, etc. (git checkout master).

2. Create a new NodeJS application on Heroku and configure it as follows.

   1. Go to the application “Settings” tab and set the MongoDB password as a config variable. Give it the same name that you used in UNIX in the previous lab.

   2. Configure your Heroku configuration to pull your app from GitHub as follows.

      • Set the “Deploy”→“Deployment method” to GitHub.
      • “Connect” to the appropriate GitHub repo.
      • You can either enable “Automatic Deploys” from the appropriate GitHub branch (production11) or do the deploys manually.

      Henceforth, any new code pushed to the production11 branch will be auto-deployed to Heroku.

   3. Save the URL of your Heroku deployment so that you can include it in your lab11.txt below.

Heroku should now see the new pushed code on GitHub and deploy it to your assigned Heroku URL. Verify that the new deployment works in the same way and uses the same database. Note that it can take several minutes to auto-deploy new changes to the production branch. When you’ve confirmed that it does, consider the following:

1. What advantage is there is deploying an application to a PaaS tool like Heroku?
2. How does Heroku know how to install and run your application (after pulling it from the specified branch on GitHub)?
3. Include the URL of your deployed Heroku service here.

Save (one-to-two-sentence summaries of) your answers to these questions in your lab11.txt file.