Here are the ember libraries that I used:
ember-cli : 0.1.7
Ember : 1.8.1
Ember Data : 1.0.0-beta.12
Handlebars : 1.3.0
My config/environment.js file contains some api keys. According to the link (http://www.ember-cli.com/#Environments) I can access the variables from environment file with the paths ../config/environment or your-application-name/config/environment.
Now, I need a url from the environment file in a controller and I have the following code:
import Ember from "ember";
import BaseController from 'appkit/controllers/base-controller';
import config from '../config/environment';
var NavigationController = BaseController.extend({
homeUrl: config.URL
});
export default NavigationController;
When checking the browser I have the following error:
Error: Could not find module appkit/controllers/config/environment
I changed the import path from the controller with 'appkit/config/environment' (according with the above link) and I get the same error message. The problem is that the config/environment.js file is not in the appkit/controllers folder but on the same level with the appkit folder.
My question is: what is the path for importing the config/environment from a controller?
According to the guide: https://guides.emberjs.com/v2.0.0/configuring-ember/configuring-your-app/
You can access these environment variables in your application code by importing from your-application-name/config/environment.
The key is that the error notes that it is looking for the config directory in appkit/controllers/ which is one directory too deep. Due to how your NavigationController is presumably nested, you'll need an import statement like this:
import config from '../../config/environment';
Since I cannot find a solution to use variables from the configuration file, I moved the configuration variables in a json object in the index.html file that is generated from my .NET application and I solved the problem.
Related
In a new ember 3.28 addon project:
npm install chart.js --save
ember g component-class chart
Insert <Chart /> into application.hbs on dummy app and in addons/component/chart.js, add this
import Chart from 'chart.js/auto';
Running app gives:
Uncaught Error: Could not find module `chart.js/auto` imported from `chartjs-test/components/chart`
Yet if the import Chart goes into the application.js route in the dummy app instead, it works. How can you import this module correctly from within an addon component?
Update: Same issue with other installed packages eg. import chroma from "chroma";
Turns out you need to add the same import statement into app/component/chart.js:
UPDATE:
The above isn't the proper way and causes issues when using the addon elsewhere. The real solution is to move ember-auto-import to dependencies from devDependencies in package.json of the addon
I am creating a package that itself uses Django and I will be using it within other Django applications. The main issue I am facing is that I need to use to settings for various reasons such as logging and other extensive requirements. Since, this package does not have any views/urls, we are writing tests and using pytest to run them. The tests will not run without the settings configured. So initially I put the following snippet in the __init__ file in the root app.
import os
import django
os.environ.setdefault("DJANGO_SETTINGS_MODULE", "my_package.settings")
django.setup()
Now, the test ran properly and the package as standalone app was working. But the moment I installed it in the main project, it overrides the enviroment variable with it's own settings and you can imagine the kind of havoc it would ensue.
This is the first time I am packaging a django app. So I am not well-versed with best practices and the docs are a little convoluted. I read the structure and code of various packages that use settings in their package but I am still not able to understand how to ensure the package accesses the intended settings and the project's settings is not affected at the same time.
While going throught the docs, I came accross this alternative to setting DJANGO_SETTINGS_MODULE, like this:
from django.conf import settings
settings.configure(DEBUG=True)
As shown here: https://docs.djangoproject.com/en/2.2/topics/settings/#using-settings-without-setting-django-settings-module
But where exactly am I supposed to add this? To every file where the settings are imported or will it work in the __init__ (Tried this but something isn't right, shows Apps aren't loaded )
I tried this as well where I imported my settings as defaults and called configure using them as defaults and called django.setup() as well but didn't do the trick:
# my_package/__init__.py
from django.conf import settings
from my_package import settings as default
if not settings.configured:
settings.configure(default_settings=default, DEBUG=True)
import django
django.setup()
Also, I need settings mainly because I have few parameters that can be overridden in the project that is using the package. When the package is installed, the overridden variables is what I should be able to access in the package during runtime.
If someone can guide on how to tackle this or have a better process of creating packages that need django settings, please do share.
So I ended up finding a way to work without setting the settings module as an environement variable. This enables me to use the specified settings by importing all the overridden settings as well as the default settings from:
Create a apps file for configuring your package as an app.
# my_package/apps.py
from django.apps import AppConfig
class MyPackageConfig(AppConfig):
name = 'my_package'
verbose_name = 'My package'
And, in your package's root. The following snippet in your __init__.py will only set the overridden settings:
# my_package/__init__.py
from django.conf import settings
import django
from my_package import settings as overridden_settings
from django.conf import settings
default_app_config = 'my_package.apps.MyPackageConfig'
if not settings.configured:
# Get the list of attributes the module has
attributes = dir(overridden_settings)
conf = {}
for attribute in attributes:
# If the attribute is upper-cased i.e. a settings variable, then copy it into conf
if attribute.isupper():
conf[attribute] = getattr(overridden_settings, attribute)
# Configure settings using the settings
settings.configure(**conf)
# This is needed since it is a standalone django package
django.setup()
Reference for what django.setup() will do:
https://docs.djangoproject.com/en/2.2/topics/settings/#calling-django-setup-is-required-for-standalone-django-usage
Points to keep in mind:
Since it is in the __init__, this will make sure if you import something from the package, the settings are configured.
As mentioned in the documentation above, you have to make sure that the settings is configured only once and similarly the setup method is called once or it will raise an Exception.
Let me know if this helps or you are able to come up with a better solution to this.
I added the module ember-intl in my app since the ember-i18n is deprecated.
so yarn works well, updates package.json and yarn.lock (i got rid of the package.lock),
but i get this error on the browser's console after a successful ember build:
Error: Could not find module #ember-intl/intl-relativeformat
imported from ember-intl/services/intl
But in my node_modules the folders #ember-intl/intl-relativeformat and ember-intl both exist.
in the yarn.lock i have this line:
"#ember-intl/intl-relativeformat#^2.1.0":
more info:
Ember : 3.5.1
Ember Data : 3.5.0
jQuery : 3.3.1
Ember Remodal : 2.18.0
I solved this problem by adding ember-auto-import to my project. It comes pre-installed in new Ember projects, but needs to be added manually to older ones.
Just run ember install ember-auto-import and that's it.
I just installed it to see if a blank slate would show me that error.
It did not. : /
I just had a few beers... but I just want to make sure you imported the service.
the docs show:
// app/routes/application.js
export default Route.extend({
intl: service(),
beforeModel() {
return this.intl.setLocale(['fr-fr', 'en-us']); /* array optional */
}
});
but like most docs - assume you know the larger ecosystem. It's a tiny possibility that you might not have imported the module above import Service from '#ember/service'; etc.? https://guides.emberjs.com/release/applications/services/
if not that... then track down the mentioned 'ember-intl/services/intl' and see if you can figure out why the '#ember-intl/intl-relativeformat' import isn't jiving. Maybe check the repo and the version - and ask there on GitHub?
Good luck!
I am trying to follow this Spring tutorial on how to use websockets. I am using webpack to bundle my code and babel to convert it from ES6. I am trying to pull in sockjs with a normal import statement.
import SockJS from 'sockjs'
But when webpack runs, I get missing module errors,
ERROR in ./~/stompjs/lib/stomp-node.js
Module not found: Error: Cannot resolve module 'net' in /Users/name/Developer/cubs-stack-4/cubs-webapp/node_modules/stompjs/lib
# ./~/stompjs/lib/stomp-node.js 14:8-22
ERROR in ./~/websocket/package.json
Module parse failed: /Users/name/Developer/cubs-stack-4/cubs-webapp/node_modules/websocket/package.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
| {
| "_args": [
| [
| "websocket#latest",
# ./~/websocket/lib/version.js 1:17-43
mainly because it is expecting to be run on Node.
I have 2 questions.
First, how do I get stompjs into my browser side code using an import/require statement?
Second, how come in the tutorial, they can drop stompjs in the HEAD and it doesn't blow up in the browser, but it does when I run the "same" code through webpack?
It seems that stompjs library referenced in Spring's documentation is no longer developed, but there is fork that is maintained and with instructions on how to add it to your project available here: https://github.com/stomp-js/stomp-websocket
Here are the steps that I used to resolve this issue and to get things working in a React app with websockets on Spring backend:
# Add sockjs and stompjs dependencies
npm install sockjs-client --save
npm install #stomp/stompjs --save
Then import it into your app:
import SockJS from "sockjs-client"
import Stomp from "#stomp/stompjs"
You should now be able to use the frontend code from the Spring's documentation successfully.
installing 'net' dependency solved my issue
npm i sockjs-client --save
npm i stompjs --save
npm i net
and import like this
import * as SockJS from 'sockjs-client';
import * as Stomp from 'stompjs';
You have to import "sockjs-client": "^1.0.3" in your package.json.
Then you can import it with
import SockJS from 'sockjs-client'
My webpack.config.js contains the library 'sockjs-client'.
Additionally I added the following conf, in order to ignore missing net module.
node: {
net: 'empty',
tls: 'empty',
dns: 'empty'
}
Source: https://github.com/hapijs/joi/issues/665#issuecomment-113713020
In ionic 6 Angular 12
Install
npm i --save sockjs-client stompjs net
Then
npm i --save-dev #types/sockjs-client #types.stompjs
Import using
import * as SockJS from 'sockjs-client';
import * as Stomp from 'stompjs';
To solve the issue with 'global' I had to add the following to index.html
<script type="application/javascript"> var global = window; </script>
To use stompjs in browser, just open file your_path/node_modules/stompjs/index.js, comment it like this:
var Stomp = require('./lib/stomp.js');
// var StompNode = require('./lib/stomp-node.js');
module.exports = Stomp.Stomp;
// module.exports.overTCP = StompNode.overTCP;
// module.exports.overWS = StompNode.overWS;
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';
}