vueport 0.1.0 → 0.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 45dc87f34b0a0b04c7de4f4754b968397e6a3cfa
-  data.tar.gz: 7b1e46d1c085bf4679c7db3c0c4fe7751d0b6bc8
+  metadata.gz: 147bdb73bbbd594daa855c6c32461e5b6a3b4a88
+  data.tar.gz: a84bd46db6183701c34b159fdbece981b6150f60
 SHA512:
-  metadata.gz: fdd177551b9f4b464ce3ac8076e8187fb9bf8a6494698f3b639f987cec6f2c6cc99af1930f6bb39c9063cfdda40300099cc4059a34e3c45a6ad0c4d488cea1af
-  data.tar.gz: 1463e24bf2e439afb5aab46a9ea47f450f4ef760e5ae04f078175f71ff973eef9f757fa397c4a86b95498f720183ea8828dd900806792d4d97b4195e503cb96f
+  metadata.gz: 72e0085bd54a0eb721244dbbbea89f589334015f6f20a8ec96b2283b35dc3039e0f586944d4b3cf5fb521a613ee5c066f292a2e4079ff51b19cb4f347df5b130
+  data.tar.gz: 4942208142a73c3458686df5e5e19b6bca3574bdf96f8cd5998fc36e65f10e1020c9e859d106d1249cffe67136df95a9d2ff89976c6d434bfc448445b79b80a3

data/Gemfile

@@ -4,6 +4,6 @@ source 'https://rubygems.org'
 gemspec
 
 group :test do
+  gem 'pry'
   gem 'pry-byebug'
-  gem 'pry-rails'
 end

data/README.md

@@ -110,13 +110,15 @@ _Check out the WebpackRails gem for information on its configuration._
 
 ## How does it work?
 
