react_on_rails 1.0.0.pre → 1.0.0

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

@@ -0,0 +1,58 @@
+// 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 bodyParser = require('body-parser');
+var webpack = require('webpack');
+var WebpackDevServer = require('webpack-dev-server');
+var jade = require('jade');
+var sleep = require('sleep');
+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,
+  },
+});
+
+// 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

@@ -0,0 +1,58 @@
+// Common client-side webpack configuration used by webpack.hot.config and webpack.rails.config.
+
+const webpack = require('webpack');
+const path = require('path');
+
+module.exports = {
+
+  // the project dir
+  context: __dirname,
+  entry: {
+
+    // See use of 'vendor' in the CommonsChunkPlugin inclusion below.
+    vendor: [
+      'babel-core/polyfill',
+      'jquery',
+      'jquery-ujs',
+      'react',
+      'react-dom',
+    ],
+
+    // This will contain the app entry points defined by webpack.hot.config and webpack.rails.config
+    app: [
+      './app/bundles/HelloWorld/startup/clientGlobals',
+    ],
+  },
+  resolve: {
+    extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx', '.scss', '.css', 'config.js'],
+    alias: {
+      lib: path.join(process.cwd(), 'app', 'lib'),
+    },
+  },
+  plugins: [
+
+    // 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: [
+
+      // React is necessary for the client rendering:
+      {test: require.resolve('react'), loader: 'expose?React'},
+      {test: require.resolve('react-dom'), loader: 'expose?ReactDOM'},
+      {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

@@ -0,0 +1,65 @@
+// 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',
+
+  // See: https://github.com/shakacode/bootstrap-sass-loader
+  // We're using the bootstrap-sass loader.
+  'bootstrap-sass!./bootstrap-sass.config.js'
+);
+
+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'],
+      extra: {
+        '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,45 @@
+// 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
+config.entry.vendor.unshift(
+  'es5-shim/es5-shim',
+  'es5-shim/es5-sham'
+);
+
+// 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.DefinePlugin({
+      'process.env': {
+        NODE_ENV: JSON.stringify('production'),
+      },
+    }),
+    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,30 @@
+# 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.
+  # It is important to set this to "" if you are not doing server rendering to avoid an extraneous log warning
+  # that the default file of server-bundle.js does not exist.
+  config.server_bundle_js_file = "app/assets/javascripts/generated/server-bundle.js" # This is the default
+  # 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.reload_server_js_every_request = 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 false, meaning that you expose ReactComponents directly
+  config.generator_function = 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

@@ -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"
+    sh "cd client && npm run build:server"
+  end
+
+  task :clobber do
+    rm_rf "#{Rails.application.config.root}/app/assets/javascripts/generated/vendor-bundle.js"
+    rm_rf "#{Rails.application.config.root}/app/assets/javascripts/generated/client-bundle.js"
+    rm_rf "#{Rails.application.config.root}/app/assets/javascripts/generated/server-bundle.js"
+  end
+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/serverGlobals.jsx

@@ -0,0 +1,3 @@
+import HelloWorldAppServer from './HelloWorldAppServer';
+
+global.HelloWorldApp = HelloWorldAppServer;

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

@@ -0,0 +1,37 @@
+// Wbpack configuration for server bundle
+
+const webpack = require('webpack');
+const path = require('path');
+
+module.exports = {
+
+  // the project dir
+  context: __dirname,
+  entry: ['./app/bundles/HelloWorld/startup/serverGlobals'],
+  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/},
+
+      // React is necessary for the client rendering:
+      {test: require.resolve('react'), loader: 'expose?React'},
+      {test: require.resolve('react-dom/server'), loader: 'expose?ReactDOMServer'},
+    ],
+  },
+};

data/lib/generators/react_on_rails/templates/bootstrap/app/assets/stylesheets/_bootstrap-custom.scss

@@ -0,0 +1,63 @@
+// This file loads Bootstrap by importing components explicitly instead of doing `@import 'bootstrap';`
+// Doing so allows for customization of exactly which components are imported.
+// The components themselves are made available via bootstrap-sass (https://github.com/twbs/bootstrap-sass#sass)
+
+// IMPORTANT: Make sure to keep the customizations defined in this file
+//            in-sync with the ones defined in client/bootstrap-sass.config.js.
+
+// For a reference on customizations,refer to:
+//  https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/_bootstrap.scss
+
+// If you are looking to merely change bootstrap variables from their default,
+// you should instead declare them in client/assets/stylesheets/_post-bootstrap.scss
+
+// Core variables and mixins
+@import 'bootstrap/variables';
+@import 'bootstrap/mixins';
+
+// Reset and dependencies
+@import 'bootstrap/normalize';
+@import 'bootstrap/print';
+@import 'bootstrap/glyphicons';
+
+// Core CSS
+@import 'bootstrap/scaffolding';
+@import 'bootstrap/type';
+@import 'bootstrap/code';
+@import 'bootstrap/grid';
+@import 'bootstrap/tables';
+@import 'bootstrap/forms';
+@import 'bootstrap/buttons';
+
+// Components
+@import 'bootstrap/component-animations';
+@import 'bootstrap/dropdowns';
+@import 'bootstrap/button-groups';
+@import 'bootstrap/input-groups';
+@import 'bootstrap/navs';
+@import 'bootstrap/navbar';
+@import 'bootstrap/breadcrumbs';
+@import 'bootstrap/pagination';
+@import 'bootstrap/pager';
+@import 'bootstrap/labels';
+@import 'bootstrap/badges';
+@import 'bootstrap/jumbotron';
+@import 'bootstrap/thumbnails';
+@import 'bootstrap/alerts';
+@import 'bootstrap/progress-bars';
+@import 'bootstrap/media';
+@import 'bootstrap/list-group';
+@import 'bootstrap/panels';
+@import 'bootstrap/responsive-embed';
+@import 'bootstrap/wells';
+@import 'bootstrap/close';
+
+// Components w/ JavaScript
+@import 'bootstrap/modals';
+@import 'bootstrap/tooltip';
+@import 'bootstrap/popovers';
+@import 'bootstrap/carousel';
+
+// Utility classes
+@import 'bootstrap/utilities';
+@import 'bootstrap/responsive-utilities';

data/lib/generators/react_on_rails/templates/bootstrap/client/assets/stylesheets/_post-bootstrap.scss

@@ -0,0 +1,10 @@
+// The Rails server imports this file via app/assets/stylesheets/application.css.scss
+// The webpack HMR dev server loads this file via client/bootstrap-sass.config.js
+
+// In either case, this file is loaded AFTER bootstrap has been loaded.
+// This is where you can add your own styles and override bootstrap styles
+// utilizing bootstrap variables and mixins.
+
+.this-works {
+  color: orange !important;
+}

data/lib/generators/react_on_rails/templates/bootstrap/client/assets/stylesheets/_pre-bootstrap.scss

@@ -0,0 +1,8 @@
+// The Rails server imports this file via app/assets/stylesheets/application.css.scss
+// The webpack HMR dev server loads this file via client/bootstrap-sass.config.js
+
+// In either case, this file is loaded BEFORE bootstrap has been loaded.
+// Use it to define variables BEFORE bootstrap loads. See http://getbootstrap.com/customize/
+
+// This is a file that provides a fallback for `img-url` and fonts
+@import 'react-on-rails-sass-helper';