diff --git a/lib/generators/react_on_rails/base_generator.rb b/lib/generators/react_on_rails/base_generator.rb
index 8d80fd037..0a51ddaaa 100644
--- a/lib/generators/react_on_rails/base_generator.rb
+++ b/lib/generators/react_on_rails/base_generator.rb
@@ -37,6 +37,26 @@ def copy_base_files
         base_files.each { |file| copy_file("#{base_path}#{file}", file) }
       end
 
+      def copy_webpack_config
+        puts "Adding Webpack config"
+        base_path = "base/base/"
+        base_files = %w[babel.config.js
+                        config/webpack/clientWebpackConfig.js
+                        config/webpack/commonWebpackConfig.js
+                        config/webpack/development.js
+                        config/webpack/production.js
+                        config/webpack/serverWebpackConfig.js
+                        config/webpack/webpackConfig.js]
+        base_files.each { |file| copy_file("#{base_path}#{file}", file) }
+      end
+
+      def copy_webpacker_config
+        puts "Adding Webpacker v6 config"
+        base_path = "base/base/"
+        base_files = %w[config/webpacker.yml]
+        base_files.each { |file| copy_file("#{base_path}#{file}", file) }
+      end
+
       def add_base_gems_to_gemfile
         gem "mini_racer", platforms: :ruby
         run "bundle"
@@ -51,6 +71,19 @@ def add_yarn_dependencies
           puts "Adding the lastest react-on-rails NPM module. Double check this is correct in package.json"
           run "yarn add react-on-rails --exact"
         end
+
+        puts "Adding React dependencies"
+        run "yarn add react react-dom @babel/preset-react prop-types babel-plugin-macros \
+             babel-plugin-transform-react-remove-prop-types"
+
+        puts "Adding TypeScript dependencies"
+        run "yarn add typescript @babel/preset-typescript @types/react @types/react-dom"
+
+        puts "Adding CSS handlers"
+        run "yarn add css-loader css-minimizer-webpack-plugin mini-css-extract-plugin style-loader"
+
+        puts "Adding dev dependencies"
+        run "yarn add -D @pmmmwh/react-refresh-webpack-plugin fork-ts-checker-webpack-plugin react-refresh"
       end
 
       def append_to_spec_rails_helper
diff --git a/lib/generators/react_on_rails/react_no_redux_generator.rb b/lib/generators/react_on_rails/react_no_redux_generator.rb
index afc2380aa..aeb82dbdc 100644
--- a/lib/generators/react_on_rails/react_no_redux_generator.rb
+++ b/lib/generators/react_on_rails/react_no_redux_generator.rb
@@ -12,7 +12,10 @@ class ReactNoReduxGenerator < Rails::Generators::Base
 
       def copy_base_files
         base_js_path = "base/base"
-        base_files = %w[app/javascript/bundles/HelloWorld/components/HelloWorld.jsx]
+        base_files = %w[app/javascript/packs/server-bundle.js
+                        app/javascript/bundles/HelloWorld/components/HelloWorld.jsx
+                        app/javascript/bundles/HelloWorld/components/HelloWorldServer.js
+                        app/javascript/bundles/HelloWorld/components/HelloWorld.module.css]
         base_files.each { |file| copy_file("#{base_js_path}/#{file}", file) }
       end
 