-To see how WebpackRails works, take a look at [this section of the readme](https://github.com/mipearson/webpack-rails#how-it-works).
+What Vueport gives you is effectively 3 applications:
 
-Vueport extends the functionality of WebpackRails by adding a few extra features:
+- Your base rails app
+- A Node app for server side rendering in production (in /renderer)
+- A Node app for running webpack in development
 
-- Webpack setup to read and compile Vue components
-- Webpack setup to enable HMR (Hot Module Reloading) for an A+ development experience
-- Server Side rendering in production.
+These have been set up so that they can be built for production completely separately to avoid complicated pipelines—for example, you can run these 3 application using Docker completely separately meaning you don't need Ruby and Node in a single Dockerfile.
+
+For more information on how Webpack has been integrated with Rails, check out [this section of the Webpack Rails readme](https://github.com/mipearson/webpack-rails#how-it-works).
 
 ### Server Side Rendering (SSR)
 
@@ -135,7 +137,7 @@ For a Vue.js and React [collaborative](https://github.com/vuejs/vuejs.org/issues
 ## To Do
 
 - [x] Handle SSR
-- [ ] Make webpack config more like the config from the [Vue CLI template](https://github.com/vuejs-templates/webpack/tree/master/template/build)
+- [x] Make webpack config more like the config from the [Vue CLI template](https://github.com/vuejs-templates/webpack/tree/master/template/build)
 - [ ] Optimize SSR interaction with NodeJS
 - [ ] JS Component test setup
 
@@ -151,8 +153,8 @@ Bug reports and pull requests are welcome on GitHub at https://github.com/samtga
 
 ## Thanks
 
-- Many thanks to [Evan You](https://github.com/yyx990803) and the VueJS for sustaining such a vibrant and supporting community around Vue JS
-- Many thanks also to [mipearson](https://github.com/mipearson) for his WebpackRails gem which this gem completely cannibalizes
+- Many thanks to [Evan You](https://github.com/yyx990803) and the VueJS team for sustaining such a vibrant and supportive community around Vue JS
+- Many thanks also to [mipearson](https://github.com/mipearson) for his WebpackRails gem on which this gem relies.
 
 ## License
 

data/lib/generators/vueport/install_generator.rb

@@ -1,166 +1,97 @@
 module Vueport
   class InstallGenerator < ::Rails::Generators::Base
-    source_root File.expand_path('../../../../example', __FILE__)
+    source_root File.expand_path('../template', __FILE__)
+
     desc 'Install extras for using Vue with WebpackRails'
 
     def add_webpack_rails
       gem 'webpack-rails'
-    end
-
-    def bundle_and_install_webpack
-      run 'gem install webpack-rails'
-      generate 'webpack_rails:install'
+      gem 'foreman'
     end
 
     def add_to_gitignore
       append_to_file '.gitignore' do
         <<-EOF.strip_heredoc
-        npm-debug.log
+        # Added by vueport
+        /node_modules
+        /public/webpack
+        /npm-debug.log
+
+        /renderer/node_modules
+        /renderer/npm-debug.log
+        /renderer/bundle.server.js
         EOF
       end
     end
 
-    def insert_resolve
-      inject_into_file 'config/webpack.config.js', after: "root: path.join(__dirname, '..', 'webpack')" do
-        <<~HEREDOC
-        ,
-            extensions: ['', '.js', '.vue'],
-            fallback: [path.join(__dirname, '../node_modules'), path.join(__dirname, '../app/'),],
-            alias: {
-              // Use the standalone build to compile our page at runtime
-              'vue$': 'vue/dist/vue.common.js'
-            }
-        HEREDOC
-      end
-    end
-
-    def insert_module
-      inject_into_file 'config/webpack.config.js', after: "assets: true\n    })]" do
-        <<~HEREDOC
-        ,
-            // Use the necessary loaders to process our components
-            module: {
-              loaders: [
-                {
-                  test: /\.vue$/,
-                  loader: 'vue'
-                },
-                {
-                  loaders: ['babel'],
-                  test: /\.js$/,
-                  exclude: /node_modules/
-                },
-                {
-                  test: /\.css$/,
-                  loader: production ? ExtractTextPlugin.extract('vue-style', 'css') : 'style!css',
-                  fallbackLoader: 'vue-style-loader'
-                }
-              ]
-            },
-            vue: {
-              loaders: {
-                css: production ? ExtractTextPlugin.extract('vue-style', "css") : 'style!css'
-              }
-            }
-      HEREDOC
-      end
+    def copy_package_json
+      copy_file 'package.json'
     end
 
-    def update_procfile
-      remove_file 'Procfile'
-      copy_file 'Procfile.dev', 'Procfile.dev'
-      copy_file 'Procfile', 'Procfile'
+    def copy_eslint
+      copy_file '.eslintrc.js'
+      copy_file '.eslintignore'
     end
 
-    def insert_css_extract
-      inject_into_file 'config/webpack.config.js', after: "var StatsPlugin = require('stats-webpack-plugin');" do
-        <<~HEREDOC
-
-          var ExtractTextPlugin = require("extract-text-webpack-plugin");
-        HEREDOC
-      end
-
-      inject_into_file 'config/webpack.config.js', after: 'new webpack.optimize.OccurenceOrderPlugin()' do
-        <<~HEREDOC
-        ,
-            new ExtractTextPlugin('[name]-[chunkhash].css')
-      HEREDOC
-      end
+    def copy_config_files
+      directory 'vueport', 'config/vueport'
     end
 
-    def update_dev_tool
-      gsub_file 'config/webpack.config.js', 'cheap-module-eval-source-map', '#eval-source-map'
+    def copy_renderer_files
+      directory 'renderer'
     end
 
-    def create_server_config
-      copy_file 'webpack.server.js', 'config/webpack.server.js'
+    def update_procfile
+      copy_file 'Procfile.dev'
+      copy_file 'Procfile'
     end
 
     def create_setup_files
-      remove_file 'webpack/application.js'
-      copy_file 'application.js', 'webpack/application.js'
-      copy_file 'setup.js', 'webpack/setup.js'
-      copy_file 'server.js', 'webpack/server.js'
-      copy_file 'index.js', 'index.js'
-      copy_file 'babelrc', '.babelrc'
+      directory 'webpack'
+      copy_file '.babelrc'
       empty_directory 'app/components'
     end
 
-    def add_npm_scripts
-      inject_into_file 'package.json', before: '"dependencies": {' do
-        <<~HEREDOC
-        "scripts": {
-            "dev-server": "./node_modules/.bin/webpack-dev-server --hot --inline --config config/webpack.config.js --host 0.0.0.0",
-            "start": "NODE_ENV=production node ."
-          },
-
-      HEREDOC
+    def run_npm_install
+      if yarn? && yes?("Would you like me to run 'yarn' for you? [y/N]")
+        run 'yarn'
+        run 'cd renderer && yarn'
+      elsif !yarn? && yes?("Would you like me to run 'npm install' for you? [y/N]")
+        run 'npm i'
+        run 'cd renderer && npm i'
       end
     end
 
-    def add_npm_dependencies
-      inject_into_file 'package.json', after: '"webpack-dev-server": "^1.9.0"' do
-        <<~HEREDOC
-        ,
-            "body-parser": "^1.15.2",
-            "express": "^4.14.0",
-            "morgan": "^1.7.0",
-            "extract-text-webpack-plugin": "^1.0.1",
-            "vue": "^2.1.3",
-            "vue-server-renderer": "^2.1.3",
-            "babel-core": "^6.17.0",
-            "babel-loader": "^6.2.5",
-            "babel-polyfill": "^6.16.0",
-            "babel-preset-es2015": "^6.16.0",
-            "babel-preset-stage-0": "^6.16.0",
-            "css-loader": "^0.25.0",
-            "style-loader": "^0.13.1",
-            "vue-loader": "^10.0.1",
-            "vue-style-loader": "^1.0.0",
-            "vue-template-compiler": "^2.1.3"
-      HEREDOC
-      end
-    end
-
-    def run_npm_install
-      run 'npm install' if yes?("Would you like me to run 'npm install' for you (I've added a few things since last time?) [y/N]")
+    def run_bundle_install
+      run 'bundle install' if yes?("Would you like me to run 'bundle install' for you? [y/N]")
     end
 
+    # rubocop:disable Metrics/MethodLength
     def whats_next
-      # rubocop:disable Rails/Output
-      puts <<-EOF.strip_heredoc
+      say ''
+      say 'All done!', :green
+
+      say ''
+      say "I've added a few things here and there to set you up using Vue in your Rails app."
+      say "Now you're already to create your first Vue component in app/components."
+      say ''
 
-        I've added a few things here and there to set you up using Vue in your Rails app.
+      say 'To run the webpack-dev-server and rails server:'
+      say 'foreman start -f Procfile.dev', :yellow
+      say ''
 
-        Now you're already to create your first Vue component in app/components.
-        Run 'foreman start' to run the webpack-dev-server and rails server.
+      say 'For more info, see the README.md for this gem at:'
+      say 'https://github.com/samtgarson/vueport', :blue
+      say ''
 
-        See the README.md for this gem at
-        https://github.com/samtgarson/vueport
-        for more info.
-        Thanks for using Vueport!
-      EOF
-      # rubocop:enable Rails/Output
+      say 'Thanks for using Vueport!'
     end
+    # rubocop:enable Metrics/MethodLength
+
+    private
+
+      def yarn?
+        @yarn ||= `yarn -V`.present?
+      end
   end
 end

data/lib/generators/vueport/template/.eslintignore

@@ -0,0 +1,4 @@
+public/**/*.js
+config/**/*.js
+node_modules/**/*.js
+renderer/node_modules/**/*.js

data/lib/generators/vueport/template/.eslintrc.js

@@ -0,0 +1,33 @@
+module.exports = {
+  root: true,
+  parser: 'babel-eslint',
+  parserOptions: {
+    sourceType: 'module'
+  },
+  extends: 'airbnb-base',
+  // required to lint *.vue files
+  plugins: [
+    'html'
+  ],
+  // check if imports actually resolve
+  'settings': {
+    'import/resolver': {
+      'webpack': {
+        'config': 'config/vueport/webpack.base.conf.js'
+      }
+    }
+  },
+  // add your custom rules here
+  'rules': {
+    // don't require .vue extension when importing
+    'import/extensions': ['error', 'always', {
+      'js': 'never',
+      'vue': 'never'
+    }],
+    'comma-dangle': ['error', 'never'],
+    'space-before-function-paren': ['error', 'always'],
+    'semi': ['error', 'never'],
+    // allow debugger during development
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
+  }
+}

data/lib/generators/vueport/template/Procfile

@@ -0,0 +1,2 @@
+rails: bundle exec rails server
+node: cd renderer && npm run start

data/{example/Procfile → lib/generators/vueport/template/Procfile.dev}

@@ -1,2 +1,2 @@
 rails: bundle exec rails server
-webpack: npm run start
+webpack: npm run dev

data/lib/generators/vueport/template/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "vueport-example",
+  "version": "0.0.1",
+  "license": "MIT",
+  "description": "Example Rails application using Vueport and Vue single file components",
+  "main": "index.js",
+  "repository": {
+    "url": "git@github.com:samtgarson/vueport-example.git",
+    "type": "git"
+  },
+  "author": "Sam Garson <samtgarson@gmail.com>",
+  "scripts": {
+    "dev": "./node_modules/.bin/webpack-dev-server --hot --inline --config config/vueport/webpack.dev.conf --host 0.0.0.0",
+    "compile": "node config/vueport/build"
+  },
+  "dependencies": {
+    "babel-core": "^6.17.0",
+    "babel-eslint": "^7.1.1",
+    "babel-loader": "^6.2.5",
+    "babel-polyfill": "^6.16.0",
+    "babel-preset-es2015": "^6.16.0",
+    "babel-preset-stage-0": "^6.16.0",
+    "css-loader": "^0.25.0",
+    "eslint": "^3.12.0",
+    "eslint-config-airbnb-base": "^10.0.1",
+    "eslint-friendly-formatter": "^2.0.6",
+    "eslint-import-resolver-webpack": "^0.7.1",
+    "eslint-loader": "^1.6.1",
+    "eslint-plugin-html": "^1.7.0",
+    "eslint-plugin-import": "^2.2.0",
+    "extract-text-webpack-plugin": "^1.0.1",
+    "ora": "^0.4.0",
+    "stats-webpack-plugin": "^0.2.1",
+    "style-loader": "^0.13.1",
+    "vue": "^2.1.4",
+    "vue-loader": "^10.0.1",
+    "vue-style-loader": "^1.0.0",
+    "vue-template-compiler": "^2.1.4",
+    "webpack": "^1.9.11",
+    "webpack-dev-server": "^1.9.0",
+    "webpack-merge": "^1.1.1"
+  }
+}

data/lib/generators/vueport/template/renderer/.eslintrc.js

@@ -0,0 +1,28 @@
+module.exports = {
+  root: true,
+  parser: 'babel-eslint',
+  parserOptions: {
+    sourceType: 'module'
+  },
+  extends: 'airbnb-base',
+  // required to lint *.vue files
+  plugins: [
+    'html'
+  ],
+  // check if imports actually resolve
+  'settings': {
+    'import/resolver': {
+      'webpack': {
+        'config': '../config/vueport/webpack.base.conf.js'
+      }
+    }
+  },
+  // add your custom rules here
+  'rules': {
+    // allow debugger during development
+    'comma-dangle': ['error', 'never'],
+    'space-before-function-paren': ['error', 'always'],
+    'semi': ['error', 'never'],
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
+  }
+}

data/lib/generators/vueport/template/renderer/index.js

@@ -0,0 +1,34 @@
+const app = require('express')()
+const fs = require('fs')
+const path = require('path')
+const bodyParser = require('body-parser')
+const vueServerRenderer = require('vue-server-renderer')
+const morgan = require('morgan')
+
+const filePath = path.join(__dirname, './bundle.server.js')
+const code = fs.readFileSync(filePath, 'utf8')
+const bundleRenderer = vueServerRenderer.createBundleRenderer(code)
+
+const PORT = process.env.PORT || 5000
+
+app.use(bodyParser.text())
+app.use(morgan('tiny'))
+
+const render = html => new Promise((resolve, reject) => {
+  bundleRenderer.renderToString({ body: html }, (err, res) => {
+    if (err) return reject(err)
+    return resolve(res)
+  })
+})
+
+app.post('/render', (req, res) => {
+  if (typeof req.body !== 'string' || req.body.length === 0) return res.status(400).send('')
+  return render(req.body)
+    .catch((err) => {
+      console.error(err)
+      res.status(500).send(JSON.stringify(err))
+    })
+    .then(html => res.send(html))
+})
+
+app.listen(PORT, () => console.log('listening on', PORT))

data/lib/generators/vueport/template/renderer/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "vueport-renderer",
+  "repository": "samtgarson/vueport",
+  "description": "Vueport Server Side Renderer",
+  "version": "0.0.1",
+  "license": "MIT",
+  "scripts": {
+    "start": "node ."
+  },
+  "dependencies": {
+    "body-parser": "^1.15.2",
+    "express": "^4.14.0",
+    "morgan": "^1.7.0",
+    "vue-server-renderer": "2.1.4",
+    "vue-template-compiler": "2.1.4"
+  }
+}

data/lib/generators/vueport/template/vueport/build.js

@@ -0,0 +1,44 @@
+// https://github.com/shelljs/shelljs
+require('shelljs/global')
+env.NODE_ENV = 'production'
+
+var path = require('path')
+var config = require('./config')
+var ora = require('ora')
+var webpack = require('webpack')
+var clientConfig = require('./webpack.prod.conf')
+var serverConfig = require('./webpack.server.conf')
+
+var spinner = ora('building client bundle for production...')
+spinner.start()
+
+var assetsPath = path.join(config.build.assetsRoot)
+rm('-rf', assetsPath)
+mkdir('-p', assetsPath)
+
+var statsConfig = {
+  colors: true,
+  modules: false,
+  children: false,
+  chunks: false,
+  chunkModules: false
+}
+
+webpack(clientConfig, function (err, stats) {
+  spinner.stop()
+  if (err) throw err
+  process.stdout.write(stats.toString(statsConfig) + '\n')
+
+  server()
+})
+
+var server = function () {
+  var spinner = ora('building server bundle for production...')
+  spinner.start()
+
+  webpack(serverConfig, function (err, stats) {
+    spinner.stop()
+    if (err) throw err
+    process.stdout.write(stats.toString(statsConfig) + '\n')
+  })
+}

data/lib/generators/vueport/template/vueport/config.js

@@ -0,0 +1,25 @@
+// see http://vuejs-templates.github.io/webpack for documentation.
+var path = require('path')
+
+module.exports = {
+  build: {
+    env: { NODE_ENV: '"production"' },
+    assetsRoot: path.resolve(__dirname, '../../public/webpack'),
+    assetsSubDirectory: '/',
+    assetsPublicPath: '/',
+    productionSourceMap: true
+  },
+  dev: {
+    env: { NODE_ENV: '"development"' },
+    port: 8080,
+    assetsSubDirectory: '/',
+    assetsPublicPath: '/',
+    proxyTable: {},
+    // CSS Sourcemaps off by default because relative paths are "buggy"
+    // with this option, according to the CSS-Loader README
+    // (https://github.com/webpack/css-loader#sourcemaps)
+    // In our experience, they generally work as expected,
+    // just be aware of this issue when enabling this option.
+    cssSourceMap: false
+  }
+}

data/lib/generators/vueport/template/vueport/utils.js

@@ -0,0 +1,61 @@
+var path = require('path')
+var config = require('./config')
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
+
+exports.assetsPath = function (_path) {
+  var assetsSubDirectory = process.env.NODE_ENV === 'production'
+    ? config.build.assetsSubDirectory
+    : config.dev.assetsSubDirectory
+  return path.posix.join(assetsSubDirectory, _path)
+}
+
+exports.cssLoaders = function (options) {
+  options = options || {}
+  // generate loader string to be used with extract text plugin
+  function generateLoaders (loaders) {
+    var sourceLoader = loaders.map(function (loader) {
+      var extraParamChar
+      if (/\?/.test(loader)) {
+        loader = loader.replace(/\?/, '-loader?')
+        extraParamChar = '&'
+      } else {
+        loader = loader + '-loader'
+        extraParamChar = '?'
+      }
+      return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '')
+    }).join('!')
+
+    // Extract CSS when that option is specified
+    // (which is the case during production build)
+    if (options.extract) {
+      return ExtractTextPlugin.extract('vue-style-loader', sourceLoader)
+    } else {
+      return ['vue-style-loader', sourceLoader].join('!')
+    }
+  }
+
+  // http://vuejs.github.io/vue-loader/en/configurations/extract-css.html
+  return {
+    css: generateLoaders(['css']),
+    postcss: generateLoaders(['css']),
+    less: generateLoaders(['css', 'less']),
+    sass: generateLoaders(['css', 'sass?indentedSyntax']),
+    scss: generateLoaders(['css', 'sass']),
+    stylus: generateLoaders(['css', 'stylus']),
+    styl: generateLoaders(['css', 'stylus'])
+  }
+}
+
+// Generate loaders for standalone style files (outside of .vue)
+exports.styleLoaders = function (options) {
+  var output = []
+  var loaders = exports.cssLoaders(options)
+  for (var extension in loaders) {
+    var loader = loaders[extension]
+    output.push({
+      test: new RegExp('\\.' + extension + '$'),
+      loader: loader
+    })
+  }
+  return output
+}

data/lib/generators/vueport/template/vueport/webpack.base.conf.js

@@ -0,0 +1,119 @@
+var path = require('path')
+var config = require('./config')
+var utils = require('./utils')
+var projectRoot = path.resolve(__dirname, '../../')
+var StatsPlugin = require('stats-webpack-plugin')
+
+var env = process.env.NODE_ENV
+// check env & config/index.js to decide weither to enable CSS Sourcemaps for the
+// various preprocessor loaders added to vue-loader at the end of this file
+var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)
+var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap)
+var useCssSourceMap = cssSourceMapDev || cssSourceMapProd
+
+module.exports = {
+  entry: {
+    application: './webpack/application.js'
+  },
+  output: {
+    path: config.build.assetsRoot,
+    publicPath: '/webpack/',
+    filename: '[name].js'
+  },
+  resolve: {
+    extensions: ['', '.js', '.vue'],
+    fallback: [
+      path.join(projectRoot, 'node_modules'),
+    ],
+    alias: {
+      'vue$': 'vue/dist/vue.common.js',
+      'components': path.resolve(projectRoot, 'app/components'),
+      'assets': path.resolve(projectRoot, 'app/assets')
+    }
+  },
+  resolveLoader: {
+    fallback: [path.join(projectRoot, 'node_modules')]
+  },
+  module: {
+    preLoaders: [
+      {
+        test: /\.vue$/,
+        loader: 'eslint',
+        include: projectRoot,
+        exclude: /node_modules/
+      },
+      {
+        test: /\.js$/,
+        loader: 'eslint',
+        include: projectRoot,
+        exclude: /node_modules/
+      }
+    ],
+    loaders: [
+      {
+        test: /\.vue$/,
+        loader: 'vue'
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel',
+        include: projectRoot,
+        exclude: /node_modules/
+      },
+      {
+        test: /\.pug$/,
+        loader: 'pug',
+        include: projectRoot,
+        exclude: /node_modules/
+      },
+      {
+        test: /\.sass$/,
+        loader: 'sass',
+        include: projectRoot,
+        exclude: /node_modules/
+      },
+      {
+        test: /\.json$/,
+        loader: 'json'
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        loader: 'url',
+        query: {
+          limit: 10000,
+          name: utils.assetsPath('img/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        loader: 'url',
+        query: {
+          limit: 10000,
+          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+        }
+      }
+    ]
+  },
+  eslint: {
+    formatter: require('eslint-friendly-formatter')
+  },
+  vue: {
+    loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }),
+    postcss: [
+      require('autoprefixer')({
+        browsers: ['last 2 versions']
+      })
+    ]
+  },
+  plugins: [
+    // must match config.webpack.manifest_filename
+    new StatsPlugin('manifest.json', {
+      // We only need assetsByChunkName
+      chunkModules: false,
+      source: false,
+      chunks: false,
+      modules: false,
+      assets: true
+    }),
+  ]
+}

data/lib/generators/vueport/template/vueport/webpack.dev.conf.js

@@ -0,0 +1,30 @@
+var config = require('./config')
+var webpack = require('webpack')
+var merge = require('webpack-merge')
+var utils = require('./utils')
+var baseWebpackConfig = require('./webpack.base.conf')
+
+var devServerPort = 3808
+
+module.exports = merge(baseWebpackConfig, {
+  module: {
+    loaders: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
+  },
+  output: {
+    publicPath: '//localhost:' + devServerPort + '/webpack/'
+  },
+  // eval-source-map is faster for development
+  devtool: '#eval-source-map',
+  devServer: {
+    port: devServerPort,
+    headers: { 'Access-Control-Allow-Origin': '*' }
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': config.dev.env
+    }),
+    // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
+    new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.NoErrorsPlugin()
+  ]
+})

data/lib/generators/vueport/template/vueport/webpack.prod.conf.js

@@ -0,0 +1,43 @@
+var path = require('path')
+var config = require('./config')
+var utils = require('./utils')
+var webpack = require('webpack')
+var merge = require('webpack-merge')
+var baseWebpackConfig = require('./webpack.base.conf')
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
+var env = config.build.env
+
+var webpackConfig = merge(baseWebpackConfig, {
+  module: {
+    loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true })
+  },
+  devtool: config.build.productionSourceMap ? '#source-map' : false,
+  output: {
+    path: config.build.assetsRoot,
+    filename: utils.assetsPath('[name].[chunkhash].js'),
+    chunkFilename: utils.assetsPath('[id].[chunkhash].js')
+  },
+  vue: {
+    loaders: utils.cssLoaders({
+      sourceMap: config.build.productionSourceMap,
+      extract: true
+    })
+  },
+  plugins: [
+    // http://vuejs.github.io/vue-loader/en/workflow/production.html
+    new webpack.DefinePlugin({
+      'process.env': env
+    }),
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false
+      }
+    }),
+    new webpack.optimize.DedupePlugin(),
+    new webpack.optimize.OccurrenceOrderPlugin(),
+    // extract css into its own file
+    new ExtractTextPlugin(utils.assetsPath('[name].[contenthash].css'))
+  ]
+})
+
+module.exports = webpackConfig

