react_on_rails 2.0.0.beta.1 → 2.0.0.beta.2

data/lib/generators/react_on_rails/templates/base/base/client/server.js

@@ -0,0 +1,64 @@
+// This file is used by the webpack HMR dev server to load your component without using Rails
+// It should simply match routes to basic HTML or jade files that render your component
+/* eslint-disable no-console, func-names, no-var */
+var webpack = require('webpack');
+var WebpackDevServer = require('webpack-dev-server');
+var jade = require('jade');
+var config = require('./webpack.client.hot.config');
+
+var server = new WebpackDevServer(webpack(config), {
+  publicPath: config.output.publicPath,
+  hot: true,
+  historyApiFallback: true,
+  stats: {
+    colors: true,
+    hash: false,
+    version: false,
+    chunks: false,
+    children: false,
+  },
+});
+
+// The following code is commented out because the HelloWorld example
+// does not use any asynchronous functionality. It is meant to serve
+// as an example of how one might implement an API in express for their
+// webpack dev server
+// Note, it would be necessary to run `npm i --save body-parser sleep` for
+// the following to work:
+// var bodyParser = require('body-parser');
+// var sleep = require('sleep');
+// See tutorial for example of using AJAX:
+// https://github.com/shakacode/react-webpack-rails-tutorial
+
+// server.app.use(bodyParser.json(null));
+// server.app.use(bodyParser.urlencoded({extended: true}));
+// server.app.get('/hello_world.json', function(req, res) {
+//   res.setHeader('Content-Type', 'application/json');
+//   res.send(JSON.stringify(name));
+// });
+
+// server.app.post('/hello_world.json', function(req, res) {
+//   console.log('Processing name: %j', req.body.name);
+//   console.log('(shhhh...napping 1 seconds)');
+//   sleep.sleep(1);
+//   console.log('Just got done with nap!');
+//   name = req.body.name;
+//   res.setHeader('Content-Type', 'application/json');
+//   res.send(JSON.stringify(req.body.name));
+// });
+
+var initialName = 'Stranger';
+
+server.app.use('/', function(req, res) {
+  var locals = {
+    props: JSON.stringify(initialName),
+  };
+  var layout = process.cwd() + '/index.jade';
+  var html = jade.compileFile(layout, { pretty: true })(locals);
+  res.send(html);
+});
+
+server.listen(4000, 'localhost', function(err) {
+  if (err) console.log(err);
+  console.log('Listening at localhost:4000...');
+});

data/lib/generators/react_on_rails/templates/base/base/client/webpack.client.base.config.js.tt

@@ -0,0 +1,62 @@
+// Common client-side webpack configuration used by webpack.hot.config and webpack.rails.config.
+
+const webpack = require('webpack');
+const path = require('path');
+
+const devBuild = process.env.NODE_ENV !== 'production';
+const nodeEnv = devBuild ? 'development' : 'production';
+
+module.exports = {
+
+  // the project dir
+  context: __dirname,
+  entry: {
+
+    // See use of 'vendor' in the CommonsChunkPlugin inclusion below.
+    vendor: [
+      'babel-polyfill',
+      'jquery',
+    ],
+
+    // This will contain the app entry points defined by webpack.hot.config and webpack.rails.config
+    app: [
+      './app/bundles/HelloWorld/startup/clientRegistration',
+    ],
+  },
+  resolve: {
+    extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx', '.scss', '.css', 'config.js'],
+    alias: {
+      lib: path.join(process.cwd(), 'app', 'lib'),
+    },
+  },
+  plugins: [
+
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: JSON.stringify(nodeEnv),
+      },
+    }),
+
+    // https://webpack.github.io/docs/list-of-plugins.html#2-explicit-vendor-chunk
+    new webpack.optimize.CommonsChunkPlugin({
+
+      // This name 'vendor' ties into the entry definition
+      name: 'vendor',
+
+      // We don't want the default vendor.js name
+      filename: 'vendor-bundle.js',
+
+      // Passing Infinity just creates the commons chunk, but moves no modules into it.
+      // In other words, we only put what's in the vendor entry definition in vendor-bundle.js
+      minChunks: Infinity,
+    }),
+  ],
+  module: {
+    loaders: [
+
+      // Not all apps require jQuery. Many Rails apps do, such as those using TurboLinks or bootstrap js
+      {test: require.resolve('jquery'), loader: 'expose?jQuery'},
+      {test: require.resolve('jquery'), loader: 'expose?$'},
+    ],
+  },
+};

