├── .babelrc ├── .env-example ├── .gitignore ├── .postcssrc.yml ├── Gemfile ├── Gemfile.lock ├── Procfile ├── Procfile.dev ├── README.md ├── Rakefile ├── app ├── assets │ ├── config │ │ └── manifest.js │ ├── images │ │ └── .keep │ ├── javascripts │ │ ├── application.js │ │ ├── cable.js │ │ └── channels │ │ │ └── .keep │ └── stylesheets │ │ ├── application.sass │ │ ├── chat_room.sass │ │ ├── nav.sass │ │ └── pages.sass ├── channels │ ├── application_cable │ │ ├── channel.rb │ │ └── connection.rb │ └── messages_channel.rb ├── controllers │ ├── application_controller.rb │ ├── chat_rooms_controller.rb │ ├── concerns │ │ └── .keep │ ├── lists_controller.rb │ ├── messages_controller.rb │ └── pages_controller.rb ├── helpers │ └── application_helper.rb ├── javascript │ ├── chat │ │ ├── composer.js │ │ ├── index.js │ │ ├── message.js │ │ └── messages.js │ ├── home-angular2 │ │ └── index.js │ ├── home-react-router │ │ ├── about.js │ │ ├── app.js │ │ └── repos.js │ ├── home-react │ │ ├── content.js │ │ ├── index.js │ │ └── sidebar.js │ ├── home-vue │ │ └── index.js │ ├── list-react │ │ ├── index.js │ │ ├── item.js │ │ └── styles │ │ │ └── list.sass │ ├── list-vue │ │ └── index.js │ ├── packs │ │ ├── application.js │ │ ├── chat-component.js │ │ ├── home-angular2-component.js │ │ ├── home-react-component.js │ │ ├── home-react-router-component.js │ │ ├── home-vue-component.js │ │ ├── list-react-component.js │ │ ├── list-vue-component.js │ │ └── vue-props.js │ └── shared │ │ └── nav.js ├── jobs │ └── application_job.rb ├── mailers │ └── application_mailer.rb ├── models │ ├── application_record.rb │ ├── chat_room.rb │ ├── concerns │ │ └── .keep │ ├── message.rb │ └── user.rb └── views │ ├── chat_rooms │ ├── index.html.erb │ ├── new.html.erb │ ├── show.html.erb │ └── show.json.jbuilder │ ├── devise │ ├── confirmations │ │ └── new.html.erb │ ├── mailer │ │ ├── confirmation_instructions.html.erb │ │ ├── password_change.html.erb │ │ ├── reset_password_instructions.html.erb │ │ └── unlock_instructions.html.erb │ ├── passwords │ │ ├── edit.html.erb │ │ └── new.html.erb │ ├── registrations │ │ ├── edit.html.erb │ │ └── new.html.erb │ ├── sessions │ │ └── new.html.erb │ ├── shared │ │ └── _links.html.erb │ └── unlocks │ │ └── new.html.erb │ ├── layouts │ ├── application.html.erb │ ├── chat.html.erb │ ├── mailer.html.erb │ └── mailer.text.erb │ ├── lists │ ├── index.html.erb │ └── index_vue.html.erb │ ├── messages │ └── _message.json.jbuilder │ ├── pages │ ├── about.html.erb │ ├── home.html.erb │ ├── home_angular.html.erb │ ├── home_react_router.html.erb │ ├── home_vue.html.erb │ └── repos.html.erb │ └── shared │ ├── _main_nav.html.erb │ └── _nav.html.erb ├── bin ├── bundle ├── byebug ├── erubis ├── listen ├── nokogiri ├── prepare ├── puma ├── pumactl ├── rackup ├── rails ├── rake ├── sass ├── sass-convert ├── scss ├── server ├── setup ├── sprockets ├── thor ├── update ├── webpack ├── webpack-dev-server ├── webpack-watcher └── yarn ├── config.ru ├── config ├── application.rb ├── boot.rb ├── cable.yml ├── database.yml ├── environment.rb ├── environments │ ├── development.rb │ ├── production.rb │ └── test.rb ├── initializers │ ├── application_controller_renderer.rb │ ├── assets.rb │ ├── backtrace_silencers.rb │ ├── cookies_serializer.rb │ ├── devise.rb │ ├── filter_parameter_logging.rb │ ├── inflections.rb │ ├── mime_types.rb │ ├── new_framework_defaults.rb │ └── wrap_parameters.rb ├── locales │ ├── devise.en.yml │ └── en.yml ├── puma.rb ├── routes.rb ├── secrets.yml └── webpack │ ├── configuration.js │ ├── development.js │ ├── development.server.js │ ├── development.server.yml │ ├── loaders │ ├── angular.js │ ├── assets.js │ ├── babel.js │ ├── coffee.js │ ├── erb.js │ ├── react.js │ ├── sass.js │ └── vue.js │ ├── paths.yml │ ├── production.js │ ├── shared.js │ └── test.js ├── db ├── migrate │ ├── 20170120121951_create_chat_rooms.rb │ ├── 20170120122050_create_users.rb │ ├── 20170120122059_create_messages.rb │ └── 20170120164147_add_devise_to_users.rb ├── schema.rb └── seeds.rb ├── lib ├── assets │ └── .keep └── tasks │ └── .keep ├── log └── .keep ├── package.json ├── public ├── 404.html ├── 422.html ├── 500.html ├── apple-touch-icon-precomposed.png ├── apple-touch-icon.png ├── favicon.ico └── robots.txt ├── tsconfig.json ├── vendor └── .keep └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["env", "react"] 3 | } 4 | -------------------------------------------------------------------------------- /.env-example: -------------------------------------------------------------------------------- 1 | export WEBPACK_DIST_PATH='packs' 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files for more about ignoring files. 2 | # 3 | # If you find yourself ignoring temporary files generated by your text editor 4 | # or operating system, you probably want to add a global ignore instead: 5 | # git config --global core.excludesfile '~/.gitignore_global' 6 | 7 | # Ignore bundler config. 8 | /.bundle 9 | 10 | # Ignore the default SQLite database. 11 | /db/*.sqlite3 12 | /db/*.sqlite3-journal 13 | 14 | # Ignore all logfiles and tempfiles. 15 | /log/* 16 | /tmp/* 17 | !/log/.keep 18 | !/tmp/.keep 19 | 20 | .byebug_history 21 | 22 | # Ignore application configuration 23 | /config/application.yml 24 | /public/assets 25 | /public/packs 26 | /node_modules 27 | -------------------------------------------------------------------------------- /.postcssrc.yml: -------------------------------------------------------------------------------- 1 | plugins: 2 | postcss-smart-import: {} 3 | precss: {} 4 | autoprefixer: {} 5 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | ruby '2.2.5' 2 | source 'https://rubygems.org' 3 | 4 | git_source(:github) do |repo_name| 5 | repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?('/') 6 | "https://github.com/#{repo_name}.git" 7 | end 8 | 9 | gem 'rails', '>= 5.1.0.beta1' 10 | 11 | group :development do 12 | gem 'sqlite3' 13 | end 14 | 15 | gem 'coffee-rails' 16 | gem 'puma', '~> 3.0' 17 | gem 'sass-rails', github: 'rails/sass-rails' 18 | gem 'uglifier', '>= 1.3.0' 19 | gem 'webpacker', github: 'rails/webpacker' 20 | gem 'turbolinks', '~> 5' 21 | gem 'js-routes' 22 | gem 'figaro' 23 | gem 'jbuilder' 24 | gem 'devise' 25 | 26 | group :development, :test do 27 | gem 'byebug', platform: :mri 28 | end 29 | 30 | group :production do 31 | gem 'pg' 32 | gem 'redis' 33 | gem 'heroku-deflater', github: 'romanbsd/heroku-deflater' 34 | end 35 | 36 | group :development do 37 | gem 'foreman' 38 | gem 'web-console', github: 'rails/web-console' 39 | gem 'listen', '>= 3.0.5', '< 3.2' 40 | end 41 | 42 | gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby] 43 | -------------------------------------------------------------------------------- /Gemfile.lock: -------------------------------------------------------------------------------- 1 | GIT 2 | remote: https://github.com/rails/sass-rails.git 3 | revision: eafddf6eeecc7e8b3fb929e406cb64e401b759e3 4 | specs: 5 | sass-rails (6.0.0.beta1) 6 | railties (>= 4.0.0, < 5.1) 7 | sass (~> 3.4) 8 | sprockets (~> 4.x) 9 | sprockets-rails (< 4.0) 10 | 11 | GIT 12 | remote: https://github.com/rails/web-console.git 13 | revision: b1fc057676204f069cab7dc86eb3b382320c25b6 14 | specs: 15 | web-console (3.5.0) 16 | actionview (>= 5.0) 17 | activemodel (>= 5.0) 18 | bindex (>= 0.4.0) 19 | railties (>= 5.0) 20 | 21 | GIT 22 | remote: https://github.com/rails/webpacker.git 23 | revision: 740189b9f1f3a7ec35adb12df3361c28f52c4809 24 | specs: 25 | webpacker (1.1) 26 | activesupport (>= 4.2) 27 | multi_json (~> 1.2) 28 | railties (>= 4.2) 29 | 30 | GIT 31 | remote: https://github.com/romanbsd/heroku-deflater.git 32 | revision: 8ca836cfc5160e63a51993e66489b20935fc418b 33 | specs: 34 | heroku-deflater (0.6.3) 35 | rack (>= 1.4.5) 36 | 37 | GEM 38 | remote: https://rubygems.org/ 39 | specs: 40 | actioncable (5.1.0.rc1) 41 | actionpack (= 5.1.0.rc1) 42 | nio4r (~> 2.0) 43 | websocket-driver (~> 0.6.1) 44 | actionmailer (5.1.0.rc1) 45 | actionpack (= 5.1.0.rc1) 46 | actionview (= 5.1.0.rc1) 47 | activejob (= 5.1.0.rc1) 48 | mail (~> 2.5, >= 2.5.4) 49 | rails-dom-testing (~> 2.0) 50 | actionpack (5.1.0.rc1) 51 | actionview (= 5.1.0.rc1) 52 | activesupport (= 5.1.0.rc1) 53 | rack (~> 2.0) 54 | rack-test (~> 0.6.3) 55 | rails-dom-testing (~> 2.0) 56 | rails-html-sanitizer (~> 1.0, >= 1.0.2) 57 | actionview (5.1.0.rc1) 58 | activesupport (= 5.1.0.rc1) 59 | builder (~> 3.1) 60 | erubi (~> 1.4) 61 | rails-dom-testing (~> 2.0) 62 | rails-html-sanitizer (~> 1.0, >= 1.0.3) 63 | activejob (5.1.0.rc1) 64 | activesupport (= 5.1.0.rc1) 65 | globalid (>= 0.3.6) 66 | activemodel (5.1.0.rc1) 67 | activesupport (= 5.1.0.rc1) 68 | activerecord (5.1.0.rc1) 69 | activemodel (= 5.1.0.rc1) 70 | activesupport (= 5.1.0.rc1) 71 | arel (~> 8.0) 72 | activesupport (5.1.0.rc1) 73 | concurrent-ruby (~> 1.0, >= 1.0.2) 74 | i18n (~> 0.7) 75 | minitest (~> 5.1) 76 | tzinfo (~> 1.1) 77 | arel (8.0.0) 78 | bcrypt (3.1.11) 79 | bindex (0.5.0) 80 | builder (3.2.3) 81 | byebug (9.0.6) 82 | coffee-rails (4.2.1) 83 | coffee-script (>= 2.2.0) 84 | railties (>= 4.0.0, < 5.2.x) 85 | coffee-script (2.4.1) 86 | coffee-script-source 87 | execjs 88 | coffee-script-source (1.12.2) 89 | concurrent-ruby (1.0.5) 90 | devise (4.2.1) 91 | bcrypt (~> 3.0) 92 | orm_adapter (~> 0.1) 93 | railties (>= 4.1.0, < 5.1) 94 | responders 95 | warden (~> 1.2.3) 96 | erubi (1.6.0) 97 | execjs (2.7.0) 98 | ffi (1.9.18) 99 | figaro (1.1.1) 100 | thor (~> 0.14) 101 | foreman (0.84.0) 102 | thor (~> 0.19.1) 103 | globalid (0.4.0) 104 | activesupport (>= 4.2.0) 105 | i18n (0.8.1) 106 | jbuilder (2.6.3) 107 | activesupport (>= 3.0.0, < 5.2) 108 | multi_json (~> 1.2) 109 | js-routes (1.3.3) 110 | railties (>= 3.2) 111 | sprockets-rails 112 | listen (3.1.5) 113 | rb-fsevent (~> 0.9, >= 0.9.4) 114 | rb-inotify (~> 0.9, >= 0.9.7) 115 | ruby_dep (~> 1.2) 116 | loofah (2.0.3) 117 | nokogiri (>= 1.5.9) 118 | mail (2.6.4) 119 | mime-types (>= 1.16, < 4) 120 | method_source (0.8.2) 121 | mime-types (3.1) 122 | mime-types-data (~> 3.2015) 123 | mime-types-data (3.2016.0521) 124 | mini_portile2 (2.1.0) 125 | minitest (5.10.1) 126 | multi_json (1.12.1) 127 | nio4r (2.0.0) 128 | nokogiri (1.7.1) 129 | mini_portile2 (~> 2.1.0) 130 | orm_adapter (0.5.0) 131 | pg (0.20.0) 132 | puma (3.8.2) 133 | rack (2.0.1) 134 | rack-test (0.6.3) 135 | rack (>= 1.0) 136 | rails (5.1.0.rc1) 137 | actioncable (= 5.1.0.rc1) 138 | actionmailer (= 5.1.0.rc1) 139 | actionpack (= 5.1.0.rc1) 140 | actionview (= 5.1.0.rc1) 141 | activejob (= 5.1.0.rc1) 142 | activemodel (= 5.1.0.rc1) 143 | activerecord (= 5.1.0.rc1) 144 | activesupport (= 5.1.0.rc1) 145 | bundler (>= 1.3.0, < 2.0) 146 | railties (= 5.1.0.rc1) 147 | sprockets-rails (>= 2.0.0) 148 | rails-dom-testing (2.0.2) 149 | activesupport (>= 4.2.0, < 6.0) 150 | nokogiri (~> 1.6) 151 | rails-html-sanitizer (1.0.3) 152 | loofah (~> 2.0) 153 | railties (5.1.0.rc1) 154 | actionpack (= 5.1.0.rc1) 155 | activesupport (= 5.1.0.rc1) 156 | method_source 157 | rake (>= 0.8.7) 158 | thor (>= 0.18.1, < 2.0) 159 | rake (12.0.0) 160 | rb-fsevent (0.9.8) 161 | rb-inotify (0.9.8) 162 | ffi (>= 0.5.0) 163 | redis (3.3.3) 164 | responders (2.3.0) 165 | railties (>= 4.2.0, < 5.1) 166 | ruby_dep (1.5.0) 167 | sass (3.4.23) 168 | sprockets (4.0.0.beta4) 169 | concurrent-ruby (~> 1.0) 170 | rack (> 1, < 3) 171 | sprockets-rails (3.2.0) 172 | actionpack (>= 4.0) 173 | activesupport (>= 4.0) 174 | sprockets (>= 3.0.0) 175 | sqlite3 (1.3.13) 176 | thor (0.19.4) 177 | thread_safe (0.3.6) 178 | turbolinks (5.0.1) 179 | turbolinks-source (~> 5) 180 | turbolinks-source (5.0.0) 181 | tzinfo (1.2.3) 182 | thread_safe (~> 0.1) 183 | uglifier (3.2.0) 184 | execjs (>= 0.3.0, < 3) 185 | warden (1.2.7) 186 | rack (>= 1.0) 187 | websocket-driver (0.6.5) 188 | websocket-extensions (>= 0.1.0) 189 | websocket-extensions (0.1.2) 190 | 191 | PLATFORMS 192 | ruby 193 | 194 | DEPENDENCIES 195 | byebug 196 | coffee-rails 197 | devise 198 | figaro 199 | foreman 200 | heroku-deflater! 201 | jbuilder 202 | js-routes 203 | listen (>= 3.0.5, < 3.2) 204 | pg 205 | puma (~> 3.0) 206 | rails (>= 5.1.0.beta1) 207 | redis 208 | sass-rails! 209 | sqlite3 210 | turbolinks (~> 5) 211 | tzinfo-data 212 | uglifier (>= 1.3.0) 213 | web-console! 214 | webpacker! 215 | 216 | RUBY VERSION 217 | ruby 2.2.5p319 218 | 219 | BUNDLED WITH 220 | 1.13.6 221 | -------------------------------------------------------------------------------- /Procfile: -------------------------------------------------------------------------------- 1 | web: bundle exec puma -p $PORT 2 | -------------------------------------------------------------------------------- /Procfile.dev: -------------------------------------------------------------------------------- 1 | web: bundle exec rails s 2 | # watcher: ./bin/webpack-watcher 3 | hot: ./bin/webpack-dev-server 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Rails Webpacker 2 | 3 | Demo app that showcases Rails on webpack and yarn using Webpacker gem (default setup in upcoming Rails 5.1) 4 | 5 | * [Webpacker](https://github.com/rails/webpacker) 6 | * [PR](https://github.com/rails/rails/pull/26836) 7 | 8 | # Examples 9 | 10 | * React + Demo HTML 11 | * Angular + Demo HTML 12 | * Vue + Demo HTML 13 | * React + ActionCable + Chat 14 | 15 | # Running in development 16 | 17 | The app is using [foreman](https://github.com/ddollar/foreman), famous process manager. Checkout the `Procfile.dev` in app root for more information. 18 | 19 | ```bash 20 | git clone git@github.com:gauravtiwari/rails-webpacker.git 21 | cd rails-webpacker 22 | bundle install 23 | brew install yarn # (if not installed) 24 | ./bin/yarn install 25 | ``` 26 | 27 | Or just run prepare script to install everything after cloning the repo 28 | 29 | ```bash 30 | ./bin/prepare # only on macOS 31 | ``` 32 | 33 | (try `chmod 777 ./bin/prepare` incase it doesn't work) 34 | 35 | Then, run the server, 36 | 37 | ```bash 38 | ./bin/server 39 | ``` 40 | (try `chmod 777 ./bin/server` incase it doesn't work) 41 | 42 | 43 | # Installing new node modules 44 | 45 | ```bash 46 | # Using Yarn 47 | ./bin/yarn add material-ui 48 | ``` 49 | 50 | Then, import it in your component, 51 | 52 | ```js 53 | import { Card } from 'material-ui/Card'; 54 | ``` 55 | -------------------------------------------------------------------------------- /Rakefile: -------------------------------------------------------------------------------- 1 | # Add your own tasks in files placed in lib/tasks ending in .rake, 2 | # for example lib/tasks/capistrano.rake, and they will automatically be available to Rake. 3 | 4 | require_relative 'config/application' 5 | 6 | Rails.application.load_tasks 7 | -------------------------------------------------------------------------------- /app/assets/config/manifest.js: -------------------------------------------------------------------------------- 1 | //= link_tree ../images 2 | //= link_directory ../javascripts .js 3 | //= link_directory ../stylesheets .css 4 | -------------------------------------------------------------------------------- /app/assets/images/.keep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gauravtiwari/rails-webpacker/821237f906067ddebc9e409763c472b55719f537/app/assets/images/.keep -------------------------------------------------------------------------------- /app/assets/javascripts/application.js: -------------------------------------------------------------------------------- 1 | // Application js manifest 2 | 3 | //= require rails-ujs 4 | //= require js-routes 5 | // require turbolinks 6 | //= require_tree . 7 | -------------------------------------------------------------------------------- /app/assets/javascripts/cable.js: -------------------------------------------------------------------------------- 1 | // Action Cable provides the framework to deal with WebSockets in Rails. 2 | // You can generate new channels where WebSocket features live using the `rails generate channel` command. 3 | // 4 | //= require action_cable 5 | //= require_self 6 | //= require_tree ./channels 7 | 8 | (function() { 9 | this.App || (this.App = {}); 10 | 11 | App.cable = ActionCable.createConsumer(); 12 | 13 | }).call(this); 14 | -------------------------------------------------------------------------------- /app/assets/javascripts/channels/.keep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gauravtiwari/rails-webpacker/821237f906067ddebc9e409763c472b55719f537/app/assets/javascripts/channels/.keep -------------------------------------------------------------------------------- /app/assets/stylesheets/application.sass: -------------------------------------------------------------------------------- 1 | [v-cloak] 2 | display: none 3 | 4 | @import 'nav' 5 | @import 'pages' 6 | @import 'chat_room' 7 | -------------------------------------------------------------------------------- /app/assets/stylesheets/chat_room.sass: -------------------------------------------------------------------------------- 1 | .chat-rooms, 2 | .new-chat-room 3 | max-width: 300px 4 | margin: 100px auto 5 | 6 | li 7 | list-style: none 8 | 9 | a 10 | display: block 11 | width: 100% 12 | margin-bottom: 10px 13 | padding: 10px 5px 14 | text-decoration: none 15 | border: 1px solid #f2f2f2 16 | text-align: center 17 | 18 | &:hover 19 | background-color: #f2f2f2 20 | 21 | .links 22 | text-align: center 23 | 24 | form 25 | input, 26 | textarea 27 | display: block 28 | margin: 20px 0 29 | 30 | .chatapp 31 | max-width: 760px 32 | margin: 20px auto 33 | overflow: hidden 34 | 35 | .message-list, 36 | border: 1px solid #ccf 37 | font-size: 16px 38 | height: 400px 39 | margin: 0 40 | overflow-y: auto 41 | padding: 0 42 | 43 | .message-section 44 | float: none 45 | width: 100% 46 | 47 | .message-thread-heading, 48 | .thread-count 49 | height: 40px 50 | margin: 0 51 | 52 | .message-list-item 53 | list-style: none 54 | padding: 12px 14px 14px 55 | 56 | .message-author-name, 57 | .thread-name 58 | color: #66c 59 | float: left 60 | font-size: 13px 61 | margin: 0 62 | 63 | .message-time 64 | color: #aad 65 | float: right 66 | font-size: 12px 67 | 68 | .message-text 69 | clear: both 70 | font-size: 14px 71 | padding-top: 10px 72 | 73 | .message-composer 74 | box-sizing: border-box 75 | font-family: inherit 76 | font-size: 14px 77 | height: 5em 78 | width: 100% 79 | margin: 20px 0 0 80 | padding: 10px 81 | -------------------------------------------------------------------------------- /app/assets/stylesheets/nav.sass: -------------------------------------------------------------------------------- 1 | .main-nav 2 | max-width: 980px 3 | margin: 0 auto 4 | display: flex 5 | flex-direction: row 6 | justify-content: space-between 7 | 8 | .content-nav 9 | display: flex 10 | 11 | li 12 | list-style: none 13 | margin-right: 20px 14 | 15 | .user-nav 16 | display: flex 17 | 18 | li 19 | list-style: none 20 | margin-left: 20px 21 | -------------------------------------------------------------------------------- /app/assets/stylesheets/pages.sass: -------------------------------------------------------------------------------- 1 | .app-layout 2 | max-width: 500px 3 | margin: 100px auto 4 | 5 | .container 6 | float: left 7 | padding: 10px 8 | background-color: #f2f2f2 9 | 10 | aside 11 | float: right 12 | padding: 10px 13 | background: #fafafa 14 | 15 | h1 16 | font-size: 2em 17 | 18 | .demos-nav 19 | clear: both 20 | padding-top: 20px 21 | text-align: center 22 | 23 | .block 24 | display: block 25 | margin: 10px 0 26 | -------------------------------------------------------------------------------- /app/channels/application_cable/channel.rb: -------------------------------------------------------------------------------- 1 | module ApplicationCable 2 | class Channel < ActionCable::Channel::Base 3 | end 4 | end 5 | -------------------------------------------------------------------------------- /app/channels/application_cable/connection.rb: -------------------------------------------------------------------------------- 1 | module ApplicationCable 2 | class Connection < ActionCable::Connection::Base 3 | end 4 | end 5 | -------------------------------------------------------------------------------- /app/channels/messages_channel.rb: -------------------------------------------------------------------------------- 1 | # app/channels/messages_channel.rb 2 | class MessagesChannel < ApplicationCable::Channel 3 | def subscribed 4 | stream_from 'messages' 5 | end 6 | end 7 | -------------------------------------------------------------------------------- /app/controllers/application_controller.rb: -------------------------------------------------------------------------------- 1 | # app/controllers/application_controller.rb 2 | class ApplicationController < ActionController::Base 3 | protect_from_forgery with: :exception 4 | before_action :configure_permitted_parameters, if: :devise_controller? 5 | before_action :store_current_location, unless: :devise_controller? 6 | 7 | protected 8 | 9 | def configure_permitted_parameters 10 | devise_parameter_sanitizer.permit(:sign_up) do |user_params| 11 | user_params.permit(:name, :email, :password, :password_confirmation) 12 | end 13 | end 14 | 15 | private 16 | 17 | # after login and logout 18 | def store_current_location 19 | store_location_for(:user, request.referrer) 20 | end 21 | 22 | def after_sign_out_path_for(resource) 23 | stored_location_for(resource) || request.referrer || root_path 24 | end 25 | 26 | def after_sign_in_path_for(resource) 27 | stored_location_for(resource) || root_path 28 | end 29 | end 30 | -------------------------------------------------------------------------------- /app/controllers/chat_rooms_controller.rb: -------------------------------------------------------------------------------- 1 | # app/controllers/chatrooms_controller.rb 2 | class ChatRoomsController < ApplicationController 3 | layout 'chat' 4 | 5 | def index 6 | @chat_rooms = ChatRoom.limit(5).order(id: :desc) 7 | end 8 | 9 | def show 10 | @chat_room = ChatRoom.includes(:messages).find_by(slug: params[:slug]) 11 | @message = Message.new 12 | response.headers['Vary'] = 'Accept' 13 | 14 | respond_to do |format| 15 | format.html 16 | format.json 17 | end 18 | end 19 | 20 | def create 21 | @chat_room = ChatRoom.new(chat_room_params) 22 | 23 | if @chat_room.save 24 | redirect_to chat_room_path(@chat_room.slug) 25 | else 26 | render :new 27 | end 28 | end 29 | 30 | def new 31 | @chat_room = ChatRoom.new 32 | end 33 | 34 | private 35 | 36 | def chat_room_params 37 | params.require(:chat_room).permit(:topic) 38 | end 39 | end 40 | -------------------------------------------------------------------------------- /app/controllers/concerns/.keep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gauravtiwari/rails-webpacker/821237f906067ddebc9e409763c472b55719f537/app/controllers/concerns/.keep -------------------------------------------------------------------------------- /app/controllers/lists_controller.rb: -------------------------------------------------------------------------------- 1 | class ListsController < ApplicationController 2 | def index 3 | end 4 | 5 | def index_vue 6 | end 7 | end 8 | -------------------------------------------------------------------------------- /app/controllers/messages_controller.rb: -------------------------------------------------------------------------------- 1 | # app/controllers/messages_controller.rb 2 | class MessagesController < ApplicationController 3 | before_action :set_room, only: :create 4 | 5 | def create 6 | message = Message.new(message_params) 7 | message.chat_room = @room 8 | message.user = current_user 9 | if message.save 10 | ActionCable.server.broadcast( 11 | 'messages', 12 | render(partial: 'messages/message', locals: { message: message }) 13 | ) 14 | head :ok 15 | else 16 | redirect_to chat_rooms_path 17 | end 18 | end 19 | 20 | private 21 | 22 | def set_room 23 | @room = ChatRoom.find(params[:chat_room_slug]) 24 | end 25 | 26 | def message_params 27 | params.require(:message).permit(:body) 28 | end 29 | end 30 | -------------------------------------------------------------------------------- /app/controllers/pages_controller.rb: -------------------------------------------------------------------------------- 1 | class PagesController < ApplicationController 2 | def home 3 | end 4 | 5 | def home_vue 6 | @name = "John Doe" 7 | @username = "john" 8 | end 9 | 10 | def home_angular 11 | end 12 | 13 | def home_react_router 14 | end 15 | 16 | def about 17 | end 18 | 19 | def repos 20 | end 21 | end 22 | -------------------------------------------------------------------------------- /app/helpers/application_helper.rb: -------------------------------------------------------------------------------- 1 | module ApplicationHelper 2 | end 3 | -------------------------------------------------------------------------------- /app/javascript/chat/composer.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import superagent from 'superagent'; 3 | 4 | const ENTER_KEY_CODE = 13; 5 | 6 | export default class Composer extends Component { 7 | constructor(props) { 8 | super(props); 9 | this.state = { text: '' }; 10 | } 11 | 12 | componentDidMount() { 13 | this.composerNode.focus(); 14 | } 15 | 16 | onChange(event, value) { 17 | const authenticated = document.getElementsByName('authenticated')[0].content; 18 | if (!JSON.parse(authenticated)) { 19 | window.location.href = Routes.new_user_session_path(); 20 | } 21 | this.setState({ text: event.target.value }); 22 | } 23 | 24 | onKeyDown(event) { 25 | if (event.keyCode === ENTER_KEY_CODE) { 26 | event.preventDefault(); 27 | const text = this.state.text.trim(); 28 | const csrfNode = document.getElementsByName('csrf-token')[0]; 29 | 30 | if (text) { 31 | superagent.post(Routes.chat_room_messages_path(this.props.room.id)) 32 | .send({ body: text }) 33 | .set('X-CSRF-TOKEN', csrfNode.content) 34 | .type('application/json') 35 | .accept('json') 36 | .end((err, res) => { 37 | if (err) { 38 | console.log('Error!'); 39 | } else { 40 | console.log('Success:)'); 41 | } 42 | }) 43 | } 44 | this.setState({ text: '' }); 45 | } 46 | } 47 | 48 | render() { 49 | return( 50 |