data/lib/generators/vueport/template/vueport/webpack.server.conf.js

@@ -0,0 +1,40 @@
+var path = require('path')
+var utils = require('./utils')
+var webpack = require('webpack')
+var merge = require('webpack-merge')
+var baseWebpackConfig = require('./webpack.base.conf')
+
+baseWebpackConfig.plugins = []
+var webpackConfig = merge(baseWebpackConfig, {
+  entry: './webpack/server.js',
+  module: {
+    loaders: utils.styleLoaders({ sourceMap: false, extract: false })
+  },
+  target: 'node',
+  output: {
+    path: path.resolve(__dirname, '../../renderer'),
+    libraryTarget: 'commonjs2',
+    filename: 'bundle.server.js'
+  },
+  vue: {
+    loaders: utils.cssLoaders({ 
+      sourceMap: false, 
+      extract: false 
+    })
+  },
+  plugins: [
+    // http://vuejs.github.io/vue-loader/en/workflow/production.html
+    new webpack.DefinePlugin({
+      'process.env': '"production"'
+    }),
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false
+      }
+    }),
+    new webpack.optimize.DedupePlugin(),
+    new webpack.optimize.OccurrenceOrderPlugin(),
+  ]
+})
+
+module.exports = webpackConfig

data/{example → lib/generators/vueport/template/webpack}/application.js

