Is it possible to exclude jQuery dependency from vendor.js in ember-cli when building for production only? I want to include it separately in my site.
You can control which files will be used in development or production using a hash like configuration. In your case you should use:
var app = new EmberApp({
vendorFiles: {
'jquery.js': {
development: 'bower_components/jquery/dist/jquery.js',
production: false
}
}
});
Refer to Customizing a built-in asset section for further info.
At the end the only thing worked for me was this:
var app = new EmberApp({
vendorFiles: {
production: false,
development: 'bower_components/jquery/dist/jquery.js'
}
});
This will exclude it in production but not in development.
This is a rather simple matter, check the bower.json file in your directory and remove the jquery entry, or simply run bower uninstall jquery --save in the cli.
Oups missed the in production only, well you can save it as a dev-dependency that way it's not included in the build.
So remove jquery and then run bower install --save-dev jquery
Related
I have already installed tailwind CSS to my django project and it works just fine,
I tried using the documentation procedure I saw at the daisyui website
npm i daisyui
and I also added the plugin to my tailwin.config.js file also
module.exports = { //... plugins: [require("daisyui")], }
How do you need to work in an Ember addon, to include bower packages while installing the addon.
1) I installed the bower package I want to include in my addon with bower instal packagename --save
2) then in my addon, in the root, edited index.js, to look like this:
/* jshint node: true */
'use strict';
module.exports = {
name: 'my-ember-component',
included: function(app) {
this._super.included(app);
if(app.import){
app.import(app.bowerDirectory + '/path-to-package/package.js');
}
}
};
However, when I try to start my application where the addon is installed, I get a
ENOENT: no such file or directory, stat '/my-ember-application/tmp/source_map_concat-input_base_path-bWTPoVC9.tmp/0/bower_components/path-to-package/package.js
I want to avoid having to manually add the bower dependency to every application I install my addon in.
Note: I am using npm link to debug my addon, perhaps this could be a source of the problem?
Normally the addon's bower componenets are added to the consuming project during ember install addon.
But since you're doing local development and using npm link. You need to simulate this. You can do this with:
ember generate your-addon-name
Explanation.
Check out the docs on default blueprints in the ember cli docs.
A blueprint with the same name as the addon (unless explicitly
changed, see above) will be automatically run after install (in
development, it must be manually run after linking). This is where you
can tie your addon’s bower dependencies into the client app so that
they actually get installed.
In short, you need to create a default blueprint for your app and add the bower dependency there.
Create your file:
//blueprints/your-addon-name/index.js
module.exports = {
normalizeEntityName: function() {}, // no-op since we're just adding dependencies
afterInstall: function() {
return this.addBowerPackageToProject('BOWER PACKAGE NAME'); // is a promise
}
};
Then when you run the default blueprint with
ember generate your-addon-name
I've just installed and created app/styles/app.scss, but when I start with ember server the .css file is not created. Is there any other set up I need, other than npm install --save-dev ember-cli-sass?
I've also added this to my Brocfile.js, and run ember build:
Edit: I've also tried compiling manually by adding this to my Brocfile.js and running ember build:
var compileSass = require('broccoli-sass');
var app = new EmberApp();
var sassImportPaths = [
'app/styles'
];
var appCss = compileSass(sassImportPaths, './app/styles/app.scss', './assets/app.css');
You need to install with ember install ember-cli-sass and after rename app.css to app.scss in app/styles/and restart the server. Should work.
See if below will help you
var app = new EmberApp({
sassOptions: {
includePaths: [
'app/styles'
]
}
});
I was having the same problem.
I just ran npm install --save-dev ember-cli-sass again and it was all good. Everything should work out of the box if you install it and change app/styles/app.css to app/styles/app.scss.
when using ember-cli I would like to be able to include an external js library which requires an API key and I would like to use a different API key in development vs production.
Essentially I would like to add the following script tag to app/index.html
<script type="text/javascript" src="http://something.com?key=API_KEY"></script>
but I would like API_KEY to be different when I'm running in development as opposed to production.
Thanks for the help!
Have a look at the ember-inject-script addon which makes it easy to include 3rd party scripts in your ember-cli app. To use it, npm-install the addon then use an initializer to load the script. Then set different values for API_KEY in your config/environment.js
npm install --save-dev ember-inject-script
ember generate initializer something-dot-com
Then edit the initializer as follows
import injectScript from 'ember-inject-script';
import config from '../config/environment';
export default {
name: 'something-dot-com',
initialize: function() {
var url = "//something.com?key=" + config.SOMETHING_API_KEY;
injectScript(url);
};
}
And in config/environment.js
ENV.SOMETHING_API_KEY = 'YOUR_DEV_API_KEY';
if (ENV.environment === "production") {
ENV.SOMETHING_API_KEY = 'YOUR_PROD_API_KEY';
}
I'm using ember-cli to structure my app.
It compiles all the files to the dist/ directory.
However as I inspected the compiled index.html I noticed it was creating this meta tag.
<meta name="user/config/environment" content="%7B%22modulePrefix%22%3A%22user%22%2C%22environment%22%3A%22development%22%2C%22baseURL%22%3A%22/%22%2C%22locationType%22%3A%22auto%22%2C%22contentSecurityPolicy%22%3A%7B%22default-src%22%3A%22%27none%27%20localhost%22%2C%22script-src%22%3A%22%27self%27%20%27unsafe-inline%27%20%27unsafe-eval%27%20use.typekit.net%20connect.facebook.net%20maps.googleapis.com%20maps.gstatic.com%22%2C%22font-src%22%3A%22%27self%27%20data%3A%20use.typekit.net%22%2C%22connect-src%22%3A%22%27self%27%20localhost%22%2C%22img-src%22%3A%22%27self%27%20www.facebook.com%20p.typekit.net%22%2C%22style-src%22%3A%22%27self%27%20%27unsafe-inline%27%20use.typekit.net%22%2C%22frame-src%22%3A%22s-static.ak.facebook.com%20static.ak.facebook.com%20www.facebook.com%22%7D%2C%22EmberENV%22%3A%7B%22FEATURES%22%3A%7B%7D%7D%2C%22APP%22%3A%7B%22LOG_ACTIVE_GENERATION%22%3Atrue%2C%22LOG_VIEW_LOOKUPS%22%3Atrue%7D%2C%22exportApplicationGlobal%22%3Atrue%7D">
This is a problem for my deployment as I'm currently using the ember-app within another page and this meta tag is needed for the ember app to work. Is there a way to make this as part of the javascript compiled file or get rid of this altogether?
The ability to build your app without this was recently added in this PR
You can set it up to be in your compiled JS output by passing in the storeConfigInMeta option. To opt-out, it should look like this in your Brocfile.js
/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var app = new EmberApp({
storeConfigInMeta: false
});
module.exports = app.toTree();
This is available in ember-cli 0.1.2 which is the latest version right now