Loopback AngularJS JavaScript SDK - Gruntfile plugin

Question

I'm following literally the official loopback documentation for AngularJS Grunt plugin and I'm facing a problem during the creation of the task under the Grunt file.

The documentation is well done and In the How to use the plugin section it provides an very good example of implementation but it's not clear the meaning of staging and production sections.

I'm also interested to provide a different urlBase for the APIs cause my AngularJS application is served from a different address, so I added the apiUrl option, but when I start loopback_sdk_angular task from the Grunt file all goes well but it seems not considering my apiUrl option within staging or production sections (Tried both, nothing changed) building a api.service.js with var urlBase = '/api' instead of var urlBase = 'http://127.0.0.1:3000/api'.

My grunt file:

grunt.loadNpmTasks('grunt-loopback-sdk-angular');

...
//grunt init config
...

loopback_sdk_angular: {
      services: {
        options: {
          input: 'server/server.js', output: 'client/services/api.services.js'
        }, staging: {
          options: {
            apiUrl: 'http://127.0.0.1:3000/api'
          }
        }
//, production: {
//          options: {
//            apiUrl: 'http://127.0.0.1:3000/api'
//          }
//        }
      }
    }


...

grunt.registerTask('generate-services', ['loopback_sdk_angular']);
//end

Could someone please explain me the meaning of that two sections and what I'm missing to make the var urlBase to assume the correct value of http://127.0.0.1:3000/api?

score 0 · Answer 1 · answered May 26 '16 at 12:05

Could someone please explain me the meaning of that two sections and what I'm missing to make the var urlBase to assume the correct value of http://127.0.0.1:3000/api?

I got the same problem when I configured the loopback_sdk_angular plugin the way you did. However, the problem was resolved when the options and staging properties were directly under loopback_sdk_angular property instead of being within a services property.

loopback_sdk_angular: {
    options: {
      input: 'server/server.js', output: 'client/services/api.services.js'
    }, staging: {
      options: {
        apiUrl: 'http://127.0.0.1:3000/api'
      }
    }

There may be a minor glitch in the loopback AngularJS Grunt plugin documentation. If you notice, the description for the loopback plugin follows the format that I used and that works fine. Whereas the format in the example doesn't work for both of us.

score 0 · Answer 2 · answered Jan 20 '17 at 11:06

You are trying to add global options to loopback_sdk_angular grunt task but you did it in a wrong way.loopback_sdk_angular can have options defined in two ways

Where you pass a global options configuration for all other tasks and every sub-tasks or section will have this options inherited in them

Useful when you have a common input and output folder for each environment.

    // You were trying to achieve this.....
    loopback_sdk_angular: {
      options: {
        input: 'server/server.js', 
        output: 'client/services/api.services.js'
      }, 
      staging: { 
        //input and ouput are inherited from above global options
        options: {
        apiUrl: 'http://staging.url/api'
      },
      production: { 
        //input and output are inherited from above global options
        options: {
          apiUrl: 'http://production.url/api'
        }
    }

Where you have environment-specific options defined for each sub-tasks

Useful when you have different input and output folder for environments.

    // But you actually did this 
    loopback_sdk_angular: {
      staging: { 
        options: {
          input: 'server/server.js', 
          // Different output folder for staging
          output: 'client/staging/services/api.services.js'
          apiUrl: 'http://staging.url/api'
        }
      },
      production: { 
        options: {
          apiUrl: 'http://production.url/api',
          input: 'server/server.js', 
          // Different output folder for production
          output: 'client/production/services/api.services.js'
        }
    }

Loopback AngularJS JavaScript SDK - Gruntfile plugin

2 Answers2