@@ -1,5 +1,5 @@
 import 'babel-polyfill'
 import setup from './setup'
 
-window.vm = setup('#vueport-template')
+const vm = setup('#vueport-template')
 vm.$mount('#vueport-wrapper')

data/lib/generators/vueport/template/webpack/server.js

@@ -0,0 +1,9 @@
+import 'babel-polyfill'
+import setup from './setup'
+
+export default function (context) {
+  const app = setup(context.body)
+  return new Promise((resolve) => {
+    resolve(app)
+  })
+}

data/lib/generators/vueport/template/webpack/setup.js

@@ -0,0 +1,18 @@
+import Vue from 'vue'
+/*
+*  Import your components here.
+*  Your components directory is aliased as 'components'
+*  e.g.
+*
+import MyComponent from 'components/my-component'
+*/
+
+export default function (template) {
+  return new Vue({
+    template,
+    // Then include them here:
+    components: {
+      // MyComponent
+    }
+  })
+}

data/lib/vueport.rb

@@ -12,7 +12,8 @@ module Vueport
     @config ||= {
       server_host: 'localhost',
       server_port: 5000,
-      server_config_file: 'config/webpack.server.js',
+      server_config_file: 'config/vueport/webpack.server.conf',
+      client_config_file: 'config/vueport/webpack.prod.conf',
       ssr_enabled: false
     }
   end

