RubyGems - webpack-rails-react - Versions diffs - 0.9.9 - Mend

webpack-rails-react 0.9.9

Files changed (17) hide show

checksums.yaml +7 -0
data/MIT-LICENSE +20 -0
data/README.md +101 -0
data/Rakefile +24 -0
data/example/Procfile +4 -0
data/example/dot_gitignore +12 -0
data/example/package.json +19 -0
data/example/webpack.config.js +85 -0
data/lib/generators/webpack_rails/install_generator.rb +115 -0
data/lib/tasks/webpack.rake +19 -0
data/lib/webpack-rails.rb +1 -0
data/lib/webpack/rails.rb +2 -0
data/lib/webpack/rails/helper.rb +32 -0
data/lib/webpack/rails/manifest.rb +89 -0
data/lib/webpack/rails/version.rb +6 -0
data/lib/webpack/railtie.rb +33 -0
metadata +74 -0

checksums.yaml ADDED Viewed

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: a11fdc7f90667286b9ead38db9f12d238b2f9122
+  data.tar.gz: c6940d59b10f4f1578a762b62f33440524ebce2d
+SHA512:
+  metadata.gz: a5e9a18c7cc297c191ee8ee46fd28fbe8bd595ee609826bee233206bbcf69c60cbdb9122777e073adb386c4f314071be27eb27502c3c3fe8d6d6fc36e23e6212
+  data.tar.gz: 84b15d55ad4aa77194f9fb819afaf5073076a056c33a167b8fcb5e00b68443be3c2a55142523a681a639be8d938b304d8a9d3ab068f7010f8ebc8a78e08e91c4

data/MIT-LICENSE ADDED Viewed

@@ -0,0 +1,20 @@
+Copyright 2015 Michael Pearson
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md ADDED Viewed

