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

webpack-rails-react 0.9.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

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: []