data/lib/vueport/railtie.rb

@@ -14,9 +14,5 @@ module Vueport
         include Vueport::Helper
       end
     end
-
-    rake_tasks do
-      load 'tasks/vueport.rake'
-    end
   end
 end

data/lib/vueport/version.rb

@@ -1,3 +1,3 @@
 module Vueport
-  VERSION = '0.1.0'.freeze
+  VERSION = '0.1.1'.freeze
 end

data/vueport.gemspec

@@ -24,6 +24,7 @@ Gem::Specification.new do |spec|
   spec.add_development_dependency 'rspec', '~> 3.0'
   spec.add_development_dependency 'rubocop', '~> 0.45.0'
   spec.add_development_dependency 'rspec-html-matchers', '~> 0.8.1'
+  spec.add_development_dependency 'ammeter', '~> 1.1.4'
 
   spec.add_dependency 'rails', '>= 3.2.0'
   spec.add_dependency 'webpack-rails', '~> 0.9.9'

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: vueport
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.1
 platform: ruby
 authors:
 - Sam Garson
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2016-12-08 00:00:00.000000000 Z
+date: 2016-12-31 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -80,6 +80,20 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: 0.8.1
+- !ruby/object:Gem::Dependency
+  name: ammeter
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 1.1.4
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 1.1.4
 - !ruby/object:Gem::Dependency
   name: rails
   requirement: !ruby/object:Gem::Requirement