@@ -0,0 +1,101 @@
+[![Build Status](https://travis-ci.org/mipearson/webpack-rails.svg?branch=master)](https://travis-ci.org/mipearson/webpack-rails) [![Gem Version](https://badge.fury.io/rb/webpack-rails.svg)](http://badge.fury.io/rb/webpack-rails)
+# webpack-rails
+**webpack-rails** gives you tools to integrate Webpack in to an existing Ruby on Rails application.
+It will happily co-exist with sprockets but does not use it for production fingerprinting or asset serving. **webpack-rails** is designed with the assumption that if you're using Webpack you treat Javascript as a first-class citizen. This means that you control the webpack config, package.json, and use npm to install Webpack & its plugins.
+In development mode [webpack-dev-server](http://webpack.github.io/docs/webpack-dev-server.html) is used to serve webpacked entry points and offer hot module reloading. In production entry points are built in to `public/webpack`. **webpack-rails** uses [stats-webpack-plugin](https://www.npmjs.com/package/stats-webpack-plugin) to translate entry points in to asset paths.
+It was designed for use at [Marketplacer](http://www.marketplacer.com) to assist us in migrating our Javascript (and possibly our SCSS) off of Sprockets. It first saw production use in June 2015.
+Our examples show **webpack-rails** co-existing with sprockets (as that's how environment works), but sprockets is not used or required for development or production use of this gem.
+This gem has been tested against Rails 4.2 and Ruby 2.2. Earlier versions of Rails (>= 3.2) and Ruby (>= 1.9) may work, but we haven't tested them.
+## Using webpack-rails
+**We have a demo application: [webpack-rails-demo](https://github.com/mipearson/webpack-rails-demo)**
+### Installation
+  1. Add `webpack-rails` to your gemfile
+  1. Run `bundle install` to install the gem
+  1. Run `bundle exec rails generate webpack_rails:install` to copy across example files
+  1. Run `foreman start` to start `webpack-dev-server` and `rails server` at the same time
+  1. Add the webpack entry point to your layout (see next section)
+  1. Edit `client/application.js` and write some code
+### Adding the entry point to your Rails application
+To add your webpacked javascript in to your app, add the following to the `<head>` section of your to your `layout.html.erb`:
+```erb
+<%= javascript_include_tag *webpack_asset_paths("application") %>
+```
+Take note of the splat (`*`): `webpack_asset_paths` returns an array, as one entry point can map to multiple paths, especially if hot reloading is enabled in Webpack.
+#### Use with webpack-dev-server live reload
+If you're using the webpack dev server's live reload feature (not the React hot reloader), you'll also need to include the following in your layout template:
+``` html
+<script src="http://localhost:3808/webpack-dev-server.js"></script>
+```
+### How it works
+Have a look at the files in the `examples` directory. Of note:
+  * We use [foreman](https://github.com/ddollar/foreman) and a `Procfile` to run our rails server & the webpack dev server in development at the same time
+  * The webpack and gem configuration must be in sync - look at our railtie for configuration options
+  * We require that **stats-webpack-plugin** is loaded to automatically generate a production manifest & resolve paths during development
+### Configuration Defaults
+  * Webpack configuration lives in `config/webpack.config.js`
+  * Webpack & Webpack Dev Server binaries are in `node_modules/.bin/`
+  * Webpack Dev Server will run on port 3808 on localhost via HTTP
+  * Webpack Dev Server is enabled in development & test, but not in production
+  * Webpacked assets will be compiled to `public/webpack`
+  * The manifest file is named `manifest.json`
+### Working with browser tests
+In development, we make sure that the `webpack-dev-server` is running when browser tests are running.
+#### Continuous Integration
+In CI, we manually run `webpack` to compile the assets to public and set `config.webpack.dev_server.enabled` to `false` in our `config/environments/test.rb`:
+``` ruby
+  config.webpack.dev_server.enabled = !ENV['CI']
+```
+### Production Deployment
+Add `rake webpack:compile` to your deployment. It serves a similar purpose as Sprockets' `assets:precompile` task. If you're using Webpack and Sprockets (as we are at Marketplacer) you'll need to run both tasks - but it doesn't matter which order they're run in.
+If you're using `[chunkhash]` in your build asset filenames (which you should be, if you want to cache them in production), you'll need to persist built assets between deployments. Consider in-flight requests at the time of deployment: they'll receive paths based on the old `manifest.json`, not the new one.
+## TODO
+* Drive config via JSON, have webpack.config.js read same JSON?
+* Custom webpack-dev-server that exposes errors, stats, etc
+* [react-rails](https://github.com/reactjs/react-rails) fork for use with this workflow
+* Integration tests
+## Contributing
+Pull requests & issues welcome. Advice & criticism regarding webpack config approach also welcome.
+Please ensure that pull requests pass both rubocop & rspec. New functionality should be discussed in an issue first.
+## Acknowledgements
+* Len Garvey for his [webpack-rails](https://github.com/lengarvey/webpack-rails) gem which inspired this implementation
+* Sebastian Porto for [Rails with Webpack](https://reinteractive.net/posts/213-rails-with-webpack-why-and-how)
+* Clark Dave for [How to use Webpack with Rails](http://clarkdave.net/2015/01/how-to-use-webpack-with-rails/)

data/Rakefile ADDED Viewed

@@ -0,0 +1,24 @@
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+require 'rdoc/task'
+require 'rspec/core/rake_task'
+require 'rubocop/rake_task'
+RuboCop::RakeTask.new
+RSpec::Core::RakeTask.new(:spec)
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'WebpackRails'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.md')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+Bundler::GemHelper.install_tasks
+task default: [:rubocop, :spec]

data/example/Procfile ADDED Viewed

@@ -0,0 +1,4 @@
+# Run Rails & Webpack concurrently
+# Example file from webpack-rails gem
+rails: bundle exec rails server
+webpack: ./node_modules/.bin/webpack-dev-server --config config/webpack.config.js

data/example/dot_gitignore ADDED Viewed

@@ -0,0 +1,12 @@
+# Ignore bundler config.
+/.bundle
+# Ignore all logfiles and tempfiles.
+/log/*
+!/log/.keep
+/tmp
+# Don't commit node_modules (vendored npm bits) or built assets
+/node_modules
+/public/webpack

data/example/package.json ADDED Viewed

@@ -0,0 +1,19 @@
+{
+  "name": "webpack-rails-react",
+  "version": "0.0.1",
+  "license": "MIT",
+  "dependencies": {
+    "react": "^15.1.0",
+    "react-dom": "^15.1.0",
+    "stats-webpack-plugin": "^0.2.1",
+    "webpack": "^1.9.11"
+  },
+  "devDependencies": {
+    "babel-core": "^6.9.1",
+    "babel-loader": "^6.2.4",
+    "babel-preset-es2015": "^6.9.0",
+    "babel-preset-react": "^6.5.0",
+    "babel-preset-stage-0": "^6.5.0",
+    "webpack-dev-server": "^1.9.0"
+  }
+}

data/example/webpack.config.js ADDED Viewed

@@ -0,0 +1,85 @@
+// Example webpack configuration with asset fingerprinting in production.
+'use strict';
+var path = require('path');
+var webpack = require('webpack');
+var StatsPlugin = require('stats-webpack-plugin');
+// must match config.webpack.dev_server.port
+var devServerPort = 3808;
+// set TARGET=production on the environment to add asset fingerprints
+var production = process.env.TARGET === 'production';
+var config = {
+  entry: {
+    // Sources are expected to live in $app_root/webpack
+    'application': './webpack/application.js'
+  },
+  output: {
+    // Build assets directly in to public/webpack/, let webpack know
+    // that all webpacked assets start with webpack/
+    // must match config.webpack.output_dir
+    path: path.join(__dirname, '..', 'public', 'webpack'),
+    publicPath: '/webpack/',
+    filename: production ? '[name]-[chunkhash].js' : '[name].js'
+  },
+  resolve: {
+    root: path.join(__dirname, '..', 'webpack'),
+    extensions: ["", ".js", ".jsx", ".es6"]
+  },
+  module: {
+    loaders: [
+      {
+        test: /\.jsx?$/,         // Match both .js and .jsx files
+        exclude: /node_modules/,
+        loader: "babel",
+        query:
+        {
+          presets:['es2015', 'react', 'stage-0']
+        }
+      }
+    ]
+  },
+  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
+    })]
+};
+if (production) {
+  config.plugins.push(
+    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()
+  );
+} else {
+  config.devServer = {
+    port: devServerPort,
+    headers: { 'Access-Control-Allow-Origin': '*' }
+  };
+  config.output.publicPath = '//localhost:' + devServerPort + '/webpack/';
+  // Source maps
+  config.devtool = 'cheap-module-eval-source-map';
+}
+module.exports = config;

data/lib/generators/webpack_rails/install_generator.rb ADDED Viewed

@@ -0,0 +1,115 @@
+module WebpackRails
+  # :nodoc:
+  class InstallGenerator < ::Rails::Generators::Base
+    source_root File.expand_path("../../../../example", __FILE__)
+    desc "Install everything you need for a basic webpack-rails integration"
+    def add_foreman_to_gemfile
+      gem 'foreman'
+    end
+    def copy_procfile
+      copy_file "Procfile", "Procfile"
+    end
+    def copy_package_json
+      copy_file "package.json", "package.json"
+    end
+    def copy_webpack_conf
+      copy_file "webpack.config.js", "config/webpack.config.js"
+    end
+    def create_webpack_application_js
+      empty_directory "webpack"
+      create_file "webpack/application.js" do
+        <<-EOF.strip_heredoc
+        import React from 'react';
+        import ReactDOM from 'react-dom';
+        import App from './App';
+        ReactDOM.render(
+          <App />,
+          Document.findElementById('app')
+        )
+        EOF
+      end
+      create_file "webpack/App.js" do
+        <<-EOF.strip_heredoc
+          import React from 'react';
+          class App extends React.Component {
+            render() {
+              return(
+                <div>
+                  Hello World
+                </div>
+              )
+            }
+          }
+          export default App;
+        EOF
+      end
+    end
+    def add_to_gitignore
+      append_to_file ".gitignore" do
+        <<-EOF.strip_heredoc
+        # Added by webpack-rails
+        /node_modules
+        /public/webpack
+        EOF
+      end
+    end
+    def run_npm_install
+      run "npm install" if yes?("Would you like us to run 'npm install' for you?")
+    end
+    def run_bundle_install
+      run "bundle install" if yes?("Would you like us to run 'bundle install' for you?")
+    end
+    def whats_next
+      puts <<-EOF.strip_heredoc
+        We've set up the basics of webpack-rails for you, but you'll still
+        need to:
+          1. Add the 'application' entry point in to your layout, and
+            e.g. <%= javascript_include_tag *webpack_asset_paths('application') %>
+          2. Add an element with an id of 'app' to your layout
+          3. Enable hot module replacement by adding <script src="http://localhost:3808/webpack-dev-server.js"></script> to your layout
+          4. Run 'foreman start' to run the webpack-dev-server and rails server
+          Example app/views/layouts/application.html.erb
+          <!DOCTYPE html>
+          <html>
+            <head>
+              <title>WebpackDemo</title>
+              <%= stylesheet_link_tag    'application', media: 'all' %>
+              <%= javascript_include_tag 'application' %>
+              <script src="http://localhost:3808/webpack-dev-server.js"></script>
+              <%= csrf_meta_tags %>
+            </head>
+            <body>
+              <%= yield %>
+              <%= javascript_include_tag *webpack_asset_paths('application') %>
+            </body>
+          </html>
+        See the README.md for this gem at
+        https://github.com/wdjungst/webpack-rails-react/blob/master/README.md
+        for more info.
+        Thanks for using webpack-rails-react!
+      EOF
+    end
+  end
+end

data/lib/tasks/webpack.rake ADDED Viewed

@@ -0,0 +1,19 @@
+namespace :webpack do
+  desc "Compile webpack bundles"
+  task compile: :environment do
+    ENV["TARGET"] = 'production'
+    webpack_bin = ::Rails.root.join(::Rails.configuration.webpack.binary)
+    config_file = ::Rails.root.join(::Rails.configuration.webpack.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
+    result =  `#{webpack_bin} --bail --config #{config_file} 2>&1`
+    raise result unless $? == 0
+  end
+end

data/lib/webpack-rails.rb ADDED Viewed

	@@ -0,0 +1 @@
1	+ require 'webpack/rails'

data/lib/webpack/rails.rb ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ require 'webpack/rails/version'
2	+ require 'webpack/railtie' if defined? ::Rails::Railtie

data/lib/webpack/rails/helper.rb ADDED Viewed

@@ -0,0 +1,32 @@
+require 'action_view'
+require 'webpack/rails/manifest'
+module Webpack
+  module Rails
+    # Asset path helpers for use with webpack
+    module Helper
+      # Return asset paths for a particular webpack entry point.
+      #
+      # Response may either be full URLs (eg http://localhost/...) if the dev server
+      # is in use or a host-relative URl (eg /webpack/...) if assets are precompiled.
+      #
+      # Will raise an error if our manifest can't be found or the entry point does
+      # not exist.
+      def webpack_asset_paths(source)
+        return "" unless source.present?
+        paths = Webpack::Rails::Manifest.asset_paths(source)
+        host = ::Rails.configuration.webpack.dev_server.host
+        port = ::Rails.configuration.webpack.dev_server.port
+        if ::Rails.configuration.webpack.dev_server.enabled
+          paths.map! do |p|
+            "//#{host}:#{port}#{p}"
+          end
+        end
+        paths
+      end
+    end
+  end
+end

data/lib/webpack/rails/manifest.rb ADDED Viewed

@@ -0,0 +1,89 @@
+require 'net/http'
+require 'uri'
+module Webpack
+  module Rails
+    # Webpack manifest loading, caching & entry point retrieval
+    class Manifest
+      # Raised if we can't read our webpack manifest for whatever reason
+      class ManifestLoadError < StandardError
+        def initialize(message, orig)
+          super "#{message} (original error #{orig})"
+        end
+      end
+      # Raised if a supplied entry point does not exist in the webpack manifest
+      class EntryPointMissingError < StandardError
+      end
+      class << self
+        # :nodoc:
+        def asset_paths(source)
+          paths = manifest["assetsByChunkName"][source]
+          if paths
+            # Can be either a string or an array of strings.
+            # Do not include source maps as they are not javascript
+            [paths].flatten.reject { |p| p =~ /.*\.map$/ }.map do |p|
+              "/#{::Rails.configuration.webpack.public_path}/#{p}"
+            end
+          else
+            raise EntryPointMissingError, "Can't find entry point '#{source}' in webpack manifest"
+          end
+        end
+        private
+        def manifest
+          if ::Rails.configuration.webpack.dev_server.enabled
+            # Don't cache if we're in dev server mode, manifest may change ...
+            load_manifest
+          else
+            # ... otherwise cache at class level, as JSON loading/parsing can be expensive
+            @manifest ||= load_manifest
+          end
+        end
+        def load_manifest
+          data = if ::Rails.configuration.webpack.dev_server.enabled
+            load_dev_server_manifest
+          else
+            load_static_manifest
+          end
+          JSON.parse(data)
+        end
+        def load_dev_server_manifest
+          http = Net::HTTP.new(
+            "localhost",
+            ::Rails.configuration.webpack.dev_server.port)
+          http.use_ssl = ::Rails.configuration.webpack.dev_server.https
+          http.verify_mode = OpenSSL::SSL::VERIFY_NONE
+          http.get(dev_server_path).body
+        rescue => e
+          raise ManifestLoadError.new("Could not load manifest from webpack-dev-server at #{dev_server_url} - is it running, and is stats-webpack-plugin loaded?", e)
+        end
+        def load_static_manifest
+          File.read(static_manifest_path)
+        rescue => e
+          raise ManifestLoadError.new("Could not load compiled manifest from #{static_manifest_path} - have you run `rake webpack:compile`?", e)
+        end
+        def static_manifest_path
+          ::Rails.root.join(
+            ::Rails.configuration.webpack.output_dir,
+            ::Rails.configuration.webpack.manifest_filename
+          )
+        end
+        def dev_server_path
+          "/#{::Rails.configuration.webpack.public_path}/#{::Rails.configuration.webpack.manifest_filename}"
+        end
+        def dev_server_url
+          "http://localhost:#{::Rails.configuration.webpack.dev_server.port}#{dev_server_path}"
+        end
+      end
+    end
+  end
+end

data/lib/webpack/rails/version.rb ADDED Viewed

@@ -0,0 +1,6 @@
+module Webpack
+  # :nodoc:
+  module Rails
+    VERSION = "0.9.9"
+  end
+end

data/lib/webpack/railtie.rb ADDED Viewed

@@ -0,0 +1,33 @@
+require 'rails'
+require 'rails/railtie'
+require 'webpack/rails/helper'
+module Webpack
+  # :nodoc:
+  class Railtie < ::Rails::Railtie
+    config.after_initialize do
+      ActiveSupport.on_load(:action_view) do
+        include Webpack::Rails::Helper
+      end
+    end
+    config.webpack = ActiveSupport::OrderedOptions.new
+    config.webpack.config_file = 'config/webpack.config.js'
+    config.webpack.binary = 'node_modules/.bin/webpack'
+    config.webpack.dev_server = ActiveSupport::OrderedOptions.new
+    config.webpack.dev_server.host = 'localhost'
+    config.webpack.dev_server.port = 3808
+    config.webpack.dev_server.https = false # note - this will use OpenSSL::SSL::VERIFY_NONE
+    config.webpack.dev_server.binary = 'node_modules/.bin/webpack-dev-server'
+    config.webpack.dev_server.enabled = !::Rails.env.production?
+    config.webpack.output_dir = "public/webpack"
+    config.webpack.public_path = "webpack"
+    config.webpack.manifest_filename = "manifest.json"
+    rake_tasks do
+      load "tasks/webpack.rake"
+    end
+  end
+end

metadata ADDED Viewed

@@ -0,0 +1,74 @@
+--- !ruby/object:Gem::Specification
+name: webpack-rails-react
+version: !ruby/object:Gem::Version
+  version: 0.9.9
+platform: ruby
+authors:
+- Dave Jugnst
+autorequire:
+bindir: bin
+cert_chain: []
+date: 2016-06-07 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.2.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.2.0
+description: Production-tested, JavaScript-first tooling to use webpack within your
+  Rails application
+email:
+- djungst@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- MIT-LICENSE
+- README.md
+- Rakefile
+- example/Procfile
+- example/dot_gitignore
+- example/package.json
+- example/webpack.config.js
+- lib/generators/webpack_rails/install_generator.rb
+- lib/tasks/webpack.rake
+- lib/webpack-rails.rb
+- lib/webpack/rails.rb
+- lib/webpack/rails/helper.rb
+- lib/webpack/rails/manifest.rb
+- lib/webpack/rails/version.rb
+- lib/webpack/railtie.rb
+homepage: https://github.com/wdjungst/webpack-rails-react
+licenses:
+- MIT
+metadata: {}
+post_install_message:
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project:
+rubygems_version: 2.4.5
+signing_key:
+specification_version: 4
+summary: Webpack / Rails / React
+test_files: []