feat: add react integration

.gitignore

@@ -65,3 +65,4 @@ build-iPhoneSimulator/
 yarn-debug.log*
 .yarn-integrity
 log/
+public/assets/

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

Dockerfile

@@ -1,5 +1,6 @@
 # Use an official Ruby runtime as a parent image
 FROM ruby:3.1.0
+ENV NODE_VERSION=16.13.0
 
 # Set the working directory
 WORKDIR /app
@@ -19,16 +20,36 @@ RUN apt-get update && \
     rm -rf /var/lib/apt/lists/*
 
 ENV PKG_CONFIG_PATH=/usr/local/lib/pkgconfig
+
+RUN curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
+ENV NVM_DIR=/root/.nvm
+RUN . "$NVM_DIR/nvm.sh" && nvm install ${NODE_VERSION}
+RUN . "$NVM_DIR/nvm.sh" && nvm use v${NODE_VERSION}
+RUN . "$NVM_DIR/nvm.sh" && nvm alias default v${NODE_VERSION}
+ENV PATH="/root/.nvm/versions/node/v${NODE_VERSION}/bin/:${PATH}"
+RUN node --version
+RUN npm --version
+
+RUN 
 # Install gems
 COPY Gemfile Gemfile.lock ./
 RUN gem install bundler && \
     bundle install --jobs 4
 
+# Install packages
+COPY package.json yarn.lock ./
+RUN npm install --global yarn && \
+    yarn install
+
 # Copy the application code
 COPY . .
 
 # Expose ports
 EXPOSE 3000
+# rack-livereload
+EXPOSE 35729
+
+RUN guard --force-polling
 
 # Set the entrypoint command
 CMD ["bin/rails", "server", "-b", "0.0.0.0"]

Gemfile

@@ -20,6 +20,7 @@ gem 'puma', '~> 5.0'
 gem 'rack-cors'
 gem 'webpacker' # JavaScript asset management
 gem 'hornetseye-openexr', '~> 1.0'
+gem 'react-rails'
 
 # Group gems for development and testing
 group :development, :test do
@@ -28,12 +29,16 @@ group :development, :test do
   gem 'rspec-rails' # Testing framework
   gem 'rswag-specs'
   gem 'sqlite3' # Use a development database like SQLite
-end
-
-group :development, :production do
-  gem 'bootsnap', require: false
   gem 'rubocop', require: false
   gem 'rubocop-performance', require: false
+  gem 'guard'
+  gem 'guard-livereload', '~> 2.5', require: false
+  gem 'rack-livereload'
   gem 'rubocop-rails', require: false
   gem 'rubocop-rspec', require: false
+  gem 'spring'
+end
+
+group :development, :production do
+  gem 'bootsnap', require: false
 end

Gemfile.lock

@@ -63,13 +63,19 @@ GEM
     addressable (2.8.5)
       public_suffix (>= 2.0.2, < 6.0)
     ast (2.4.2)
+    babel-source (5.8.35)
+    babel-transpiler (0.7.0)
+      babel-source (>= 4.0, < 6)
+      execjs (~> 2.0)
     base64 (0.1.1)
     bcrypt (3.1.19)
     bootsnap (1.16.0)
       msgpack (~> 1.2)
     builder (3.2.4)
     byebug (11.1.3)
+    coderay (1.1.3)
     concurrent-ruby (1.2.2)
+    connection_pool (2.4.1)
     crass (1.0.6)
     date (3.3.3)
     devise (4.9.2)
@@ -83,22 +89,44 @@ GEM
     dotenv-rails (2.8.1)
       dotenv (= 2.8.1)
       railties (>= 3.2)
+    em-websocket (0.5.3)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0)
     erubi (1.12.0)
+    eventmachine (1.2.7)
+    execjs (2.9.1)
     factory_bot (6.2.1)
       activesupport (>= 5.0.0)
     factory_bot_rails (6.2.0)
       factory_bot (~> 6.2.0)
       railties (>= 5.0.0)
     ffi (1.16.2)
+    formatador (1.1.0)
     globalid (1.2.1)
       activesupport (>= 6.1)
+    guard (2.18.1)
+      formatador (>= 0.2.4)
+      listen (>= 2.7, < 4.0)
+      lumberjack (>= 1.0.12, < 2.0)
+      nenv (~> 0.1)
+      notiffany (~> 0.0)
+      pry (>= 0.13.0)
+      shellany (~> 0.0)
+      thor (>= 0.18.1)
+    guard-compat (1.2.1)
+    guard-livereload (2.5.2)
+      em-websocket (~> 0.5)
+      guard (~> 2.8)
+      guard-compat (~> 1.0)
+      multi_json (~> 1.8)
     hornetseye-frame (1.1.3)
       malloc (~> 1.5)
       multiarray (~> 1.0)
     hornetseye-openexr (1.0.2)
       hornetseye-frame (~> 1.0)
       malloc (~> 1.1)
       multiarray (~> 1.0)
+    http_parser.rb (0.8.0)
     i18n (1.14.1)
       concurrent-ruby (~> 1.0)
     json (2.6.3)
@@ -111,6 +139,7 @@ GEM
     loofah (2.21.3)
       crass (~> 1.0.2)
       nokogiri (>= 1.12.0)
+    lumberjack (1.2.9)
     mail (2.8.1)
       mini_mime (>= 0.1.1)
       net-imap
@@ -123,8 +152,10 @@ GEM
     mini_mime (1.1.5)
     minitest (5.20.0)
     msgpack (1.7.2)
+    multi_json (1.15.0)
     multiarray (1.0.4)
       malloc (~> 1.1)
+    nenv (0.3.0)
     net-imap (0.3.7)
       date
       net-protocol
@@ -137,6 +168,9 @@ GEM
     nio4r (2.5.9)
     nokogiri (1.15.4-x86_64-linux)
       racc (~> 1.4)
+    notiffany (0.1.3)
+      nenv (~> 0.1)
+      shellany (~> 0.0)
     orm_adapter (0.5.0)
     parallel (1.23.0)
     parser (3.2.2.3)
@@ -145,13 +179,18 @@ GEM
     perlin_noise (0.1.3)
     pg (1.5.4)
     pkg-config (1.5.5)
+    pry (0.14.2)
+      coderay (~> 1.1)
+      method_source (~> 1.0)
     public_suffix (5.0.3)
     puma (5.6.7)
       nio4r (~> 2.0)
     racc (1.7.1)
     rack (2.2.8)
     rack-cors (2.0.1)
       rack (>= 2.0.0)
+    rack-livereload (0.5.1)
+      rack
     rack-proxy (0.7.7)
       rack
     rack-test (2.1.0)
@@ -189,6 +228,12 @@ GEM
     rb-fsevent (0.11.2)
     rb-inotify (0.10.1)
       ffi (~> 1.0)
+    react-rails (3.1.1)
+      babel-transpiler (>= 0.7.0)
+      connection_pool
+      execjs
+      railties (>= 3.2)
+      tilt
     regexp_parser (2.8.1)
     responders (3.1.0)
       actionpack (>= 5.2)
@@ -254,6 +299,8 @@ GEM
       rubocop-factory_bot (~> 2.22)
     ruby-progressbar (1.13.0)
     semantic_range (3.0.0)
+    shellany (0.0.1)
+    spring (4.1.1)
     sprockets (4.2.1)
       concurrent-ruby (~> 1.0)
       rack (>= 2.2.4, < 4)
@@ -263,6 +310,7 @@ GEM
       sprockets (>= 3.0.0)
     sqlite3 (1.6.6-x86_64-linux)
     thor (1.2.2)
+    tilt (2.3.0)
     timeout (0.4.0)
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
@@ -290,14 +338,18 @@ DEPENDENCIES
   devise
   dotenv-rails
   factory_bot_rails
+  guard
+  guard-livereload (~> 2.5)
   hornetseye-openexr (~> 1.0)
   listen (~> 3.8)
   matrix
   perlin_noise (~> 0.1.3)
   pg
   puma (~> 5.0)
   rack-cors
+  rack-livereload
   rails (= 6.1.4)
+  react-rails
   rmagick (~> 5.3)
   rspec-rails
   rswag-api
@@ -307,6 +359,7 @@ DEPENDENCIES
   rubocop-performance
   rubocop-rails
   rubocop-rspec
+  spring
   sqlite3
   webpacker
   webrick (~> 1.8)

Guardfile

@@ -0,0 +1,58 @@
+# A sample Guardfile
+# More info at https://github.com/guard/guard#readme
+
+## Uncomment and set this to only include directories you want to watch
+# directories %w(app lib config test spec features) \
+#  .select{|d| Dir.exist?(d) ? d : UI.warning("Directory #{d} does not exist")}
+
+## Note: if you are using the `directories` clause above and you are not
+## watching the project directory ('.'), then you will want to move
+## the Guardfile to a watched dir and symlink it back, e.g.
+#
+#  $ mkdir config
+#  $ mv Guardfile config/
+#  $ ln -s config/Guardfile .
+#
+# and, you'll have to watch "config/Guardfile" instead of "Guardfile"
+
+guard 'livereload' do
+  extensions = {
+    css: :css,
+    scss: :css,
+    sass: :css,
+    js: :js,
+    coffee: :js,
+    html: :html,
+    png: :png,
+    gif: :gif,
+    jpg: :jpg,
+    jpeg: :jpeg,
+    # less: :less, # uncomment if you want LESS stylesheets done in browser
+  }
+
+  rails_view_exts = %w(erb haml slim)
+
+  # file types LiveReload may optimize refresh for
+  compiled_exts = extensions.values.uniq
+  watch(%r{public/.+\.(#{compiled_exts * '|'})})
+
+  extensions.each do |ext, type|
+    watch(%r{
+          (?:app|vendor)
+          (?:/assets/\w+/(?<path>[^.]+) # path+base without extension
+           (?<ext>\.#{ext})) # matching extension (must be first encountered)
+          (?:\.\w+|$) # other extensions
+          }x) do |m|
+      path = m[1]
+      "/assets/#{path}.#{type}"
+    end
+  end
+
+  # file needing a full reload of the page anyway
+  watch(%r{app/views/.+\.(#{rails_view_exts * '|'})$})
+  watch(%r{app/helpers/.+\.rb})
+  watch(%r{config/locales/.+\.yml})
+
+  # Rails Assets Pipeline
+  watch(%r{(app|vendor)(/assets/\w+/(.+\.(css|js|html))).*}) { |m| "/assets/#{m[3]}" }
+end

app/assets/config/manifest.js

@@ -1,2 +1,4 @@
 //= link_tree ../images
 //= link_directory ../stylesheets .css
+//= link application.js
+

app/assets/javascripts/application.js

@@ -0,0 +1,3 @@
+//= require react
+//= require react_ujs
+//= require components

app/assets/javascripts/components.js

@@ -0,0 +1 @@
+//= require_tree ./components

app/assets/javascripts/server_rendering.js

@@ -0,0 +1,6 @@
+//= require react-server
+//= require react_ujs
+//= require ./components
+//
+// By default, this file is loaded for server-side rendering.
+// It should require your components and any dependencies.

app/assets/stylesheets/home.css

@@ -0,0 +1,4 @@
+/*
+  Place all the styles related to the matching controller here.
+  They will automatically be included in application.css.
+*/