diff --git a/lib/generators/react_on_rails/templates/base/base/app/javascript/bundles/HelloWorld/components/HelloWorld.jsx b/lib/generators/react_on_rails/templates/base/base/app/javascript/bundles/HelloWorld/components/HelloWorld.jsx
index f7e0487e3..bc60ffebe 100644
--- a/lib/generators/react_on_rails/templates/base/base/app/javascript/bundles/HelloWorld/components/HelloWorld.jsx
+++ b/lib/generators/react_on_rails/templates/base/base/app/javascript/bundles/HelloWorld/components/HelloWorld.jsx
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
+import style from './HelloWorld.module.css';
 
 const HelloWorld = (props) => {
   const [name, setName] = useState(props.name);
@@ -9,7 +10,7 @@ const HelloWorld = (props) => {
       <h3>Hello, {name}!</h3>
       <hr />
       <form>
-        <label htmlFor="name">
+        <label className={style.bold} htmlFor="name">
           Say hello to:
           <input id="name" type="text" value={name} onChange={(e) => setName(e.target.value)} />
         </label>
diff --git a/lib/generators/react_on_rails/templates/base/base/app/javascript/bundles/HelloWorld/components/HelloWorld.module.css b/lib/generators/react_on_rails/templates/base/base/app/javascript/bundles/HelloWorld/components/HelloWorld.module.css
new file mode 100644
index 000000000..9a623e144
--- /dev/null
+++ b/lib/generators/react_on_rails/templates/base/base/app/javascript/bundles/HelloWorld/components/HelloWorld.module.css
@@ -0,0 +1,3 @@
+.bold {
+    color: green;
+}
diff --git a/lib/generators/react_on_rails/templates/base/base/app/javascript/bundles/HelloWorld/components/HelloWorldServer.js b/lib/generators/react_on_rails/templates/base/base/app/javascript/bundles/HelloWorld/components/HelloWorldServer.js
new file mode 100644
index 000000000..aad6e4849
--- /dev/null
+++ b/lib/generators/react_on_rails/templates/base/base/app/javascript/bundles/HelloWorld/components/HelloWorldServer.js
@@ -0,0 +1,5 @@
+import HelloWorld from './HelloWorld';
+// This could be specialized for server rendering
+// For example, if using React-Router, we'd have the SSR setup here.
+
+export default HelloWorld;
diff --git a/lib/generators/react_on_rails/templates/base/base/app/javascript/packs/server-bundle.js b/lib/generators/react_on_rails/templates/base/base/app/javascript/packs/server-bundle.js
new file mode 100644
index 000000000..2500bef98
--- /dev/null
+++ b/lib/generators/react_on_rails/templates/base/base/app/javascript/packs/server-bundle.js
@@ -0,0 +1,8 @@
+import ReactOnRails from 'react-on-rails'
+
+import HelloWorld from '../bundles/HelloWorld/components/HelloWorldServer'
+
+// This is how react_on_rails can see the HelloWorld in the browser.
+ReactOnRails.register({
+  HelloWorld,
+})
diff --git a/lib/generators/react_on_rails/templates/base/base/babel.config.js b/lib/generators/react_on_rails/templates/base/base/babel.config.js
new file mode 100644
index 000000000..cdfa99159
--- /dev/null
+++ b/lib/generators/react_on_rails/templates/base/base/babel.config.js
@@ -0,0 +1,104 @@
+// The source code including full typescript support is available at:
+// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/babel.config.js
+
+module.exports = function (api) {
+  const validEnv = ['development', 'test', 'production']
+  const currentEnv = api.env()
+  // https://babeljs.io/docs/en/config-files#apienv
+  // api.env is almost the NODE_ENV
+  const isDevelopmentEnv = api.env('development')
+  const isProductionEnv = api.env('production')
+  const isTestEnv = api.env('test')
+
+  if (!validEnv.includes(currentEnv)) {
+    throw new Error(`${'Please specify a valid `NODE_ENV` or ' +
+      '`BABEL_ENV` environment variables. Valid values are "development", ' +
+      '"test", and "production". Instead, received: '}${
+      JSON.stringify(currentEnv)
+    }.`)
+  }
+
+  return {
+    presets: [
+      isTestEnv && [
+        '@babel/preset-env',
+        {
+          targets: {
+            node: 'current',
+          },
+          modules: 'commonjs',
+        },
+        '@babel/preset-react',
+      ],
+      (isProductionEnv || isDevelopmentEnv) && [
+        '@babel/preset-env',
+        {
+          forceAllTransforms: true,
+          useBuiltIns: 'entry',
+          corejs: 3,
+          modules: false,
+          exclude: ['transform-typeof-symbol'],
+        },
+      ],
+      [
+        '@babel/preset-react',
+        {
+          development: isDevelopmentEnv || isTestEnv,
+          useBuiltIns: true,
+        },
+      ],
+      ['@babel/preset-typescript', { allExtensions: true, isTSX: true }],
+    ].filter(Boolean),
+    plugins: [
+      'babel-plugin-macros',
+      '@babel/plugin-syntax-dynamic-import',
+      isTestEnv && 'babel-plugin-dynamic-import-node',
+      '@babel/plugin-transform-destructuring',
+      [
+        '@babel/plugin-proposal-class-properties',
+        {
+          loose: true,
+        },
+      ],
+      [
+        '@babel/plugin-proposal-object-rest-spread',
+        {
+          useBuiltIns: true,
+        },
+      ],
+      [
+        '@babel/plugin-transform-runtime',
+        {
+          helpers: false,
+          regenerator: true,
+          corejs: false,
+        },
+      ],
+      [
+        '@babel/plugin-transform-regenerator',
+        {
+          async: false,
+        },
+      ],
+      [
+        '@babel/plugin-proposal-private-property-in-object',
+        {
+          loose: true,
+        },
+      ],
+      [
+        '@babel/plugin-proposal-private-methods',
+        {
+          loose: true,
+        },
+      ],
+      process.env.WEBPACK_SERVE && 'react-refresh/babel',
+      isProductionEnv && [
+        'babel-plugin-transform-react-remove-prop-types',
+        {
+          removeImport: true,
+        },
+      ],
+    ].filter(Boolean),
+  }
+}
diff --git a/lib/generators/react_on_rails/templates/base/base/config/initializers/react_on_rails.rb b/lib/generators/react_on_rails/templates/base/base/config/initializers/react_on_rails.rb
index f3111cbde..0b8778009 100644
--- a/lib/generators/react_on_rails/templates/base/base/config/initializers/react_on_rails.rb
+++ b/lib/generators/react_on_rails/templates/base/base/config/initializers/react_on_rails.rb
@@ -41,5 +41,5 @@
   # different. You should have ONE server bundle which can create all of your server rendered
   # React components.
   #
-  config.server_bundle_js_file = "hello-world-bundle.js"
+  config.server_bundle_js_file = "server-bundle.js"
 end
diff --git a/lib/generators/react_on_rails/templates/base/base/config/webpack/clientWebpackConfig.js b/lib/generators/react_on_rails/templates/base/base/config/webpack/clientWebpackConfig.js
new file mode 100644
index 000000000..cb674b721
--- /dev/null
+++ b/lib/generators/react_on_rails/templates/base/base/config/webpack/clientWebpackConfig.js
@@ -0,0 +1,18 @@
+// The source can be found at:
+// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/clientWebpackConfig.js
+
+const commonWebpackConfig = require('./commonWebpackConfig')
+
+const configureClient = () => {
+  const clientConfig = commonWebpackConfig()
+
+  // server-bundle is special and should ONLY be built by the serverConfig
+  // In case this entry is not deleted, a very strange "window" not found
+  // error shows referring to window["webpackJsonp"]. That is because the
+  // client config is going to try to load chunks.
+  delete clientConfig.entry['server-bundle']
+
+  return clientConfig
+}
+
+module.exports = configureClient
diff --git a/lib/generators/react_on_rails/templates/base/base/config/webpack/commonWebpackConfig.js b/lib/generators/react_on_rails/templates/base/base/config/webpack/commonWebpackConfig.js
new file mode 100644
index 000000000..8cb88e869
--- /dev/null
+++ b/lib/generators/react_on_rails/templates/base/base/config/webpack/commonWebpackConfig.js
@@ -0,0 +1,17 @@
+// The source can be found at:
+// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/commonWebpackConfig.js
+
+// Common configuration applying to client and server configuration
+
+const { webpackConfig: baseClientWebpackConfig, merge } = require('@rails/webpacker')
+
+const commonOptions = {
+  resolve: {
+    extensions: ['.css', '.ts', '.tsx'],
+  },
+}
+
+// Copy the object using merge b/c the baseClientWebpackConfig and commonOptions are mutable globals
+const commonWebpackConfig = () => (merge({}, baseClientWebpackConfig, commonOptions))
+
+module.exports = commonWebpackConfig
diff --git a/lib/generators/react_on_rails/templates/base/base/config/webpack/development.js b/lib/generators/react_on_rails/templates/base/base/config/webpack/development.js
new file mode 100644
index 000000000..c3a96e5f5
--- /dev/null
+++ b/lib/generators/react_on_rails/templates/base/base/config/webpack/development.js
@@ -0,0 +1,24 @@
+// The source code including full typescript support is available at:
+// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/development.js
+
+process.env.NODE_ENV = process.env.NODE_ENV || 'development'
+
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
+
+const { devServer, inliningCss } = require('@rails/webpacker')
+
+const webpackConfig = require('./webpackConfig')
+
+const developmentEnvOnly = (clientWebpackConfig, _serverWebpackConfig) => {
+  // plugins
+  if (inliningCss) {
+    // Note, when this is run, we're building the server and client bundles in separate processes.
+    // Thus, this plugin is not applied.
+    clientWebpackConfig.plugins.push(new ReactRefreshWebpackPlugin({
+      overlay: {
+        sockPort: devServer.port,
+      },
+    }))
+  }
+}
+module.exports = webpackConfig(developmentEnvOnly)
diff --git a/lib/generators/react_on_rails/templates/base/base/config/webpack/production.js b/lib/generators/react_on_rails/templates/base/base/config/webpack/production.js
new file mode 100644
index 000000000..7bd119aec
--- /dev/null
+++ b/lib/generators/react_on_rails/templates/base/base/config/webpack/production.js
@@ -0,0 +1,12 @@
+// The source can be found at:
+// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/production.js
+
+process.env.NODE_ENV = process.env.NODE_ENV || 'production'
+
+const webpackConfig = require('./webpackConfig')
+
+const productionEnvOnly = (_clientWebpackConfig, _serverWebpackConfig) => {
+  // place any code here that is for production only
+}
+
+module.exports = webpackConfig(productionEnvOnly)
diff --git a/lib/generators/react_on_rails/templates/base/base/config/webpack/serverWebpackConfig.js b/lib/generators/react_on_rails/templates/base/base/config/webpack/serverWebpackConfig.js
new file mode 100644
index 000000000..149cd8c2e
--- /dev/null
+++ b/lib/generators/react_on_rails/templates/base/base/config/webpack/serverWebpackConfig.js
@@ -0,0 +1,116 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable no-param-reassign */
+
+// The source can be found at:
+// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/serverWebpackConfig.js
+
+const { merge, config } = require('@rails/webpacker')
+const commonWebpackConfig = require('./commonWebpackConfig')
+
+const webpack = require('webpack')
+
+const configureServer = () => {
+  // We need to use "merge" because the clientConfigObject, EVEN after running
+  // toWebpackConfig() is a mutable GLOBAL. Thus any changes, like modifying the
+  // entry value will result in changing the client config!
+  // Using webpack-merge into an empty object avoids this issue.
+  const serverWebpackConfig = commonWebpackConfig()
+
+  // We just want the single server bundle entry
+  const serverEntry = {
+    'server-bundle': serverWebpackConfig.entry['server-bundle'],
+  }
+
+  if (!serverEntry['server-bundle']) {
+    throw new Error('Create a pack with the file name \'server-bundle.js\' containing all the server rendering files')
+  }
+
+  serverWebpackConfig.entry = serverEntry
+
+  // Remove the mini-css-extract-plugin from the style loaders because
+  // the client build will handle exporting CSS.
+  // replace file-loader with null-loader
+  serverWebpackConfig.module.rules.forEach((loader) => {
+    if (loader.use && loader.use.filter) {
+      loader.use = loader.use.filter((item) =>
+        !(typeof item === 'string' && item.match(/mini-css-extract-plugin/)))
+    }
+  })
+
+  // No splitting of chunks for a server bundle
+  serverWebpackConfig.optimization = {
+    minimize: false,
+  }
+  serverWebpackConfig.plugins.unshift(new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }))
+
+  // Custom output for the server-bundle that matches the config in
+  // config/initializers/react_on_rails.rb
+  serverWebpackConfig.output = {
+    filename: 'server-bundle.js',
+    globalObject: 'this',
+    // If using the React on Rails Pro node server renderer, uncomment the next line
+    // libraryTarget: 'commonjs2',
+    path: config.outputPath,
+    publicPath: config.publicPath,
+    // https://webpack.js.org/configuration/output/#outputglobalobject
+  }
+
+  // Don't hash the server bundle b/c would conflict with the client manifest
+  // And no need for the MiniCssExtractPlugin
+  serverWebpackConfig.plugins = serverWebpackConfig.plugins.filter((plugin) =>
+    plugin.constructor.name !== 'WebpackAssetsManifest' &&
+      plugin.constructor.name !== 'MiniCssExtractPlugin' &&
+      plugin.constructor.name !== 'ForkTsCheckerWebpackPlugin')
+
+  // Configure loader rules for SSR
+  // Remove the mini-css-extract-plugin from the style loaders because
+  // the client build will handle exporting CSS.
+  // replace file-loader with null-loader
+  const { rules } = serverWebpackConfig.module;
+  rules.forEach((rule) => {
+    if (Array.isArray(rule.use)) {
+      // remove the mini-css-extract-plugin and style-loader
+      rule.use = rule.use.filter((item) => {
+        let testValue;
+        if (typeof item === 'string') {
+          testValue = item;
+        } else if (typeof item.loader === 'string') {
+          testValue = item.loader;
+        }
+        return !(testValue.match(/mini-css-extract-plugin/) || testValue === 'style-loader');
+      });
+      const cssLoader = rule.use.find((item) => {
+        let testValue;
+
+        if (typeof item === 'string') {
+          testValue = item;
+        } else if (typeof item.loader === 'string') {
+          testValue = item.loader;
+        }
+
+        return testValue.includes('css-loader');
+      });
+      if (cssLoader && cssLoader.options) {
+        cssLoader.options.modules = { exportOnlyLocals: true };
+      }
+
+      // Skip writing image files during SSR by setting emitFile to false
+    } else if (rule.use && (rule.use.loader === 'url-loader' || rule.use.loader === 'file-loader')) {
+      rule.use.options.emitFile = false;
+    }
+  });
+
+  // eval works well for the SSR bundle because it's the fastest and shows
+  // lines in the server bundle which is good for debugging SSR
+  // The default of cheap-module-source-map is slow and provides poor info.
+  serverWebpackConfig.devtool = 'eval'
+
+  // If using the default 'web', then libraries like Emotion and loadable-components
+  // break with SSR. The fix is to use a node renderer and change the target.
+  // If using the React on Rails Pro node server renderer, uncomment the next line
+  // serverWebpackConfig.target = 'node'
+
+  return serverWebpackConfig
+}
+
+module.exports = configureServer
diff --git a/lib/generators/react_on_rails/templates/base/base/config/webpack/webpackConfig.js b/lib/generators/react_on_rails/templates/base/base/config/webpack/webpackConfig.js
new file mode 100644
index 000000000..e4b075893
--- /dev/null
+++ b/lib/generators/react_on_rails/templates/base/base/config/webpack/webpackConfig.js
@@ -0,0 +1,37 @@
+// The source can be found at:
+// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/webpackConfig.js
+
+const clientWebpackConfig = require('./clientWebpackConfig')
+const serverWebpackConfig = require('./serverWebpackConfig')
+
+const webpackConfig = (envSpecific) => {
+  const clientConfig = clientWebpackConfig()
+  const serverConfig = serverWebpackConfig()
+
+  if (envSpecific) {
+    envSpecific(clientConfig, serverConfig)
+  }
+
+  let result
+  // For HMR, need to separate the the client and server webpack configurations
+  if (process.env.WEBPACK_SERVE || process.env.CLIENT_BUNDLE_ONLY) {
+    // eslint-disable-next-line no-console
+    console.log('[React on Rails] Creating only the client bundles.')
+    result = clientConfig
+  } else if (process.env.SERVER_BUNDLE_ONLY) {
+    // eslint-disable-next-line no-console
+    console.log('[React on Rails] Creating only the server bundle.')
+    result = serverConfig
+  } else {
+    // default is the standard client and server build
+    // eslint-disable-next-line no-console
+    console.log('[React on Rails] Creating both client and server bundles.')
+    result = [clientConfig, serverConfig]
+  }
+
+  // To debug, uncomment next line and inspect "result"
+  // debugger
+  return result
+}
+
+module.exports = webpackConfig
diff --git a/lib/generators/react_on_rails/templates/base/base/config/webpacker.yml b/lib/generators/react_on_rails/templates/base/base/config/webpacker.yml
new file mode 100644
index 000000000..a3de9872b
--- /dev/null
+++ b/lib/generators/react_on_rails/templates/base/base/config/webpacker.yml
@@ -0,0 +1,62 @@
+# Note: You must restart bin/webpack-dev-server for changes to take effect
+
+default: &default
+  source_path: app/javascript
+  source_entry_path: packs
+  public_root_path: public
+  public_output_path: packs
+  cache_path: tmp/webpacker
+  webpack_compile_output: true
+
+  # Additional paths webpack should lookup modules
+  # ['app/assets', 'engine/foo/app/assets']
+  additional_paths: []
+
+  # Reload manifest.json on all requests so we reload latest compiled packs
+  cache_manifest: false
+
+development:
+  <<: *default
+  # This is false since we're running `bin/webpack -w` in Procfile.dev-setic
+  compile: false
+
+  # Reference: https://webpack.js.org/configuration/dev-server/
+  dev_server:
+    https: false
+    host: localhost
+    port: 3035
+    # Hot Module Replacement updates modules while the application is running without a full reload
+    hmr: true
+    client:
+      # Should we show a full-screen overlay in the browser when there are compiler errors or warnings?
+      overlay: true
+      # May also be a string
+      # webSocketURL:
+      #  hostname: "0.0.0.0"
+      #  pathname: "/ws"
+      #  port: 8080
+    compress: true
+    # Note that apps that do not check the host are vulnerable to DNS rebinding attacks
+    allowed_hosts: [ 'localhost' ]
+    pretty: true
+    headers:
+      'Access-Control-Allow-Origin': '*'
+    static:
+      watch:
+        ignored: '**/node_modules/**'
+
+test:
+  <<: *default
+  compile: true
+
+  # Compile test packs to a separate directory
+  public_output_path: packs-test
+
+production:
+  <<: *default
+
+  # Production depends on precompilation of packs prior to booting for performance.
+  compile: false
+
+  # Cache manifest.json for performance
+  cache_manifest: true
diff --git a/lib/react_on_rails/helper.rb b/lib/react_on_rails/helper.rb
index 9e638502d..13f25128a 100644
--- a/lib/react_on_rails/helper.rb
+++ b/lib/react_on_rails/helper.rb
@@ -54,6 +54,17 @@ module Helper
     # random_dom_id can be set to override the default from the config/initializers. That's only
     # used if you have multiple instance of the same component on the Rails view.
     def react_component(component_name, options = {})
