JQueryUI at Ember upgrade - jquery-ui

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',
});

Related

Why we should not use Bower but Yarn, while both download different codes for the same package?

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.

Installing react-redux in a Rails project

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

Can bower automatically write <script> tags into index.html?

I'm using yeoman's backbone generator, and I ran this:
bower install backbone.localStorage -S
And I manually had to insert this into index.html:
<script src="bower_components/backbone.localStorage/backbone.localStorage.js"></script>
Is there some way for bower to automatically insert <script> tags? I thought part of the benefit of bower was not having to figure out in which order to include your scripts?
Just run
grunt bowerInstall
after bower install
You can use wiredep to push dependencies into your HTML code from bower. This is the approach used by generator-angular when you run yo angular:
var wiredep = require('wiredep');
wiredep({
directory: 'app/bower_components',
bowerJson: JSON.parse(fs.readFileSync('./bower.json')),
ignorePath: 'app/',
htmlFile: 'app/index.html',
cssPattern: '<link rel="stylesheet" href="{{filePath}}">'
});
Bower won't add support for a specific function like this, but will soon allow you to specify an action to take after 'bower install'ing a new package. This will be called a "postinstall," similar to npm.
In the meantime, however, I have created a library to help with this. Since you're using yeoman, just add "grunt-bower-install" as an npm 'devDependency', then follow the instructions here: https://github.com/stephenplusplus/grunt-bower-install.
Use --save
bower install --save <YOUR_PACKAGE>
The --save option updates the bower.json file with dependencies. This will save you from having to manually add it to bower.json yourself. You'll see that the script section at the bottom of index.html has automatically updated.
Reference: http://yeoman.io/codelab/install-packages.html

Yeoman / AngularJS not loading CSS in development server

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)

Ruby on Rails: How to organize properly JS and CSS files?

I would like to use the SlickGrid plugin in my Rails 3 application.
I contains several JS and CSS files that I should include in my HTML page.
It is possible to put all the needed JS files in the public/javascripts directory and all the CSS files in the public/stylesheets directory. However, I don't like this solution because it breaks the plugin package files structure.
I would like to put all the plugin files in one place (I thought about vendor/plugins, is it a better place?), and include the needed files from there. Is that possible ?
What is the proper way to include the JS and CSS files when integrating a plugin ?
I think Jammit can help you accomplish what you're trying to do. Besides packaging, embedding, gzipping your assets, it also allows you to store javascript and stylesheets anywhere in your app. Images (if not embedded) could be a problem though.
Answer by #rubiii is also good, but since sprockets gem from version 2.10.0 supports bower, now it is extremely easy to integrate any js/css libraries. Also version management and updating as easy as typing bower install. Bower can be installed through nodejs npm install -g bower, include .bowerrc file in root of application with content inside:
{
"directory": "vendor/assets/components"
}
Then specify libraries in bower.json and run bower install
{
"name": "appName",
"version": "0.0.0",
"dependencies": {
"bootstrap": "~3.0.0",
}
}
After components installed, require files in application.js/application.css as usually. e.g.
*= require bootstrap

Resources