data/lib/generators/react_on_rails/templates/base/base/client/webpack.client.hot.config.js.tt

@@ -0,0 +1,69 @@
+// This config file setups up the Webpack Dev Server: https://webpack.github.io/docs/webpack-dev-server.html
+// Run like this:
+// cd client && node server.js
+
+const webpack = require('webpack');
+const path = require('path');
+const config = require('./webpack.client.base.config');
+
+config.entry.app.push(
+
+  // Webpack dev server
+  'webpack-dev-server/client?http://localhost:4000',
+  'webpack/hot/dev-server'<%- unless options.skip_bootstrap? -%>,
+
+  // See: https://github.com/shakacode/bootstrap-sass-loader
+  // We're using the bootstrap-sass loader.
+  'bootstrap-sass!./bootstrap-sass.config.js'
+  <%- end -%>
+
+);
+
+config.output = {
+
+  // this file is served directly by webpack
+  filename: '[name]-bundle.js',
+  path: __dirname,
+};
+config.plugins.unshift(new webpack.HotModuleReplacementPlugin());
+config.devtool = 'eval-source-map';
+
+// All the styling loaders only apply to hot-reload, not rails
+config.module.loaders.push(
+  {
+    test: /\.jsx?$/,
+    loader: 'babel',
+    exclude: /node_modules/,
+    query: {
+      plugins: [
+        [
+          'react-transform',
+          {
+            transforms: [
+              {
+                transform: 'react-transform-hmr',
+                imports: ['react'],
+                locals: ['module'],
+              },
+            ],
+          },
+        ],
+      ],
+    },
+  },
+  {test: /\.css$/, loader: 'style-loader!css-loader'},
+  {
+    test: /\.scss$/,
+    loader: 'style!css!sass?outputStyle=expanded&imagePath=/assets/images&includePaths[]=' +
+    path.resolve(__dirname, './assets/stylesheets'),
+  },
+
+  // The url-loader uses DataUrls. The file-loader emits files.
+  {test: /\.woff$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff'},
+  {test: /\.woff2$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff'},
+  {test: /\.ttf$/, loader: 'file-loader'},
+  {test: /\.eot$/, loader: 'file-loader'},
+  {test: /\.svg$/, loader: 'file-loader'}
+);
+
+module.exports = config;

data/lib/generators/react_on_rails/templates/base/base/client/webpack.client.rails.config.js

@@ -0,0 +1,42 @@
+// Run like this:
+// cd client && npm run build:dev
+// Note that Foreman (Procfile.dev) has also been configured to take care of this.
+
+// NOTE: All style sheets handled by the asset pipeline in rails
+
+const webpack = require('webpack');
+const config = require('./webpack.client.base.config');
+const devBuild = process.env.NODE_ENV !== 'production';
+
+config.output = {
+  filename: '[name]-bundle.js',
+  path: '../app/assets/javascripts/generated',
+};
+
+// You can add entry points specific to rails here
+// The es5-shim/sham is for capybara testing
+config.entry.vendor.unshift(
+  'es5-shim/es5-shim',
+  'es5-shim/es5-sham'
+);
+
+config.entry.vendor.push('jquery-ujs');
+
+// See webpack.common.config for adding modules common to both the webpack dev server and rails
+
+config.module.loaders.push(
+  {test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/},
+  {test: require.resolve('react'), loader: 'imports?shim=es5-shim/es5-shim&sham=es5-shim/es5-sham'}
+);
+
+module.exports = config;
+
+if (devBuild) {
+  console.log('Webpack dev build for Rails'); // eslint-disable-line no-console
+  module.exports.devtool = 'eval-source-map';
+} else {
+  config.plugins.push(
+    new webpack.optimize.DedupePlugin()
+  );
+  console.log('Webpack production build for Rails'); // eslint-disable-line no-console
+}

data/lib/generators/react_on_rails/templates/base/base/config/initializers/react_on_rails.rb

@@ -0,0 +1,26 @@
+# Shown below are the defaults for configuration
+ReactOnRails.configure do |config|
+  # Client bundles are configured in application.js
+
+  # Server rendering:
+  # Server bundle is a single file for all server rendering of components.
+  config.server_bundle_js_file = "app/assets/javascripts/generated/server-bundle.js"
+  # increase if you're on JRuby
+  config.server_renderer_pool_size = 1
+  # seconds
+  config.server_renderer_timeout = 20
+  # If set to true, this forces Rails to reload the server bundle if it is modified
+  config.development_mode = Rails.env.development?
+  # For server rendering. This can be set to false so that server side messages are discarded.
+  # Default is true. Be cautious about turning this off.
+  config.replay_console = true
+  # Default is true. Logs server rendering messags to Rails.logger.info
+  config.logging_on_server = true
+
+  # The following options can be overriden by passing to the helper method:
+
+  # Default is false
+  config.prerender = false
+  # Default is true for development, off otherwise
+  config.trace = Rails.env.development?
+end

data/lib/generators/react_on_rails/templates/base/base/lib/tasks/assets.rake.tt

@@ -0,0 +1,26 @@
+# lib/tasks/assets.rake
+# The webpack task must run before assets:environment task.
+# Otherwise Sprockets cannot find the files that webpack produces.
+# This is the secret sauce for how a Heroku deployment knows to create the webpack generated JavaScript files.
+Rake::Task["assets:precompile"]
+  .clear_prerequisites
+  .enhance(["assets:compile_environment"])
+
+namespace :assets do
+  # In this task, set prerequisites for the assets:precompile task
+  task compile_environment: :webpack do
+    Rake::Task["assets:environment"].invoke
+  end
+
+  desc "Compile assets with webpack"
+  task :webpack do
+    sh "cd client && npm run build:client"
+    <%- if options[:server_rendering] -%>
+    sh "cd client && npm run build:server"
+    <%- end -%>
+  end
+
+  task :clobber do
+    rm_r Dir.glob(Rails.root.join("app/assets/javascripts/generated/*"))
+  end
+end

data/lib/generators/react_on_rails/templates/base/base/lib/tasks/linters.rake.tt

@@ -0,0 +1,88 @@
+if %w(development test).include? Rails.env
+  namespace :lint do
+    <%- if options.ruby_linters? -%>
+    # This fails: https://github.com/bbatsov/rubocop/issues/1840
+    # RuboCop::RakeTask.new
+    # require "rubocop/rake_task"
+    desc "Run Rubocop lint in shell. Specify option fix to auto-correct (and don't have uncommitted files!)."
+    task :rubocop, [:fix] => [] do |_t, args|
+      def to_bool(str)
+        return true if str =~ (/^(true|t|yes|y|1)$/i)
+        return false if str.blank? || str =~ (/^(false|f|no|n|0)$/i)
+        fail ArgumentError, "invalid value for Boolean: \"#{str}\""
+      end
+
+      fix = (args.fix == "fix") || to_bool(args.fix)
+      cmd = "rubocop -S -D#{fix ? ' -a' : ''} ."
+      puts "Running Rubocop Linters via `#{cmd}`#{fix ? ' auto-correct is turned on!' : ''}"
+      sh cmd
+    end
+
+    desc "Run ruby-lint as shell"
+    task :ruby do
+      cmd = "ruby-lint app config spec lib"
+      puts "Running ruby-lint Linters via `#{cmd}`"
+      sh cmd
+    end
+
+    desc "See docs for task 'scss_lint'"
+    task :scss do
+      begin
+        require 'scss_lint/rake_task'
+        SCSSLint::RakeTask.new do |t|
+          t.files = ["app/assets/stylesheets/", "client/assets/stylesheets/"]
+        end
+        Rake::Task[:scss_lint].invoke
+      rescue LoadError
+        puts "** add gem 'scss_lint' to your Gemfile for scss linting."
+      end
+    end
+
+    # desc "haml_lint"
+    # task :haml_lint do
+    #   require 'haml_lint/rake_task'
+
+    #   HamlLint::RakeTask.new do |t|
+    #     t.files = ["app/views"]
+    #   end
+    # end
+
+    # desc "See docs for task 'slim_lint'"
+    # task slim: :slim_lint
+    # SlimLint::RakeTask.new do |t|
+    #   t.files = ["app/views"]
+    # end
+
+    <%- end -%>
+    <%- unless options.skip_js_linters? -%>
+    desc "eslint"
+    task :eslint do
+      cmd = "cd client && npm run eslint . -- --ext .jsx,.js"
+      puts "Running eslint via `#{cmd}`"
+      sh cmd
+    end
+
+    desc "jscs"
+    task :jscs do
+      cmd = "cd client && npm run jscs ."
+      puts "Running jscs via `#{cmd}`"
+      sh cmd
+    end
+
+    desc "JS Linting"
+    task js: [:eslint, :jscs] do
+      puts "Completed running all JavaScript Linters"
+    end
+    <%- end -%>
+
+    <%- enabled_linters = [] -%>
+    <%- enabled_linters << %i(rubocop ruby scss) if options.ruby_linters? -%>
+    <%- enabled_linters << %i(js) unless options.skip_js_linters? -%>
+    task lint: <%= enabled_linters.flatten %> do
+      puts "Completed all linting"
+    end
+  end
+
+  desc "Runs all linters. Run `rake -D lint` to see all available lint options"
+  task lint: ["lint:lint"]
+end

data/lib/generators/react_on_rails/templates/base/base/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "react-webpack-rails-tutorial",
+  "version": "1.1.1",
+  "description": "Built using the react_on_rails generator. Allows you to run npm install from root.",
+  "main": "server.js",
+  "engines": {
+    "node": "4.2.0",
+    "npm": "3.3.6"
+  },
+  "scripts": {
+    "postinstall": "cd client && npm install",
+    "test": "rspec && (cd client && npm run lint)"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/shakacode/react-webpack-rails-tutorial.git"
+  },
+  "keywords": [
+    "react",
+    "tutorial",
+    "comment",
+    "example"
+  ],
+  "author": "justin808",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/shakacode/react-webpack-rails-tutorial/issues"
+  },
+  "homepage": "https://github.com/shakacode/react-webpack-rails-tutorial",
+  "dependencies": {}
+}