+      config_server_bundle_js = ReactOnRails.configuration.server_bundle_js_file
+      if options[:prerender] == true && (config_server_bundle_js.nil? || config_server_bundle_js == "")
+        msg = <<~MSG
+          The `prerender` option to allow Server Side Rendering is marked as true but the ReactOnRails configuration
+          for `server_bundle_js_file` is nil or not present in `config/initializers/react_on_rails.rb`.
+          Set `config.server_bundle_js_file` to your javascript bundle to allow server side rendering.
+          Read more at https://www.shakacode.com/react-on-rails/docs/guides/react-server-rendering/
+        MSG
+        raise ReactOnRails::Error, msg
+      end
+
       internal_result = internal_react_component(component_name, options)
       server_rendered_html = internal_result[:result]["html"]
       console_script = internal_result[:result]["consoleReplayScript"]
diff --git a/rakelib/task_helpers.rb b/rakelib/task_helpers.rb
index a95e7722c..975b6ea3e 100644
--- a/rakelib/task_helpers.rb
+++ b/rakelib/task_helpers.rb
@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+require "bundler"
+
 module ReactOnRails
   module TaskHelpers
     # Returns the root folder of the react_on_rails gem
diff --git a/spec/dummy/.gitignore b/spec/dummy/.gitignore
index c09620ca5..108be19c4 100644
--- a/spec/dummy/.gitignore
+++ b/spec/dummy/.gitignore
@@ -21,3 +21,8 @@
 /public/webpack/*
 
 /spec/examples.txt
+
+#Ignore ReScript build files
+/.merlin
+/lib/bs/
+/.bsb.lock
\ No newline at end of file
diff --git a/spec/dummy/Procfile.dev b/spec/dummy/Procfile.dev
index eb99946ae..98d053928 100644
--- a/spec/dummy/Procfile.dev
+++ b/spec/dummy/Procfile.dev
@@ -2,6 +2,9 @@
 
 rails: rails s -p 3000
 
+# Bundle ReScript .res files
+rescript: yarn re:start
+
 # Run the hot reload server for client development
 webpack-dev-server: bin/webpack-dev-server
 
diff --git a/spec/dummy/app/views/pages/client_side_rescript_hello_world.html.erb b/spec/dummy/app/views/pages/client_side_rescript_hello_world.html.erb
new file mode 100644
index 000000000..10fcb7964
--- /dev/null
+++ b/spec/dummy/app/views/pages/client_side_rescript_hello_world.html.erb
@@ -0,0 +1,36 @@
+<%= react_component("HelloWorldReScript", props: @app_props_server_render, prerender: false, trace: true, id: "HelloWorld-rescript-react-component-0") %>
+<hr/>
+
+<h1>React Rails Client Side Only Rendering</h1>
+<p>
+  This example demonstrates client side only rendering.<br/><br/>
+  The source HTML of this page will only show a DIV with an ID matching HelloWorld.<br/>
+  <pre>
+    <%= "<div id=\"HelloWorld-rescript-react-component-0\"></div>" %>
+  </pre><br/><br/>
+  Compare this to the HTML created for server rendering.<br/>
+</p>
+
+<hr/>
+<h2>Setup</h2>
+<ol>
+  <li>
+    Create component source: spec/dummy/client/app/components/HelloWorldReScript.bs.js
+  </li>
+  <li>
+    Expose the HelloWorld Component: spec/dummy/client/app/startup/clientRegistration.jsx
+    <br/>
+    <pre>
+      import HelloWorldReScript from '../components/HelloWorldReScript.bs';
+      import ReactOnRails from 'react-on-rails';
+      ReactOnRails.register({ HelloWorldReScript });
+    </pre>
+  </li>
+  <li>
+    Place the component on the view: spec/dummy/app/views/pages/client_side_rescript_hello_world.html.erb
+    <br/>
+    <pre>
+      <%%= react_component("HelloWorldReScript", props: @app_props_server_render, prerender: false, trace: true, id: "HelloWorld-rescript-react-component-0") %>
+    </pre>
+  </li>
+</ol>
diff --git a/spec/dummy/app/views/shared/_header.erb b/spec/dummy/app/views/shared/_header.erb
index 46031488d..d702752a0 100644
--- a/spec/dummy/app/views/shared/_header.erb
+++ b/spec/dummy/app/views/shared/_header.erb
@@ -8,6 +8,9 @@
   <li>
     <%= link_to "Hello World Component Client Rendered", client_side_hello_world_path %>
   </li>
+  <li>
+    <%= link_to "Hello World ReScript Component Client Rendered", client_side_rescript_hello_world_path %>
+  </li>
   <li>
     <%= link_to "Hello World Shared Redux Components Client Rendered",
                 client_side_hello_world_shared_store_path %>
diff --git a/spec/dummy/bsconfig.json b/spec/dummy/bsconfig.json
new file mode 100644
index 000000000..f54413178
--- /dev/null
+++ b/spec/dummy/bsconfig.json
@@ -0,0 +1,24 @@
+{
+  "name": "react_on_rails",
+  "sources": [
+    {
+      "dir": "client/app/components",
+      "subdirs": true
+    }
+  ],
+  "reason": {
+    "react-jsx": 3
+  },
+  "bsc-flags": ["-bs-super-errors"],
+  "suffix": ".bs.js",
+  "namespace": true,
+  "package-specs": [
+    {
+      "module": "commonjs",
+      "in-source": true
+    }
+  ],
+  "bs-dependencies": [
+    "@rescript/react"
+  ]
+}
\ No newline at end of file
diff --git a/spec/dummy/client/app/components/HelloWorldReScript.bs.js b/spec/dummy/client/app/components/HelloWorldReScript.bs.js
new file mode 100644
index 000000000..8092cca72
--- /dev/null
+++ b/spec/dummy/client/app/components/HelloWorldReScript.bs.js
@@ -0,0 +1,29 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+'use strict';
+
+var Curry = require("rescript/lib/js/curry.js");
+var React = require("react");
+
+function HelloWorldReScript(Props) {
+  var helloWorldData = Props.helloWorldData;
+  var match = React.useState(function () {
+        return helloWorldData.name;
+      });
+  var setNameState = match[1];
+  var nameState = match[0];
+  return React.createElement("div", undefined, React.createElement("h3", undefined, "Hello, " + nameState + " !"), React.createElement("hr", undefined), React.createElement("form", undefined, React.createElement("label", {
+                      htmlFor: "name"
+                    }, "Say hello to: ", React.createElement("input", {
+                          id: "name",
+                          type: "text",
+                          value: nameState,
+                          onChange: (function (e) {
+                              return Curry._1(setNameState, e.currentTarget.value);
+                            })
+                        }))));
+}
+
+var make = HelloWorldReScript;
+
+exports.make = make;
+/* react Not a pure module */
diff --git a/spec/dummy/client/app/components/HelloWorldReScript.res b/spec/dummy/client/app/components/HelloWorldReScript.res
new file mode 100644
index 000000000..7cc6bfb77
--- /dev/null
+++ b/spec/dummy/client/app/components/HelloWorldReScript.res
@@ -0,0 +1,24 @@
+@react.component
+
+// The compiled JavaScript will always extract your props passed to make from Props, where Props
+// is the same hash passed to react_component method on the view. Log the Props in the compiled JS
+// And make sure the props passed to make match the shape of the prop passed on the view.
+
+let make = (~helloWorldData: {..}) => {
+  let (nameState, setNameState) = React.useState(_ => helloWorldData["name"])
+  <div>
+    <h3>{("Hello, " ++ nameState ++ " !") -> React.string}</h3>
+    <hr/ >
+    <form>
+      <label htmlFor="name">
+        {"Say hello to: " -> React.string}
+        <input 
+          id="name"
+          type_="text"
+          value={nameState}
+          onChange={(e) => setNameState(ReactEvent.Form.currentTarget(e)["value"])}
+        />
+      </label>
+    </form>
+  </div>
+}
\ No newline at end of file
diff --git a/spec/dummy/client/app/packs/client-bundle.js b/spec/dummy/client/app/packs/client-bundle.js
index 301e25b27..5d42d2287 100644
--- a/spec/dummy/client/app/packs/client-bundle.js
+++ b/spec/dummy/client/app/packs/client-bundle.js
@@ -11,6 +11,7 @@ import HelloWorldHooksContext from '../components/HelloWorldHooksContext';
 import ContextFunctionReturnInvalidJSX from '../components/ContextFunctionReturnInvalidJSX';
 import PureComponentWrappedInFunction from '../components/PureComponentWrappedInFunction';
 
