I am building a React app in Rails and would like to try react-redux. I noticed that it doesn't offer a CDN nor a bower package.
The installation instructions recommend using NPM, but this is not a node project. I handle all my current assets through the Rails asset pipeline, a CDN or a bower package (via rails-assets)
Is there a way to install it without using NPM?
Is there a way to get NPM packages to play nice with existing asset pipeline packages?
You can also check out https://github.com/shakacode/react_on_rails. It's integrated with webpack which gives it a nice and familiar javascript flow.
They've also got a live example at http://www.reactrails.com/ and the code for that at https://github.com/shakacode/react-webpack-rails-tutorial.
I found that it is possible using react-rails in conjunction with browserify-rails. This blog article explains it pretty well.
Just run the command yarn add redux react-redux
This will add redux and react-redux to dependency as well as connect react to redux.
I am using rails 6 and it works fine with this.
add ruby related lib via bundle add and js related lib via yarn
Related
I found an open source Ruby on Rails project that is created with command rails new myapp --webpack=react but I am only interested in the React part. How can I seperate it from the rest and enable it to run on its own?
The link to repo: https://github.com/vigetlabs/storyboard
For what I have done so far;
React related files reside in directory ./app/javascript/pack/ but npm script triggers Ruby application first. Ruby, somehow, starts the React application. This is how far I could come.
use create-react-app to create a new react app.
copy and paste /app/javascript/src to the newly created react app. maybe packs folder too.
copy over the package.json file content to get all packages.
do some testing/debugging
I work in a completely air-gapped environment in which I would love to use Ruby on Rails. I have the ability to cache dependencies for offline use in Nexus. The problem I'm having is that after I've cached all my dependencies for Rails 6 (including the NodeJS ones), node-sass is unable to install because it attempts to download a file from GitHub.
I'm completely fine without using a CSS pre-processor, and would much rather deal with vanilla CSS than deal with this dependency headache. Is it possible to disable just Sass support when creating a new Rails app? I'm able to use --skip-javascript to disable all javascript support, but since all the other dependencies are able to be installed, it would be a shame to have to disable them just because node-sass can't be installed offline. Is there an option like that for Sass?
I'm aware I could manually copy the .node file from the GitHub release page, however, I'm trying to make this process as minimalistic and automatable as possible.
I'm working with Fedora Linux if that's relevant.
Any help is appreciated.
Yes, I think --skip-sprockets option will disable Sass. You can also disable webpacker using --skip-javascript.
You may try below command.
rails new green-forest -S -J
After upgrade and dismissing Bower as recommended: Is there a way to include JQueryUI into an Ember project without using Bower? My project depends heavily of JQueryUI dialogs.
$ ember -v
ember-cli: 3.3.0
node: 8.11.3
os: linux x64
Do I have to reintroduce Bower into my project? Like in this old Using jquery in Ember-cli advice?
does this solve your use case?:
ember install ember-auto-import
npm install jquery-ui
and then wherever you need to use it:
import { stuff } from 'jquery-ui';
Including external js through npm package is always suggested. Above answer shows how to do it.
Sometime the developer won't maintain the package. In that case, you have to include it manually to get the latest js for your app.
If you want to include it manually (not depending on the npm package), here is the way to add external js in your application
1) Download the latest stable jquery-ui from their official site.
2) Extract it. Include jquery-ui.js file in your app/vendor/jquery-ui.js
(Where vendor is the home for external js)
3) Once added import the js in ember-cli-build.js file
app.import('vendor/jquery-ui.js');
4) Restart the ember app.
I was able to get it to work by adding "jquery-ui": "^1.13.2", to my package.json file.
Inside ember-cli-build.js I added the following
// jQuery UI
app.import({
development: 'node_modules/jquery-ui/dist/jquery-ui.js',
production: 'node_modules/jquery-ui/dist/jquery-ui.min.js',
});
// jQuery UI CSS
app.import({
development: 'node_modules/jquery-ui/dist/themes/smoothness/jquery-ui.css',
production: 'node_modules/jquery-ui/dist/themes/smoothness/jquery-ui.min.css',
});
For example:
yarn add babel
bower install babel
I have application running without server (I don't plan to use NodeJS as my back-end). It is now pure-front-end double-click HTML file.
I tried to import browser.js into my HTML file to be able to process JSX.
Import with <script src="node_modules/babel-core/lib/api/browser.js"> does not work.
But, import with <script src="bower_components/babel/browser.js"> works.
Apparently, the codes are different. Since, Bower is dead and it suggests its users to use Yarn, how can the codes be different?
How can I use Yarn like I use Bower?
I have tested. There is no way ReactJS downloaded from package manager like Yarn or NPM work without server. At least any static-file server works.
In my case I ran yarn build, go to build directory, make sure the working directory is in the build folder, then run any server from there (root must be at the build folder). I use python3 -m http.server (because that is the only thing I conveniently use). I suppose you can use basic NodeJS HTTP as well.
I am not happy with the result, with fact that I can use CDN and Bower to serve React application as a single HTML file but I cannot do as such with React downloaded form the currently hip package manager.
I'm using the AngularJS Yeoman generator (https://github.com/yeoman/generator-angular) and Express for the server. When running grunt server, it starts up my app fine and compiles .scss files into the .tmp folder in the root directory, but my pages don't automatically load that css. I have set up a link to the style/style.css stylesheet in my layout jade file.
I've also tried grunt compass, which works fine, but again, does not make it so my views actually load the css file in .tmp. I have the default compass setup in grunt.
This was an issue with live-reloading that has been addressed in newer releases. Update your generators through yo or by running npm update -g generator-angular. If you want to upgrade an existing project, you can run yo angular in the same directory and choose the diff option to see the changes you have to make.
As for May 22, 2015 ... the yeoman generator-angular does not work correctly unless you select Yes when asked if you'd like to include the Twitter Bootstrap. Perhaps subsequent releases will fix this.
On a good note, there are much less problems with the generator-angular than with generator-angular-ui-router (which is a disaster)