@@ -141,16 +155,26 @@ files:
 - Rakefile
 - bin/console
 - bin/setup
-- example/Procfile
-- example/Procfile.dev
-- example/application.js
-- example/babelrc
-- example/index.js
-- example/server.js
-- example/setup.js
-- example/webpack.server.js
 - lib/generators/vueport/install_generator.rb
-- lib/tasks/vueport.rake
+- lib/generators/vueport/template/.babelrc
+- lib/generators/vueport/template/.eslintignore
+- lib/generators/vueport/template/.eslintrc.js
+- lib/generators/vueport/template/Procfile
+- lib/generators/vueport/template/Procfile.dev
+- lib/generators/vueport/template/package.json
+- lib/generators/vueport/template/renderer/.eslintrc.js
+- lib/generators/vueport/template/renderer/index.js
+- lib/generators/vueport/template/renderer/package.json
+- lib/generators/vueport/template/vueport/build.js
+- lib/generators/vueport/template/vueport/config.js
+- lib/generators/vueport/template/vueport/utils.js
+- lib/generators/vueport/template/vueport/webpack.base.conf.js
+- lib/generators/vueport/template/vueport/webpack.dev.conf.js
+- lib/generators/vueport/template/vueport/webpack.prod.conf.js
+- lib/generators/vueport/template/vueport/webpack.server.conf.js
+- lib/generators/vueport/template/webpack/application.js
+- lib/generators/vueport/template/webpack/server.js
+- lib/generators/vueport/template/webpack/setup.js
 - lib/vueport.rb
 - lib/vueport/helper.rb
 - lib/vueport/node_client.rb