+import {make as HelloWorldReScript} from '../components/HelloWorldReScript.bs';
 import HelloWorldWithLogAndThrow from '../components/HelloWorldWithLogAndThrow';
 import HelloWorldES5 from '../components/HelloWorldES5';
 import HelloWorldRehydratable from '../components/HelloWorldRehydratable';
@@ -43,6 +44,7 @@ ReactOnRails.setOptions({
 ReactOnRails.register({
   BrokenApp,
   HelloWorld,
+  HelloWorldReScript,
   HelloWorldWithLogAndThrow,
   HelloWorldES5,
   HelloWorldRehydratable,
diff --git a/spec/dummy/config/routes.rb b/spec/dummy/config/routes.rb
index 7c22a7b7b..a43fabdb9 100644
--- a/spec/dummy/config/routes.rb
+++ b/spec/dummy/config/routes.rb
@@ -8,6 +8,7 @@
   root "pages#index"
 
   get "client_side_hello_world" => "pages#client_side_hello_world"
+  get "client_side_rescript_hello_world" => "pages#client_side_rescript_hello_world"
   get "client_side_hello_world_shared_store" => "pages#client_side_hello_world_shared_store"
   get "client_side_hello_world_shared_store_controller" => "pages#client_side_hello_world_shared_store_controller"
   get "client_side_hello_world_shared_store_defer" => "pages#client_side_hello_world_shared_store_defer"
diff --git a/spec/dummy/package.json b/spec/dummy/package.json
index 57bfeb691..ac97e76c5 100644
--- a/spec/dummy/package.json
+++ b/spec/dummy/package.json
@@ -9,6 +9,7 @@
   "dependencies": {
     "@babel/preset-react": "^7.10.4",
     "@rails/webpacker": "^5.2.1",
+    "@rescript/react": "^0.10.3",
     "babel-plugin-module-resolver": "^4.0.0",
     "core-js": "3",
     "create-react-class": "^15.6.3",
@@ -33,6 +34,7 @@
     "react-router-dom": "^5.2.0",
     "redux": "^4.0.1",
     "redux-thunk": "^2.2.0",
+    "rescript": "^9.1.4",
     "resolve-url-loader": "^3.1.1",
     "sass-resources-loader": "^2.1.0",
     "url-loader": "^4.0.0",
@@ -55,7 +57,9 @@
     "build:dev": "rm -rf public/webpack/develoment && RAILS_ENV=development NODE_ENV=development bin/webpack --watch",
     "build:dev:server": "rm -rf public/webpack/develoment && RAILS_ENV=development NODE_ENV=development bin/webpack --watch",
     "build:dev:watch": "RAILS_ENV=development NODE_ENV=development bin/webpack --watch",
-    "build:clean": "rm -rf public/webpack || true"
+    "build:clean": "rm -rf public/webpack || true",
+    "re:build": "rescript build",
+    "re:start": "rescript build -w"
   },
   "version": "0.0.0"
 }
diff --git a/spec/dummy/yarn.lock b/spec/dummy/yarn.lock
index 81f019555..0325d902a 100644
--- a/spec/dummy/yarn.lock
+++ b/spec/dummy/yarn.lock
@@ -1035,12 +1035,12 @@
     "@babel/plugin-transform-react-jsx-source" "^7.10.4"
     "@babel/plugin-transform-react-pure-annotations" "^7.10.4"
 
-"@babel/runtime-corejs3@^7.9.6":
-  version "7.10.2"
-  resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.10.2.tgz#3511797ddf9a3d6f3ce46b99cc835184817eaa4e"
-  integrity sha512-+a2M/u7r15o3dV1NEizr9bRi+KUVnrs/qYxF0Z06DAPx/4VCWaz1WA7EcbE+uqGgt39lp5akWGmHsTseIkHkHg==
+"@babel/runtime-corejs3@^7.12.5":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.15.4.tgz#403139af262b9a6e8f9ba04a6fdcebf8de692bf1"
+  integrity sha512-lWcAqKeB624/twtTc3w6w/2o9RqJPaNBhPGK6DKLSiwuVWC7WFkypWyNg+CpZoyJH0jVzv1uMtXZ/5/lQOLtCg==
   dependencies:
-    core-js-pure "^3.0.0"
+    core-js-pure "^3.16.0"
     regenerator-runtime "^0.13.4"
 
 "@babel/runtime@^7.1.2":
@@ -1205,6 +1205,11 @@
     webpack-cli "^3.3.12"
     webpack-sources "^1.4.3"
 
+"@rescript/react@^0.10.3":
+  version "0.10.3"
+  resolved "https://registry.yarnpkg.com/@rescript/react/-/react-0.10.3.tgz#a2a8bed6b017940ec26c2154764b350f50348889"
+  integrity sha512-Lf9rzrR3bQPKJjOK3PBRa/B3xrJ7CqQ1HYr9VHPVxJidarIJJFZBhj0Dg1uZURX+Wg/xiP0PHFxXmdj2bK8Vxw==
+
 "@types/color-name@^1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
@@ -2541,10 +2546,10 @@ core-js-compat@^3.6.2:
     browserslist "^4.8.5"
     semver "7.0.0"
 
-core-js-pure@^3.0.0:
-  version "3.6.5"
-  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.6.5.tgz#c79e75f5e38dbc85a662d91eea52b8256d53b813"
-  integrity sha512-lacdXOimsiD0QyNf9BC/mxivNJ/ybBGJXQFKzRekp1WTHoVUWsUHEn+2T8GJAzzIhyOuXA+gOxCVN3l+5PLPUA==
+core-js-pure@^3.16.0:
+  version "3.18.3"
+  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.18.3.tgz#7eed77dcce1445ab68fd68715856633e2fb3b90c"
+  integrity sha512-qfskyO/KjtbYn09bn1IPkuhHl5PlJ6IzJ9s9sraJ1EqcuGyLGKzhSM1cY0zgyL9hx42eulQLZ6WaeK5ycJCkqw==
 
 core-js@3, core-js@^3.6.5:
   version "3.6.5"
@@ -6915,9 +6920,9 @@ react-is@^16.7.0:
   integrity sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==
 
 "react-on-rails@file:.yalc/react-on-rails":
-  version "12.0.5-beta.0-ea6ccda1"
+  version "12.4.0"
   dependencies:
-    "@babel/runtime-corejs3" "^7.9.6"
+    "@babel/runtime-corejs3" "^7.12.5"
     concurrently "^5.1.0"
 
 react-proptypes@^1.0.0:
@@ -7221,6 +7226,11 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
 
+rescript@^9.1.4:
+  version "9.1.4"
+  resolved "https://registry.yarnpkg.com/rescript/-/rescript-9.1.4.tgz#1eb126f98d6c16942c0bf0df67c050198e580515"
+  integrity sha512-aXANK4IqecJzdnDpJUsU6pxMViCR5ogAxzuqS0mOr8TloMnzAjJFu63fjD6LCkWrKAhlMkFFzQvVQYaAaVkFXw==
+
 reselect@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.0.0.tgz#f2529830e5d3d0e021408b246a206ef4ea4437f7"
diff --git a/spec/react_on_rails/support/generator_spec_helper.rb b/spec/react_on_rails/support/generator_spec_helper.rb
index 50fdaca5b..3919616e1 100644
--- a/spec/react_on_rails/support/generator_spec_helper.rb
+++ b/spec/react_on_rails/support/generator_spec_helper.rb
@@ -26,7 +26,7 @@ def simulate_existing_rails_files(options)
   simulate_existing_file("Gemfile", "")
   simulate_existing_file("config/routes.rb", "Rails.application.routes.draw do\nend\n")
   simulate_existing_file("config/application.rb",
-                         "module Gentest\nclass Application < Rails::Application\nend\nend)")
+                         "module Gentest\nclass Application < Rails::Application\nend\nend")
 
   return unless options.fetch(:spec, true)