app/controllers/home_controller.rb

@@ -0,0 +1,4 @@
+class HomeController < ApplicationController
+  def index
+  end
+end

app/helpers/home_helper.rb

@@ -0,0 +1,2 @@
+module HomeHelper
+end

app/javascript/packs/hello_react.jsx

@@ -0,0 +1,26 @@
+// Run this example by adding <%= javascript_pack_tag 'hello_react' %> to the head of your layout file,
+// like app/views/layouts/application.html.erb. All it does is render <div>Hello React</div> at the bottom
+// of the page.
+
+import React from 'react'
+import ReactDOM from 'react-dom'
+import PropTypes from 'prop-types'
+
+const Hello = props => (
+  <div>Hello {props.name}!</div>
+)
+
+Hello.defaultProps = {
+  name: 'David'
+}
+
+Hello.propTypes = {
+  name: PropTypes.string
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  ReactDOM.render(
+    <Hello name="React" />,
+    document.body.appendChild(document.createElement('div')),
+  )
+})

app/views/home/index.html.erb

@@ -0,0 +1,2 @@
+<h1>Home#index</h1>
+<p>Find me in app/views/home/index.html.erb</p>

app/views/layouts/application.html.erb

@@ -2,16 +2,19 @@
 <html>
   <head>
     <title>WorldGenerator</title>
-    <meta http-equiv="Content-Security-Policy" content="default-src 'self' http://localhost">
+    <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' http://cdnjs.cloudflare.com; script-src-elem *">
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
 
     <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
+    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
     <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
+    <%= javascript_pack_tag 'hello_react' %>
   </head>
 
   <body>
     <%= yield %>
+    <%= react_component 'GreetUser', name: 'Ankur' %>
   </body>
 </html>