Hello,
Somebody know how to define a route (in the router) only in DEV mode. I would like files (controller, route, template) associated with this route are not compiled in the PROD build too.
Thanks for your help
Hello,
Somebody know how to define a route (in the router) only in DEV mode. I would like files (controller, route, template) associated with this route are not compiled in the PROD build too.
Thanks for your help
I tried to use runInDebug
to add a “debug” route in the router.js
but unfortunately, the code anout the add in the router, the route and its template is still present in the app compiled version (mode prod) .
I think i can use ember-cli-funnel to remove route and template code
How are you filtering out the route using that package?
Yes I would be curious to know how you’re using that package to filter things as well…
I’m filtering ‘debug’ route and template like this :
// ember-cli-build.js
'use strict';
const EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function(defaults) {
let exclude = [];
switch (EmberApp.env()) {
case 'production':
exclude.push(`${defaults.project.pkg.name}/*/debug*`);
break;
}
let app = new EmberApp(defaults, {
funnel: {
enabled: true,
exclude
}
});
return app.toTree();
};
// app/router.js
import EmberRouter from '@ember/routing/router';
import config from './config/environment';
const Router = EmberRouter.extend({
location: config.locationType,
rootURL: config.rootURL
});
Router.map(function() {
if (config.environment === "development") {
this.route('debug');
}
this.route('another');
});
export default Router;
But if i use debug route link in my app, I need to check environment value too :
// app/templates/application.hbs
<h1>Application</h1>
<ul>
{{#if isDev}}
<li>{{#link-to "debug"}}Debug{{/link-to}}</li>
{{/if}}
<li>{{#link-to "another"}}Another{{/link-to}}</li>
</ul>
{{outlet}}
So I always have some traces (if
statments) in my production code (in the router.js
and application.hbs
here) …
At work we are using freestyle and the easiest way we found to have it as a dev only route and filter it from the build is to make an in-repo add-on that gets blacklisted in prod builds.
Thanks to Simplabs and specifically Tobias Bieniek for the idea and most of the implementation below. Re: this blog post Using ember-freestyle as a component playground | Blog | simplabs
The add-on has an instance-initializer lib/freestyle/instance-initializers/freestyle.js
that adds the route and controller.
/* global window */
import Router from '../router';
import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';
const FreestyleRoute = Route.extend({
router: service(),
renderTemplate() {
this.render('freestyle', {
controller: this.controllerFor('freestyle'),
});
},
});
export function initialize(appInstance) {
let router = appInstance.lookup('service:router');
let initialURL = router.currentURL || (window && window.location ? window.location.href : '');
if (initialURL.match('/freestyle')) {
appInstance.register('route:application', FreestyleRoute);
Router.map(function() {
this.route('freestyle');
});
}
}
export default {
name: 'freestyle',
initialize: initialize,
};
then ember-cli-build.js
filters out the add-on
const env = EmberApp.env() || 'development';
const pluginsToBlacklist = env === 'production' ? ['ember-freestyle', 'freestyle'] : [];
Works really well and allows nice separation.