@@ -178,7 +202,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.5.1
+rubygems_version: 2.6.8
 signing_key: 
 specification_version: 4
 summary: Single file components for Rails with Vue JS and Webpack

data/example/Procfile.dev

@@ -1,2 +0,0 @@
-rails: bundle exec rails server
-webpack: npm run dev-server

data/example/index.js

@@ -1,35 +0,0 @@
-const app = require('express')()
-const fs = require('fs');
-const path = require('path');
-const bodyParser = require('body-parser')
-const vueServerRenderer = require('vue-server-renderer');
-const morgan = require('morgan')
-
-const filePath = path.join(__dirname, './public/webpack/bundle.server.js')
-const code = fs.readFileSync(filePath, 'utf8');
-const bundleRenderer = vueServerRenderer.createBundleRenderer(code);
-
-const PORT = process.env['PORT'] || 5000
-
-app.use(bodyParser.text())
-app.use(morgan('tiny'))
-
-const render = html => {
-  return p = new Promise((resolve, reject) => {
-    bundleRenderer.renderToString({body: html}, (err, html) => {
-      if (err) return reject(err)
-      else return resolve(html)
-    })
-  })
-}
-
-app.post('/render', (req, res) => {
-  render(req.body)
-    .catch(err => {
-      console.error(err)
-      res.status(500).send(JSON.stringify(err))
-    })
-    .then(html => res.send(html))
-})
-
-app.listen(PORT, () => console.log('listening on', PORT))

