Route only in DEV mode?

Questions Routing
1

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

2

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) :confused:.

3

I think i can use ember-cli-funnel to remove route and template code :grinning:

4

How are you filtering out the route using that package?

5

Yes I would be curious to know how you’re using that package to filter things as well…

6

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 :confused: :

// 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) :frowning: …

7

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.