I have been playing around with ember 1.13 and I can see that in some online tutorials they require js and css via index.html while some uses ember-cli-build.js or brocfile.js for older versions. I find it requiring properly when I use ember-cli-build.js but then I am not sure what exactly the use of index.html
It depends.
If you have a ember-cli-plugin it will add the files to the vendor files by itself normally. Like with ember-cli-materialize.
If you are installing a random bower package like Ladda, you would need to add the files you need manually to ember-cli-build.js:
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
});
app.import('bower_components/ladda/dist/ladda-themeless.min.css');
app.import('bower_components/ladda/dist/spin.min.js');
app.import('bower_components/ladda/dist/ladda.min.js');
return app.toTree();
};
This will then be merged into your vendor.css and vendor.js which are linked to from index.html.
Also when you build the app the bower_components won't be available unless you've explicitly included something, so you cannot just link to them from index.html. It would also be a waste of network resources to include files separately. You shouldn't have to include anything in index.html unless it's an external resource.
brocfile.js is the old name for ember-cli-build.js since they've stopped using broccoli. Just use the newer one.
Related
I am bundling 6 different modules together in Webpack. One of then is Mustache.js.
The Mustache templates live inside the HTML page. They are not in a separate file. Now when I load my page ... I get this error ...
This is my app.js file
require('mustache');
require("./js/modules.js");
require("./js/custom.js");
require('owl.carousel');
require('bootstrap');
require("expose-loader?$!jquery");
I have tried changing the order, but nothing is working.
The 'modules.js' file has a dependency on 'mustache'. So I went into the modules.js file and added require('mustache'); at the top in that file, but nothing changed. Do I need to add any additional configuration to my webpack.config.js file ?
If I take the Mustache.js modules out of the bundle and load it normally on the html page like <script src="js/mustache.js"></script> then everything works fine.
Can someone please advise how can I include this module in the bundle ? Already wasted so many hours trying to make this work, but to no avail. Many thanks in advance.
It sounds like it's working when not bundled because you reference the script directly in the DOM and Mustache is added to the global scope, in this case window.Mustache.
In your app.js or any other 'bundled' script that is referencing Mustache you'll need to require and assign to a variable:
var Mustache = require('mustache');
In a Ruby on Rails application, how can we require or import a package which was not installed via npm or yarn, but via bundle?
I tried:
//= require package-name
But that doesn't seem to work with webpacker.
require("package-name") doesn't work either (because it is not found in node_modules).
For normal Rails environment, you can use normal directory path if you want to require some files.
Suppose your assets folder looks like this
├── application.js
└── something.js
and you want to require something.js then you just need to write
//= require ./something.js
to your application.js
For a package that you manually place somewhere, then you have to add the place of packages to Rails.application.config.assets.paths
If you are using Rails v5, you can check the config/initializers/assets.rb to see the magic of loading node_modules happened
I have no webpack experience and no solution for your problem.
what about this
https://webpack.js.org/loaders/bundle-loader/
as I read in the documentation paths chapter
Paths
By default, Webpacker ships with simple conventions for where the JavaScript app files and compiled webpack bundles will go in your Rails app, but all these options are configurable from config/webpacker.yml file.
The configuration for what webpack is supposed to compile by default rests on the convention that every file in app/javascript/packs/*(default) or whatever path you set for source_entry_path in the webpacker.yml configuration is turned into their own output files (or entry points, as webpack calls it). Therefore you don't want to put anything inside packs directory that you do not want to be an entry file. As a rule of thumb, put all files you want to link in your views inside "packs" directory and keep everything else under app/javascript.
Suppose you want to change the source directory from app/javascript to frontend and output to assets/packs. This is how you would do it:
# config/webpacker.yml
source_path: frontend
source_entry_path: packs
public_output_path: assets/packs # outputs to => public/assets/packs
Similarly you can also control and configure webpack-dev-server settings from config/webpacker.yml file:
# config/webpacker.yml
development:
dev_server:
host: localhost
port: 3035
If you have hmr turned to true, then the stylesheet_pack_tag generates no output, as you will want to configure your styles to be inlined in your JavaScript for hot reloading. During production and testing, the stylesheet_pack_tag will create the appropriate HTML tags.
The asset-pipeline loads the files from the path defined with Rails.application.config.assets.paths
This is the output from my rails console
["/home/fabrizio/Documents/Sublime/Rails/surfcheck/app/assets/config",
"/home/fabrizio/Documents/Sublime/Rails/surfcheck/app/assets/images",
"/home/fabrizio/Documents/Sublime/Rails/surfcheck/app/assets/javascripts",
"/home/fabrizio/Documents/Sublime/Rails/surfcheck/app/assets/stylesheets",
"/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/font-awesome-rails-4.7.0.2/app/assets/fonts",
"/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/font-awesome-rails-4.7.0.2/app/assets/stylesheets",
"/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/jquery-rails-4.3.1/vendor/assets/javascripts",
"/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/coffee-rails-4.2.2/lib/assets/javascripts",
"/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/actioncable-5.1.4/lib/assets/compiled",
"/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/actionview-5.1.4/lib/assets/compiled",
"/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/turbolinks-source-5.0.3/lib/assets/javascripts",
#<Pathname:/home/fabrizio/Documents/Sublime/Rails/surfcheck/node_modules>,
#<Pathname:/home/fabrizio/Documents/Sublime/Rails/surfcheck/vendor>,
"/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/bootstrap-sass-3.3.7/assets/stylesheets",
"/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/bootstrap-sass-3.3.7/assets/javascripts",
"/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/bootstrap-sass-3.3.7/assets/fonts",
"/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/bootstrap-sass-3.3.7/assets/images"]
When you do a require in your application.js or application.scss, sprockets will use the ruby require statement to search that file in the predefined paths.
In case of a GEM, it will find it in the .rbenv/version/yourversion folder.
My approach to solve this problem would be to include those files from the gem that you need for you front end app in the correct folder, so just visit the repository from the GEM and copy paste those file in the correct location.
I know this is not a solution to your problem, but I just wanted to help you out.
Bye
Fabrizio
Budo does great job to browserify and run with livereload. But it is using index.html by default. That makes it less convenient with several html files. Is it possible to run it against a custom html file?
It mentions to accept all browserify options but I couldn't find the relevant one.
You can use the dir flag to point to a custom path where you house a different index.html file:
eg: budo index.js --dir myCustomBudoDir
this will serve your index.html out of your myCustomBudoDir directory
If your launch dir has an index.html, budo will use that. I've got a super simple project here.
Currently, Budo has the name index.html baked in, so using separate directories is the way to go, see the dir option in the doc
Alright, I've got a multi-page site with page-specific modules. Each page should load two JS files generated by r.js: main.js, which is a collection of all modules available globally, and "page-name-here".js, which is a collection of the modules only needed for the current page.
I tried to pattern it somewhat off of this response to a similar question: https://stackoverflow.com/a/11730147/843490.
I also wanted to structure it so that I wouldn't have to explicitly include jQuery as a dependency in every module, but that it would just be loaded and executed first.
Build.js file: http://pastebin.com/XP2cCh18
Main.js file: http://pastebin.com/vsAnm99S
The r.js tool seems to be compiling everything correctly with all modules written into main.js and "page-name-here".js. BUT, when I load the page, require js starts bringing in EVERY global module individually even after main.js has loaded. I assume this is due to global.js not being listed explicitly as a dependency, but I'm unsure of have to tweak it to remedy this.
Any clues? Thanks!
I am trying to learn Derby.js and I am having a lot of trouble. I know I can include packages such as jQuery through npm and add it to the node_modules folder, but this isn't quite what I want to do. I want to be able to include these files like I do in normal HTML.
So I want to do something like <Head:> <script src="js/jquery.js"></script>. This does not work though because it cannot find the js directory. I expect this has something to do with the way node.js runs an app and that the app itself will not hold the js directory.
Any help would be appreciated!
Derby offers the Script: tag:
<Scripts:>
<script type="text/javascript" src="/components/jquery/jquery.js"></script>
The components directory is because of the usage of bower. Put the components directory into the public directory. According to the express FAQ, the static routes search below the given directory (which is public in derby's example application). Configure bower to put the files under public/components (Choose bower install directory).
The public directory is configured at lib/server/index.js: .use(gzippo.staticGzip(publicPath, {maxAge: ONE_YEAR})), where publicPath is configured above to path.join(root, 'public').
Be aware that the "idea behind the inline script is that it runs immediately, before any of the external scripts are loaded. This should only be used in rare cases where the script should run before the page is displayed in the browser, such as sizing something to the window or autofuocusing an element in browsers that don't support the "autofocus" attribute." Nate Smith in the derby google group.
Inline scripts should be placed in inline.js, located in the same directory as the application's index.js.
If you require jQuery to do something on the loaded page, following code snipped worked at my side (Firefox, Chrome) in inline.js:
window.onload = function() {
alert($(this));
}