data/lib/generators/react_on_rails/templates/base/server_rendering/client/app/bundles/HelloWorld/startup/serverRegistration.jsx

@@ -0,0 +1,4 @@
+import ReactOnRails from 'react-on-rails';
+import HelloWorldApp from './HelloWorldAppServer';
+
+ReactOnRails.register({ HelloWorldApp });

data/lib/generators/react_on_rails/templates/base/server_rendering/client/webpack.server.rails.config.js

@@ -0,0 +1,39 @@
+// Webpack configuration for server bundle
+
+const webpack = require('webpack');
+const path = require('path');
+
+const devBuild = process.env.NODE_ENV !== 'production';
+const nodeEnv = devBuild ? 'development' : 'production';
+
+module.exports = {
+
+  // the project dir
+  context: __dirname,
+  entry: [
+    'babel-polyfill',
+    './app/bundles/HelloWorld/startup/serverRegistration'
+  ],
+  output: {
+    filename: 'server-bundle.js',
+    path: '../app/assets/javascripts/generated',
+  },
+  resolve: {
+    extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx', 'config.js'],
+    alias: {
+      lib: path.join(process.cwd(), 'app', 'lib'),
+    },
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: JSON.stringify('production'),
+      },
+    }),
+  ],
+  module: {
+    loaders: [
+      {test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/},
+    ],
+  },
+};