I'm trying to change the roolURL in an Ember CLI app. This is easy in a basic Ember app:
App.Router.reopen({
rootURL: '/blog/'
});
Doing this in an Ember CLI app throws the following exception:
Uncaught TypeError: Cannot read property 'reopen' of undefined
The reason why I'd like to do this is that I'm going to have multiple Ember CLI apps inside of a rails app. The URLs will look something like this:
/ --> rails
/foo --> rails
/api --> rails
/admin --> Ember CLI
/blog --> Ember CLI
You'd want to update your config/environment.js as follows:
module.exports = function(environment) {
var ENV = {
environment: environment,
baseURL: '/blog/'
see http://www.ember-cli.com/#deployments for environment specific configurations.
Related
I'm creating a unit test for a Vue component (inside a Nuxt app) like this:
<template>
<BaseHeader>
...
<LazyHydrate when-visible>
<LazyNewsletter />
</LazyHydrate>
</BaseHeader>
</template>
<script>
import BaseHeader from '#acme/components/BaseHeader/BaseHeader.vue'
import Newsletter from '#/components/Newsletter/Newsletter.vue'
export default {
name: 'TheHeader',
components: {
BaseHeader,
Newsletter
},
}
</script>
but I'm getting this warning in the console when running the test:
console.error
[Vue warn]: Unknown custom element: <LazyHydrate> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
LazyHydrate is a component from the package vue-lazy-hydration and it's already configured in the nuxt app.
Does anyone know what's happening here?
T.I.A.
I tried to use mount instead of shallowMount, but I get the same error.
I need to use them in my ember-cli project.
How to start?
I writed in terminal:
bower install isotope --save
then in my ember-cli-build.js I added app.import ecc..., but then I don't know what to do.
Where to put my intialization script, like this:
$('.grid').isotope({
// options
itemSelector: '.grid-item',
layoutMode: 'fitRows'
});
If I put it in application.hbs it give to me an error and when i change route with {{#link-to}} it doesn't work anymore.
What to do?
In the web there aren't many resources about this.
You should create a component:
ember g component isotope-grid
Then, in component's didInsertElement hook you should call isotope on component's jQuery element:
import Ember from 'ember';
export default Ember.Component.extend({
classNames: ['grid'],
didInsertElement() {
this.$().isotope({
// options
itemSelector: '.grid-item',
layoutMode: 'fitRows'
});
}
})
Then, instead of using <div class="grid"></div>, use:
{{#isotope-grid}}
... HTML goes here
{{/isotope-grid}}
I am developing an application with Flask Backend with ReactJS front.
ReactJS app has been developed and bundled with webpack.
Everything works fine with client side rendering which is bundled with webpack.
I am now trying to add server side rendering with python-react .
But problem is, I have to share some variables to my ReactJS app via Jinja2 template in base template index.html which has the reactjs root component node <div id='react-node'></div>.
I had to send my routes and config to my application via jinja2 template like below ,
//index.html
<!doctype html>
<html>
...
...
<script type='text/javascript'>
var STATIC_IMAGE_ROOT = "{{ url_for('static', filename='img/') }}";
var ROUTES = { ... };
...
</script>
</html>
All the above js variables are being set to global window object .
But when I am trying to render the component in python, it throws exception for window object ReactRenderingError: react: ReferenceError: window is not defined .
What is the best way to solve this issue ?
There is no window global when rendering on the server. You can create a fake window, first checking if the window exists:
if (typeof(window) == 'undefined'){
global.window = new Object();
}
Alternatively, you can use jsdom, or a similar library to create a fake DOM.
Just add the following to webpack config:
// By default, Webpack is set up to target the browser,
// not a Node environment. Try setting target in your config:
target: 'node',
I am trying to display a view using ember, emblem, and ember-cli. Seems like this is a no brainer and while I'm new to Ember I cannot seem to get this working:
DEBUG: -------------------------------
DEBUG: Ember : 1.8.1
DEBUG: Ember Data : 1.0.0-beta.12
DEBUG: Handlebars : 1.3.0
DEBUG: jQuery : 1.11.1
DEBUG: -------------------------------
Ember View:
`import Ember from 'ember'`
CalloutView = Ember.View.extend(
templateName: 'callout'
)
`export default CalloutView`
Emblem Template:
h1 Test Content
Emblem Index Template:
CalloutView
Error from Console:
I'm using the Ember generator to create this view...I must be missing something.
The Emblem documentation hasn’t been updated for Ember 1.8, though there’s a pull request documenting this. Including a view has changed. Try this, assuming your view lives at app/views/callout.coffeescript:
=view 'callout'
I tried it in an ember-cli application and it worked.
I am trying to verify that the session object is available in my ember app. I've used ember-cli to generate the app and I've followed the ember-auth installation instructions. The instructions say "add the Ember CLI Addon to your project and Ember Simple Auth will setup itself".
npm install --save-dev ember-cli-simple-auth
Unfortunately when I am in my controller there is no session object.
I have also tried loading the initalizer in my app.js but I have yet to figure out how to access App.session from my controller. I think ember-cli has namespaced things differently.
//app.js
import Ember from 'ember';
import Resolver from 'ember/resolver';
import loadInitializers from 'ember/load-initializers';
Ember.MODEL_FACTORY_INJECTIONS = true;
var App = Ember.Application.extend({
modulePrefix: 'ember-test', // TODO: loaded via config
Resolver: Resolver
});
loadInitializers(App, 'ember-test');
loadInitializers(App, 'simple-auth');
export default App;
//about.js
import Ember from 'ember';
export default Ember.Controller.extend({
derp: 'derpvalue',
actions: {
test : function(){
console.log("In test");
console.log(session);
console.log(App.session);
debugger;
}
}
});
Here are recent ember-cli-simple-auth setup instructions from the author
You shouldn't have to manually set up an initializer. And I can verify that the author's instructions should give you this.session in your controller.
Copying the author's instructions:
Installing Ember Simple Auth in an ember-cli project is really easy now. All you have to do is install the ember-cli addon from npm:
npm install --save-dev ember-cli-simple-auth
This will install Ember Simple Auth’s AMD distribution into the project, register the initializer so Ember Simple Auth automatically sets itself up and add itself as a dependency to the project’s package.json.
You can add a login route and login/logout links to verify it all actually works:
// app/router.js
…
Router.map(function() {
this.route('login');
});
…
// app/templates/application.hbs
…
{{#if session.isAuthenticated}}
<a {{ action 'invalidateSession' }}>Logout</a>
{{else}}
{{#link-to 'login'}}Login{{/link-to}}
{{/if}}
…
Also implement the ApplicationRouteMixin in the project’s application route:
// app/routes/application.js
import Ember from 'ember';
import ApplicationRouteMixin from 'simple-auth/mixins/application-route-mixin';
export default Ember.Route.extend(ApplicationRouteMixin);
Setting up authentication
To actually give the user the option to login, we need to add an authentication package for Ember Simple Auth. Let’s assume you have an OAuth 2.0 compatible server running at http://localhost:3000. To use that, install the OAuth 2.0 extension library which again is as easy as installing the package from npm:
npm install --save-dev ember-cli-simple-auth-oauth2
Like the ember-cli-simple-auth package this will setup itself so that nothing else has to be done in order to use the OAuth 2.0 functionality.
The OAuth 2.0 authentication mechanism needs a login form, so let’s create that:
// app/templates/login.hbs
<form {{action 'authenticate' on='submit'}}>
<label for="identification">Login</label>
{{input id='identification' placeholder='Enter Login' value=identification}}
<label for="password">Password</label>
{{input id='password' placeholder='Enter Password' type='password' value=password}}
<button type="submit">Login</button>
</form>
Then implement the LoginControllerMixin in the login controller and make that use the OAuth 2.0 authenticator to perform the actual authentication:
// app/controllers/login.js
import Ember from 'ember';
import LoginControllerMixin from 'simple-auth/mixins/login-controller-mixin';
export default Ember.Controller.extend(LoginControllerMixin, {
authenticator: 'simple-auth-authenticator:oauth2-password-grant'
});
As the OAuth 2.0 authenticator would by default use the same domain and port to send the authentication requests to that the Ember.js is loaded from you need to configure it to use http://localhost:3000 instead:
// config/environment.js
if (environment === 'development') {
…
ENV['simple-auth-oauth2'] = {
serverTokenEndpoint: 'http://localhost:3000/token'
}
…
As ember-cli adds all configuration to the global ENV variable (e.g. in this case MyAuthAppENV) which Ember Simple Auth cannot use as it doesn’t know it’s name, you need to copy that to window.ENV so Ember Simple Auth can use it:
// app/initializers/simple-auth-config.js
export default {
name: 'simple-auth-config',
before: 'simple-auth',
initialize: function() {
window.ENV = MyAuthAppENV;
}
};
Ember Simple Auth is awesome!