I'm trying to debug a qunit ember integration test on Webstorm. Qunit is the same framework that ember is tested with.
Our test is similar to this:
import startApp from '../helpers/start-app';
var App;
module('Integration Tests', {
setup: function() {
App = startApp();
},
teardown: function() {
Ember.run(App, 'destroy');
});
test("Checking hub page",function(){
expect(2);
visit('/hub');
andThen(function(){
console.log(currentRouteName());
ok('in to the function');
});
});
I am trying these settings:
Edit------------------------------
I updated my run config but the application exits with the following error:
debugger listening on port 59771
version: 0.1.7
Could not find watchman, falling back to NodeWatcher for file system events
BuildingBuilding.Building..Building...Building...
Build successful - 1853ms.
c[?25l[8;NaNrtty.setRawMode: Use `process.stdin.setRawMode()` instead.
tty.js:37
throw new Error('can\'t set raw mode on non-tty');
^
You should have used ember to run your code. And you are running it as a simple node.js application (node foo-test.js). Moreover, Node won't accept EcmaScript 6 syntax unless being run with --harmony switch. Please make sure to update your run configuration accordingly (to run ember and pass your spec as a parameter to it)
Related
I was doing some hands on with the new SvelteKit FE using AWS Amplify to use Cognito service to authenticated my app and everything run fine in dev mode. But then, I tried to build it for deployment and this is where the fun begin...
First, I was not able to simply build the app. There was an error with Vite not able to correctly "interpret" the "browser" field!? :
'request' is not exported by __vite-browser-external, imported by node_modules/#aws-sdk/credential-provider-imds/dist/es/remoteProvider/httpRequest.js
The issue is documented here (https://github.com/aws/aws-sdk-js/issues/3673) and here (https://github.com/aws-amplify/amplify-ui/issues/268).
I apply the solution suggested but ErikCH to add an alias in the svelte.config.cjs file:
resolve: {
alias: {
"./runtimeConfig": "./runtimeConfig.browser"
}
}
So now, I was back on track since the app build without an hitch. But then, I tried to run the app with an "npm run preview" but it stop dead on this message:
TypeError: Amplify.configure is not a function
I double check my code and I don't see anything missing or out of place. Here's the imports and call of that function :
...
import Amplify from '#aws-amplify/core';
import Auth from "#aws-amplify/auth";
import awsconfig from "../aws-exports";
Amplify.configure(awsconfig);
...
As mention before, the project run in dev mode, it all in pure Javascript, nothing really fancy. I updated to the latest package of everythings... here my actual version:
#sveltejs/kit": "^1.0.0-next.159
vite v2.5.1
"aws-amplify": "^4.2.5"
node v14.17.5
npm v7.21.1
I saw comments about removing completely Amplify libs and write wrappers to call Cognito directly but I found this not very productive and cumbersome. So, my last resort is the call Stackoverflow to the rescue! ;-)
Edit #1 I realize that this error occur in the app.js, that is the server side of the FE app. This is not right. This MUST run in the browser. How come it end up in the server side ???
I had to change Amplify to a named import for preview to work for me after build.
import { Amplify } from '#aws-amplify/core'
And in case anyone faced 'dev' issues with Amplify + SvelteKit, adding the following to the top of the <head> tag in app.html may help.
<script>
var global = global || window
var Buffer = Buffer || []
var process = process || { env: { DEBUG: undefined }, version: [] }
</script>
My versions:
Node.js: 14.18.0
#aws-amplify/auth: 4.3.11
#aws-amplify/core: 4.3.3
#sveltejs/kit: 1.0.0-next.190
typescript: 4.4.4
I'm not entirely sure this gets you on the right track, but one thing that has helped me out with package import weirdness, especially when it's between dev and build, is vite's optimizedDeps config directive. Perhaps something within the AWS package(s) is not liking the pre-bundling that vite is doing and you need to exclude it? This might help explain why things run fine while in dev.
There are development, test and production environments in Ember CLI.
I have test and production server. And I need to make build on test server like on production but with another environment configs. But test env in Ember CLI used for automatic tests.
I tried to call ember build --environment development on test server with next options in ember-cli-build.js file:
var app = new EmberApp(defaults, {
// Add options here
fingerprint: {
prepend: 'https://s-test.mycdn.com/',
enabled: true
}
});
But I got error:
The Broccoli Plugin: [AssetRewrite] failed with:
TypeError: Cannot read property '2' of null
.....
The broccoli plugin was instantiated at:
.....
What is right way to build ember application on test server?
This might be confusing, but what you want is not environments. You want deploy targets. Here's a great blog post about difference between the two: Do not confuse environment for deploy target (that URL has been trashed in a reorg/takeover of deveo.com but a snapshot exists on archive.org).
In Ember, environments are about how your code is minified, your assets are fingerprinted, enabling/disabling certain debugging features, etc. They are not about where you want to deploy your code, which API URL you want to use, or anything like that.
You might happen to have servers called test or development, but when deploying to these servers, you should always set environment to production, not test or development.
In order to support multiple servers (deploy targets), I would use env vars to do that. Something like:
DEPLOY_TARGET=development ember build --environment=production
DEPLOY_TARGET=test ember build --environment=production
DEPLOY_TARGET=staging ember build --environment=production
DEPLOY_TARGET=production ember build --environment=production
And in your ember-cli-deploy.js, you simply access the value through process.env.DEPLOY_TARGET, like this:
const deployTarget = process.env.DEPLOY_TARGET;
if (deployTarget === 'development') {
// ...
} else if (deployTarget === 'test') {
// ...
} else if (deployTarget === 'staging') {
// ...
} else if (deployTarget === 'production') {
// ...
}
I recommend using ember-cli-deploy addon to automate this process, so that you could just type ember deploy staging to create a build for staging and deploy it.
Unfortunately, support of environmements in ember-cli is poor. You have only development and production and can't add new ones. On top of that, production build does additional things like minifying, fingerprinting, etc, which are not necessarily needed on test/staging server and time consuming.
The good news is we have an access to Node API inside environment.js. In fact, environment.js is a node module. This allows us to add additional parameters to ember build and parse them. I'm successfuly using this trick in ember-cli 2.7 and used in 2.8 too. You will need to:
Install minimist: npm install minimist --save-dev
Add this code to the beginning of environment.js:
var argv = require('minimist')(process.argv.slice(2));
console.log('Sub-environment is set to ' + argv.subenv);
Use argv.subenv in environment.js to recognize different "sub-environments". I suggest to do this after "environment" blocks:
if (argv.subenv === 'mirage') {
ENV['ember-cli-mirage'] = {
enabled: true
};
ENV.API.namespace = '';
ENV.API.host = '';
}
if (argv.subenv === 'staging') {
ENV['ember-cli-mirage'] = {
enabled: false
};
ENV.API.host = 'https://your-server.com/';
ENV.API.namespace = '';
}
You can combine environment and argv.subenv in your code as you need.
Use your argument when building: ember build --environment=development --subenv=staging. Ember-cli will output a warning about non-supported arguments, but everything will work just fine.
Using this method, you can have as many servers as you need and build development/production version of app on any of them.
As for your error, I'm not sure what causing it, probably you may find something here
Edit your config/environment.js to set your environment when the param equals staging. For example:
```
function(environment) {
var ENV = {
// SET ENV properties
APP: {
// Here you can pass flags/options to your application instance
// when it is created
},
contentSecurityPolicy: {
// Configure security
}
};
if (environment === 'production') {
// Set production values
}
if (environment === 'staging') {
// Set staging values
}
if (environment === 'development') {
// Set staging values
}
if (environment === 'test') {
// Set testing values
}
return ENV;
};
```
And then when trying to build the version use the following command:
ember build --environment="staging"
When I am running: ember test --filter="acceptance", I am getting this warning:
Torii is installed but not configured in config/environment.js.
What should I do to fix this?
Add this to config/environment.js
torii: {
sessionServiceName: 'session'
},
When I run ember build --production it adds versioning to each file type. This is a problem for me as I have a compilation script that compiles the ember up then takes the file out for further processing.
How can I disable versioning of file names in production?
Edit you brocfile like below.
var app = new EmberApp({
fingerprint: {
enabled: false
}
});
I am deploying an Ember CLI app through jenkins and publishing it using nginx. Here is by jenkins build script:
npm install
bower install
node_modules/ember-cli/bin/ember build --environment=production
The nginx configuration simply directs sub.domain.com to jenkins\jobs\lastStable\archive\dist. That works fine, but when I go the page, it is blank and the following output in the console:
TypeError: Ember.Handlebars.compile is not a function vendor-92ab6507ac60a5bf7c6819aa8fc418d6.js:18
ReferenceError: Swag is not defined spa-client-9b01c6124f5b2a4cd2e95b62be7f5ba5.js:1
I am guessing that the two errors are related, but I can't figure out what is causing them. I have tried this answer to what appears to be a similar question, but it doesn't work for me. Everything works fine in my dev environment, and I can't see anything suspicious in the Brocfile.js.
I have same issue with one of third-party libraries I'm using.
I'm using this solution: https://github.com/rwjblue/_____ember-cli-test/commit/1a26911def6f04a4badee94c8a62d8205258867b
My Brocfile.js diff:
-var app = new EmberApp();
+var app = new EmberApp({
+ vendorFiles: {
+ 'handlebars.js': {
+ production: 'bower_components/handlebars/handlebars.js'
+ }
+ }
+});
Production uses handlebars-runtime which does not include Ember.Handlebars.compile. The reason is that it's smaller to use that in production and it's more effective to precompile which ember-cli does for you automatically.
Lots of discussion on the PR found here
I encountered this same problem with the bootstrap for ember package. The temporary solution (from GH) was to inlcude the entire handlebars.js file in production:
var fileMover = require('broccoli-file-mover');
var vendorTree = fileMover('vendor', {
files: {
'handlebars/handlebars.js': 'handlebars/handlbars.runtime.js'
}
});
var app = new EmberApp({
vendorFiles: {
'handlebars.js': {
production: 'vendor/handlebars/handlebars.min.js'
}
}
});