Yeoman - multiple applications, common dependencies

I am new to using Yeoman and I am working on a project that will have at least two applications - one for the front-end of the website, the other for the admin panel. It's in Backbone, but this part I guess doesn't matter. It's clear to me how to set up one app using Yoman. But how do you set up the two when both applications use the same dependencies (i.e. Backbone, underscore, etc.). I can't seem to find an answer to this question.

+3


source to share


1 answer


You can create two application folders - app1 and app2. The dependencies node_modules and bower_components will be at the root level. Structure below:

YourApp
  - node_modules
  - bower_components
  - app1
  - app2
  - bower.json
  - package.json
  - GruntFile.js

      

When you run the grunt task to build your application. He is mainly looking for a key appPath

in bower.json

. You can set this key value to the name of the folder you want to create. Another way would be to make some changes GruntFile.js

to have separate grunt tasks to create different application folders. See below code:

  // Configurable paths for the application
  var appConfig = {
    app: require('./bower.json').appPath || 'app',
    app1: 'app1',  // Added new App1 here.. Similarly you can add multiple keys here.
    dist: 'dist'
  };   

      

Added a new subtask livereload1 that will track changes in the app1 directory



  livereload1: {
        options: {
          open: true,
          middleware: function (connect) {
            return [
              connect.static('.tmp'),
              connect().use(
                '/bower_components',
                connect.static('./bower_components')
              ),
              connect().use(
                '/app/styles',
                connect.static('./app/styles')
              ),
              connect.static(appConfig.app1) // your new appConfig path
            ];
          }
        }
      }

      

Register a new task app1

to create a app1

folder

 grunt.registerTask('app1', 'Compile then start a connect web server', function (target) {
        grunt.task.run([
          'clean:server',
          'wiredep',
          'concurrent:server',
          'autoprefixer:server',
          'connect:livereload1',
          'watch'
        ]);
      });

      

In a similar way, you can create new tasks for Test or Dist, etc.

+2


source







All Articles