data/example/server.js

@@ -1,10 +0,0 @@
-import 'babel-polyfill'
-import Vue from 'vue'
-import setup from './setup';
-
-export default function(context) {
-  const app = setup(context.body)
-  return new Promise((resolve, reject) => {
-    resolve(app);
-  });
-};

data/example/setup.js

@@ -1,14 +0,0 @@
-import Vue from 'vue'
-// Import your components here, then include it in your Vue application below.
-// (We've added /app to our webpack resolves for convenience)
-
-// import MyComponent from 'components/my-component'
-
-export default function (template) {
-  return new Vue({
-    template: template,
-    components: {
-      //MyComponent
-    }
-  })
-}

data/example/webpack.server.js

@@ -1,59 +0,0 @@
-// Example webpack configuration with asset fingerprinting in production.
-'use strict';
-
-var path = require('path');
-var webpack = require('webpack');
-
-var config = {
-  target: 'node', // !different
-  entry: './webpack/server.js',
-  output: {
-    libraryTarget: 'commonjs2', // !different
-    path: path.join(__dirname, '..', 'public', 'webpack'),
-    publicPath: '/webpack/',
-    filename: 'bundle.server.js',
-  },
-  resolve: {
-    root: path.join(__dirname, '..', 'webpack'),
-    extensions: ['', '.js', '.vue'],
-    fallback: [path.join(__dirname, '../node_modules'), path.join(__dirname, '../app/')]
-  },
-
-  plugins: [
-    new webpack.NoErrorsPlugin(),
-    new webpack.optimize.UglifyJsPlugin({
-      compressor: { warnings: false },
-      sourceMap: false
-    }),
-    new webpack.DefinePlugin({
-      'process.env': { NODE_ENV: JSON.stringify('production') }
-    }),
-    new webpack.optimize.DedupePlugin(),
-    new webpack.optimize.OccurenceOrderPlugin()
-  ],
-
-  module: {
-    loaders: [
-      {
-        test: /\.vue$/,
-        loader: 'vue'
-      },
-      {
-        test: /\.json$/,
-        loader: 'json'
-      },
-      {
-        loaders: ['babel'],
-        test: /\.js$/,
-        exclude: /node_modules/
-      },
-      {
-        test: /\.(sc|sa|c)ss$/,
-        loaders: ['style', 'css', 'sass']
-      }
-    ]
-  }
-};
-
-
-module.exports = config;

data/lib/tasks/vueport.rake

@@ -1,24 +0,0 @@
-namespace :vueport do
-  desc 'Compile client and server bundles'
-  task compile: :environment do
-    ENV['NODE_ENV'] = 'production'
-    webpack_bin = ::Rails.root.join(::Rails.configuration.webpack.binary)
-    config_file = ::Rails.root.join(::Rails.configuration.webpack.config_file)
-    server_config_file = ::Rails.root.join(Vueport.config[:server_config_file])
-
-    unless File.exist?(webpack_bin)
-      raise "Can't find our webpack executable at #{webpack_bin} - have you run `npm install`?"
-    end
-
-    unless File.exist?(config_file)
-      raise "Can't find our webpack config file at #{config_file}"
-    end
-
-    unless File.exist?(server_config_file)
-      raise "Can't find our webpack server config file at #{config_file}"
-    end
-
-    sh "#{webpack_bin} --config #{config_file} --bail"
-    sh "#{webpack_bin} --config #{server_config_file} --bail"
-  end
-end