Commit e37ee660 authored by Eugen Rochko's avatar Eugen Rochko

Upgrade to Rails 5.2 and add webpacker

parent d0254b1d
{
"presets": [
[
"env",
{
"modules": false,
"targets": {
"browsers": "> 1%",
"uglify": true
},
"useBuiltIns": true
}
],
"react"
],
"plugins": [
"syntax-dynamic-import",
"transform-object-rest-spread",
[
"transform-class-properties",
{
"spec": true
}
]
]
}
......@@ -16,3 +16,8 @@
# Ignore Byebug command history file.
.byebug_history
.env
/public/packs
/public/packs-test
/node_modules
yarn-debug.log*
.yarn-integrity
plugins:
postcss-import: {}
postcss-cssnext: {}
......@@ -3,7 +3,7 @@
source 'https://rubygems.org'
ruby '>= 2.3.0', '< 2.6.0'
gem 'rails', '~> 5.1.0'
gem 'rails', '~> 5.2.0'
gem 'pg', '~> 0.20'
gem 'puma', '~> 3.10'
gem 'sass-rails', '~> 5.0'
......@@ -14,10 +14,10 @@ gem 'uglifier'
gem 'bootsnap'
gem 'mastodon-api', require: 'mastodon', git: 'https://github.com/tootsuite/mastodon-api'
gem 'twitter', git: 'https://github.com/sferik/twitter'
gem 'devise', '~> 4.3'
gem 'devise', '~> 4.4'
gem 'omniauth-twitter'
gem 'omniauth-mastodon', '>= 0.9.2'
gem 'hamlit-rails', '~> 0.2'
gem 'hamlit-rails'
gem 'fast_blank', '~> 1.0'
gem 'dotenv-rails', '~> 2.2'
gem 'http'
......@@ -26,7 +26,7 @@ gem 'hiredis', '~> 0.6'
gem 'redis', '~> 3.3', require: ['redis', 'redis/connection/hiredis']
gem 'sidekiq', '~> 5.0'
gem 'sidekiq-status'
gem 'redis-rails', '~> 5.0'
gem 'redis-rails'
gem 'oj'
gem 'react_on_rails', '11.0.0'
......@@ -43,6 +43,9 @@ group :development do
end
group :production do
gem 'lograge', '~> 0.5'
gem 'lograge'
gem 'rails_12factor'
end
gem 'mini_racer', platforms: :ruby
gem 'webpacker', '~> 3.5'
This diff is collapsed.
# You can run these commands in separate shells
web: rails s -p 3000
# Next line runs a watch process with webpack to compile the changed files.
# When making frequent changes to client side assets, you will prefer building webpack assets
# upon saving rather than when you refresh your browser page.
client: sh -c 'rm -rf public/packs/* || true && bundle exec rake react_on_rails:locale && bin/webpack -w'
# You can run these commands in separate shells instead of using foreman
web: rails s -p 3000
# Next line runs the webpack-dev-server
# You can edit config/webpacker.yml to set HMR to true to see hot reloading.
# Note, hot and live reloading don't work with the default generator setup on top of
# the rails/webpacker Webpack config with server rendering.
# If you have server rendering enabled, modify the call to bin/webpack-dev-server line
# so you add `--inline=false` and then CSS is not inlined.
# Otherwise, you will have an error. If you want HMR and Server Rendering, see
# the example in the https://github.com/shakacode/react-webpack-rails-tutorial
client: sh -c 'rm -rf public/packs/* || true && bundle exec rake react_on_rails:locale && bin/webpack-dev-server'
import PropTypes from 'prop-types';
import React from 'react';
export default class HelloWorld extends React.Component {
static propTypes = {
name: PropTypes.string.isRequired, // this is passed from the Rails view
};
/**
* @param props - Comes from your rails view.
*/
constructor(props) {
super(props);
// How to set initial state in ES6 class syntax
// https://reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class
this.state = { name: this.props.name };
}
updateName = (name) => {
this.setState({ name });
};
render() {
return (
<div>
<h3>
Hello, {this.state.name}!
</h3>
<hr />
<form >
<label htmlFor="name">
Say hello to:
</label>
<input
id="name"
type="text"
value={this.state.name}
onChange={(e) => this.updateName(e.target.value)}
/>
</form>
</div>
);
}
}
/* eslint no-console:0 */
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
//
// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
// layout file, like app/views/layouts/application.html.erb
console.log('Hello World from Webpacker')
import ReactOnRails from 'react-on-rails';
import HelloWorld from '../bundles/HelloWorld/components/HelloWorld';
// This is how react_on_rails can see the HelloWorld in the browser.
ReactOnRails.register({
HelloWorld,
});
// 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')),
)
})
......@@ -9,3 +9,5 @@
= link_to 'login via Mastodon', user_mastodon_omniauth_authorize_path
%pre= Sidekiq::Status::get_all(session[:job_id]).inspect
= react_component("HelloWorld", props: { name: "Stranger" }, prerender: false)
......@@ -7,6 +7,7 @@
= csrf_meta_tags
= stylesheet_link_tag 'application', media: 'all'
= javascript_include_tag 'application'
= javascript_pack_tag 'hello-world-bundle'
%meta{ property: 'og:type', content: 'article' }/
%meta{ property: 'og:title', content: 'Find your Twitter friends on Mastodon' }/
......@@ -17,6 +18,7 @@
%meta{ name: 'twitter:card', content: 'summary' }/
%meta{ name: 'twitter:site', content: '@MastodonProject' }/
%body
.header
%ul.left
......
#!/usr/bin/env ruby
ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
ENV["NODE_ENV"] ||= "development"
require "pathname"
ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
Pathname.new(__FILE__).realpath)
require "rubygems"
require "bundler/setup"
require "webpacker"
require "webpacker/webpack_runner"
Webpacker::WebpackRunner.run(ARGV)
#!/usr/bin/env ruby
ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
ENV["NODE_ENV"] ||= "development"
require "pathname"
ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
Pathname.new(__FILE__).realpath)
require "rubygems"
require "bundler/setup"
require "webpacker"
require "webpacker/dev_server_runner"
Webpacker::DevServerRunner.run(ARGV)
Rails.application.configure do
# Verifies that versions and hashed value of the package contents in the project's package.json
config.webpacker.check_yarn_integrity = true
# Settings specified here will take precedence over those in config/application.rb.
# In the development environment your application's code is reloaded on
......
Rails.application.configure do
# Verifies that versions and hashed value of the package contents in the project's package.json
config.webpacker.check_yarn_integrity = false
# Settings specified here will take precedence over those in config/application.rb.
config.lograge.enabled = true
......
# Be sure to restart your server when you modify this file.
#
# This file contains migration options to ease your Rails 5.0 upgrade.
#
# Read the Rails 5.0 release notes for more info on each option.
# Enable per-form CSRF tokens. Previous versions had false.
Rails.application.config.action_controller.per_form_csrf_tokens = true
# Enable origin-checking CSRF mitigation. Previous versions had false.
Rails.application.config.action_controller.forgery_protection_origin_check = true
# Make Ruby 2.4 preserve the timezone of the receiver when calling `to_time`.
# Previous versions had false.
ActiveSupport.to_time_preserves_timezone = true
# Require `belongs_to` associations by default. Previous versions had false.
Rails.application.config.active_record.belongs_to_required_by_default = true
# Do not halt callback chains when a callback returns false. Previous versions had true.
ActiveSupport.halt_callback_chains_on_return_false = false
# Configure SSL options to enable HSTS with subdomains. Previous versions had false.
Rails.application.config.ssl_options = { hsts: { subdomains: true } }
# frozen_string_literal: true
# See https://github.com/shakacode/react_on_rails/blob/master/docs/basics/configuration.md
# for many more options.
ReactOnRails.configure do |config|
# This configures the script to run to build the production assets by webpack. Set this to nil
# if you don't want react_on_rails building this file for you.
config.build_production_command = "RAILS_ENV=production NODE_ENV=production bin/webpack"
################################################################################
################################################################################
# TEST CONFIGURATION OPTIONS
# Below options are used with the use of this test helper:
# ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
################################################################################
# If you are using this in your spec_helper.rb (or rails_helper.rb):
#
# ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
#
# with rspec then this controls what yarn command is run
# to automatically refresh your webpack assets on every test run.
#
config.build_test_command = "RAILS_ENV=test bin/webpack"
################################################################################
################################################################################
# SERVER RENDERING OPTIONS
################################################################################
# This is the file used for server rendering of React when using `(prerender: true)`
# If you are never using server rendering, you should set this to "".
# Note, there is only one server bundle, unlike JavaScript where you want to minimize the size
# of the JS sent to the client. For the server rendering, React on Rails creates a pool of
# JavaScript execution instances which should handle any component requested.
#
# While you may configure this to be the same as your client bundle file, this file is typically
# 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"
end
process.env.NODE_ENV = process.env.NODE_ENV || 'development'
const environment = require('./environment')
module.exports = environment.toWebpackConfig()
const { environment } = require('@rails/webpacker')
module.exports = environment
process.env.NODE_ENV = process.env.NODE_ENV || 'production'
const environment = require('./environment')
module.exports = environment.toWebpackConfig()
process.env.NODE_ENV = process.env.NODE_ENV || 'development'
const environment = require('./environment')
module.exports = environment.toWebpackConfig()
# Note: You must restart bin/webpack-dev-server for changes to take effect
default: &default
source_path: app/javascript
source_entry_path: packs
public_output_path: packs
cache_path: tmp/cache/webpacker
# Additional paths webpack should lookup modules
# ['app/assets', 'engine/foo/app/assets']
resolved_paths: []
# Reload manifest.json on all requests so we reload latest compiled packs
cache_manifest: false
extensions:
- .jsx
- .js
- .sass
- .scss
- .css
- .module.sass
- .module.scss
- .module.css
- .png
- .svg
- .gif
- .jpeg
- .jpg
development:
<<: *default
compile: true
# Reference: https://webpack.js.org/configuration/dev-server/
dev_server:
https: false
host: localhost
port: 3035
public: localhost:3035
hmr: false
# Inline should be set to true if using HMR
inline: true
overlay: true
compress: true
disable_host_check: true
use_local_ip: false
quiet: false
headers:
'Access-Control-Allow-Origin': '*'
watch_options:
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
{
"dependencies": {
"@rails/webpacker": "3.5",
"babel-preset-react": "^6.24.1",
"prop-types": "^15.6.1",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-on-rails": "11.0.7"
},
"devDependencies": {
"webpack-dev-server": "2.11.2"
}
}
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment