I just want to share with you an uncomfortable situation that I'm having right now and ask you for advice. It turns out that I'm developing a kind of old project by using rails 3.2 and ruby 2.0. Until now, as usual I've been creating the view layer with haml markup language. Recently I was assigned to implement a new set of UI requirements that seems to be a little complicated. So I was wondering if I could use the react library to do that. I'm using the react-rails gem to facilitate the integration and it works fine. But the problem comes in when I try to use a third party library like react-dropzone or react-modal or whatever react library. I have not been able to get it to work neither using rails-assets gems nor downloading directly the /dist files and require them with sprockets. Some of the errors that I get are:
typeError: undefined is not an object (evaluating 'webpack_require(3).unstable_renderSubtreeIntoContainer')
Can not find module 'react'
I don't know if I can easily setup a webpack server to compile these react libraries and then can be used along with react-rails and the specific version of rails 3.2. I've searched about the subject and I found the webpacker gem but it requires at least rails 4.2. I appreciate any comment or observation about what should I do.
I've finally solved my problem by using react_on_rails gem which allows an easy integration of React + Webpack + Rails, and also includes the server side rendering option.
Related
So, using Rails 5.2beta (gem install rails --pre), if you create a new app via rails new myapp --webpack=react... how would I go about incorporating Lodash into my flow from there?
I've mucked around with babel-plugin-lodash and lodash-webpack-plugin to no avail.
The compile doesn't fail if I do something like import { _pick, _map } from 'lodash/array'; ... but those variables are undefined when trying to use them.
I'm a bit lost as I'm both new to webpacker & webpack, and a lot of existing examples seem to target an older version of webpack?
Anyway, thank you for any help...
UPDATE:
Ok, looks like you can just do import map from "lodash/map"
So where are you trying to use lodash from? By this I mean are you sure the files are getting compiled / processed by Webpacker, or are they getting processed via the Asset Pipeline?
On my webpacker project I realized that there's a problem: that yes, regular old Javascript compiled with the Asset Pipeline won't know about the NPM Modules included via Webpack. (or at least the require statements wouldn't work).
Because of this I made a hard rule: all javascript goes where webpacker expect it (app/javascript) and no Javascript goes in app/assets. We only use the asset pipeline for CSS (which works great in our case, as I still don't think React - our frontend framework of choice - has a good story around site wide CSS).
I am upgrading my app from Rails 5.0 to 5.1, and there is one thing I can't find being mentioned anywhere - usage of Webpacker to process ActionCable JavaScript files.
I realise that Webpacker and the asset pipeline are supposed to work side by side, but now that we have Webpack build into Rails it would be a waste not to use it for files located in assets directory (which is where ActionCable lives), yet I can't find any information on how to do that.
I'm specifically interested in Babel, so I could use ES6. Any ideas?
The problem here is that you need to replace the ActionCable implementation of rails, which is written for sprockets with something that is written in module syntax, to make proper use of webpacker.
Specifically this line in your cable.js
require action_cable
Everything else should be easily portable.
There seem to be a couple of implementations for ActionCable and modules around:
https://www.npmjs.com/search?q=keywords:ActionCable
Specifically this looks exactly what you are searching for:
https://www.npmjs.com/package/actioncable-modules
There seems to be some movement on the side of Rails to use Webpacker as a complete sprocket replacement in Rails 6, so it might be worth waiting, instead of creating something that builds on third party modules.
I am using React Js with rails 5.0
Important Gems are
gem 'rails', '~> 5.0.2'
gem 'react-rails'
gem 'react-router-rails'
gem 'slim-rails'
my layout and page template is in slim and I am using coffee everywhere.
I am facing lots of problem when I am using react router.
List of questions are:
I want to get a clean approach like angular where I can use module + controller + views in react. Can be it possible?
As now I am using react-router but the thing is that when it send request to the server so request comes to my action controller, action view and layout but does not load react components.
I am not able to use new packages like react-validation( https://www.npmjs.com/package/react-validation). How can I use react packages.
In react routing I want to send request on server and then it loads components which is exist on that action view.
Suggest me for the best approach of using react js + rails
Let's start with the basics, and I apologize if it sounds too basic.
'React' can be viewed as the Facebook JavaScript libraries, the set of JavaScript libraries put out by a community of React users, or the base design philosophy of nested component rendering and tag based caching.
JavaScript is inherent to React libraries, but not to its philosophy.
React on Ruby can be viewed as copying the philosophy or of cross-compiling to or generating JavaScript, or possibly emulating JavaScript in Ruby.
React is inherently a 'View' component, with additional libraries use a component and JSX approach to other capabilities. React-router is such a library.
React is not Angular. Angular is more of an MVC framework.
You probably want to go down these paths:
* Acquire the ability to code in JavaScript. Running on the browser implies code in JavaScript.
* Use Rails only as a server side REST or GraphQL endpoint. Alternately, use Rails to emit JavaScript and then use as REST or GraphQL endpoint.
* Non JavaScript code will not be able to use the latest JavaScript libraries.
It's good to think of the possibilities of what can be done, and this question suggests you are exploring.
I have a rails app with the ember-rails gem installed it is throwing the following error:
Error: assertion failed: Ember Views require jQuery 1.8, 1.9 or 2.0
(in /Users/toverly/Code/tgsoverly/green-zebra/app/assets/javascripts/templates/application.handlebars)
I have recently upgraded the ember with the included command in the ember-rails gem, which pulls and compiles the latest emberjs and places it in /vender/assets of the rails app. I did this because I wanted to incorporate routes, and wanted to make sure I had the newest version.
I have pushed the branch of my project which is on github.
Code Link to Project
What I have done:
Manually included the jQuery link to a CDN.
Removed the link in the 'application.js' file that loads my app to check the jquery being loading on the page. It is there and above any ember.js file.
Tried 1.8.3 and 1.9.1 of jquery
What am I missing in the rails asset pipeline? Is there a better way to understand the way ember loads views? It was working with the previous version of ember.
First off, in order to keep Ember up to date with the gem, you'll want to configure your Gemfile to use the latest Ember-Rails. By default, it will load the latest official versions of Ember and Ember-Data.
Second, your application needs a few changes to be compatible with the latest versions of both. I submitted a pull request with the necessary modifications and some explanation. Hopefully it should clear things up.
How am I supposed to use bootstap with rails 3.0 rather than >= 3.1 ? is there any plugin which supports rails 3.0 ?
I think all of the bootstrap gems require Rails 3.1 or greater. I recently had bootstrap on a 3.0.10 Rails app using the Less.js file that you download from their site: http://lesscss.org/. This is the simplest most basic way to use Twitter-Bootstrap; the file compiles all of your "my_file.less" files into css on the client side.
However, if you want to modify the variables (which is the real power of using this framework) than you need to compile it. You can take a look at this Less compiler: http://wearekiss.com/simpless. I've never tried that, but I hear good things about it and it works on Mac, Linux, or PC.
Probably the easiest thing to do - if you want to compile the code on server side - would be to upgrade your project to Rails 3.1.1 and just use one of the Twitter Bootstrap gems. This is actually exactly what I ended up doing. I was able to update my app to 3.1.1 and I used the Boostrap-Sass gem (just because I slightly prefer Sass).
If you decide to upgrade, follow this RailsCast: http://railscasts.com/episodes/282-upgrading-to-rails-3-1
It helped me a lot.
Ryan Bates also offers a video on how to incorporate Twitter Bootstrap into a Rails app: http://railscasts.com/episodes/328-twitter-bootstrap-basics.
Here's a link to the Sass version of Bootstrap that I am currently using: https://github.com/thomas-mcdonald/bootstrap-sass
Many solutions : you can upgrade to rails 3.1+, might be the better (not the easier, depending on you app) way. You can include the static files yourself if you don't intend to change anything that is handled at the less level. You can do it even if you intend to, but you'll have to recompile the files yourself (or find a way to automate it). Finally, there might be a gem out there that is compatible with rails pre-asset-pipeline, or an old version of a gem. You'll have to look for yourself if you absolutely want a gem.