Ember build not picking up changes to environment.js - ember.js

I have a working configuration in my environment.js, but want to add a variable. I placed the pageSize variable like so: var ENV = {
contentSecurityPolicy: {
'style-src': "'self' 'unsafe-inline'"
},
modulePrefix: 'fdms-admin',
environment: environment,
ROOT_URL: process.env.ROOT_URL,
BASE_URL: process.env.BASE_URL,
pageSize: 100,
baseURL: '/admin/',
locationType: 'auto',
EmberENV: {
...
When I run ember build and place the assets folder inside of my Java project, the changes to the config are not being picked up. The pageSize variable is undefined on the ENV object. Any ideas?
I usually test by running ember server --proxy http://localhost:8080 --environment local, and the pageSize variable show up just fine.

Not sure which ember version you use but environment variables are placed inside meta tag with name set to ember app that you created and content. So when you say I copied the javascript files did you also included the meta tag after building for production mode
ember build --environment production
Under dist the index.html file contains this line
<meta name="APPNAME/config/environment" content="....
So after you copy script files your html file that loads them should include this meta tag as well. I have seen somewhere that this is possible to export env into js file but forgot how it is setup. In most cases config vars are stored in meta tag.
Hope it helps

Related

Intel XDK + Ember - bower_components/jquery/src/intro.js: Unexpected token (45:0)

I'm trying to use Ember + Intel XDK.
I create a brand new Ember app:
ember new cash
Run ember server, and go to localhost:4200 - everything ok - Welcome to Ember page appears.
Then I open Intel XDK and import my Ember HTML project. I just import it, go back to console and run ember server again. Then I get:
cash git:(master) ✗ ember server
version: 2.3.0
Livereload server on http://localhost:49152
Serving on http://localhost:4200/
File: cash/bower_components/jquery/src/intro.js
cash/bower_components/jquery/src/intro.js: Unexpected token (45:0)
SyntaxError: cash/bower_components/jquery/src/intro.js: Unexpected token (45:0)
43 | // you try to trace through "use strict" call chains. (#13335)
44 | //"use strict";
> 45 |
| ^
at Parser.pp.raise (/Users/Antonio/Code/mbcash/cash/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/node_modules/babylon/lib/parser/location.js:24:13)
at Parser.pp.unexpected (/Users/Antonio/Code/mbcash/cash/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/node_modules/babylon/lib/parser/util.js:82:8)
at Parser.pp.parseExprAtom (/Users/Antonio/Code/mbcash/cash/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:425:12)
at Parser.pp.parseExprSubscripts (/Users/Antonio/Code/mbcash/cash/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:236:19)
at Parser.pp.parseMaybeUnary (/Users/Antonio/Code/mbcash/cash/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:217:19)
at Parser.pp.parseExprOps (/Users/Antonio/Code/mbcash/cash/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:163:19)
at Parser.pp.parseMaybeConditional (/Users/Antonio/Code/mbcash/cash/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:145:19)
at Parser.pp.parseMaybeAssign (/Users/Antonio/Code/mbcash/cash/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:112:19)
at Parser.pp.parseExpression (/Users/Antonio/Code/mbcash/cash/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:79:19)
at Parser.pp.parseStatement (/Users/Antonio/Code/mbcash/cash/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/node_modules/babylon/lib/parser/statement.js:137:23)
I'm using ember-cli 2.3.0, which leads me to:
DEBUG: -------------------------------
DEBUG: Ember : 2.3.1
DEBUG: Ember Data : 2.3.3
DEBUG: jQuery : 2.1.4
DEBUG: -------------------------------
I tried to use the following in ember-cli-build.js:
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
babel: {
compact: false
}
});
return app.toTree();
};
but when I run ember server, I got these two lines:
version: 2.3.0
Livereload server on http://localhost:49152
Serving on http://localhost:4200/
and it stops there.
If I go to the browser and visit localhost:4200, nothing happens, and the browser status bar shows:
Waiting for localhost...
I think I'm trying something new, because I searched a lot, but didn't find discussions about Ember + Intel XDK.
If somebody can help me, thanks in advance.
Looks like Babel is compiling the bower_components directory which is not good. Maybe bower is configured to create a bower_components directory inside your project's app dir.
Check if you have a .bowerrc file in your home directory (or upwards the directory tree of your project location) that looks like this:
{
"directory": "app/bower_components"
}
If this is the case, delete the app/bower_components directory and create a local .bowerrc file in your project's directory.
Finally, run bower install if required.
Babel should not compile files inside bower_components the next time you run the server.

Exclude jQuery from vendor.js in ember-cli

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

ember-cli including different script tags in development vs production

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

ember-cli meta config/environment file

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

Use Forever with Ember-CLI

I've set up a website using Ember-CLI and it is now ready for production, so we're looking for a way to keep it running permanently.
Right now we're using $ ember serve --port 80
but obviously this only works whilst we're logged in. I've used Forever before to keep a node app running but am not sure how to make this work with Ember CLI, as the 'ember serve' command obviously does more than just running app.js?
Any input would be appreciated!
Ember-CLI apps are NOT node apps, they are Browser apps, so you don't need anything special to serve them. To keep and Ember-CLI app running permanently, I suggest doing:
ember build --environment=production
This will perform the necessary build steps so that the code works in browsers (e.g, transpiling ES6 modules) and put the code in the build folder. It will also minify JS files and fingerprint all resources (this only happens when the environment is production).
All you have to to then is put the files inside the dist/ folder on a Web Server.
I suggest Apache or Nginx, but anything will work.
Edit
As Omair Vaiyani pointed out, this might not work in some servers because Ember-CLI
uses the locationType: 'auto' which defaults to 'history'. For that to work, you have to configure your SERVER to serve the ember app from all routes.
What I do, and server me well because I don't have control over the server, is to simply change the locationType to 'hash', which will generate URLs with hashes (http://myemberapp/#/myroute/myid) and will work with any server. Just edit the environment.js file accordingly:
module.exports = function(environment) {
var ENV = {
/* other stuf ... */
locationType: 'hash',
/* other stuf ... */
},
/* other stuff */
```