Sails: There is no native solution to load assets from node_modules besides editing Grunt tasks

Created on 16 Apr 2017  路  9Comments  路  Source: balderdashy/sails

Sails version: 0.12.13
Node version: 6.10.0
NPM version: 3.10.10
Operating system: Linux Ubuntu 16.04 64 bits



Stop me if I'm wrong.

I've been trying to figure it out a way of loading npm modules into assets, but it seems SailsJS does not have a pattern for this yet. There are no mentions in the documentation related to this "issue".

I know that theres a v1.0 coming in the near future, but I'm not sure if that will be handled in that version.

I will be happy to contribute to the docs or write an article explaining how to work around this. I'm sure the next person will save some time.

Here's an example with Bootstrap and jQuery:

// tasks/config/copy.js
module.exports = function(grunt) {

  grunt.config.set('copy', {
    dev: {
      files: [
        {
          expand: true,
          cwd: './assets',
          src: ['**/*.!(coffee|less)'],
          dest: '.tmp/public'
        },
        {
          expand: true,
          cwd: './node_modules',
          src: ['bootstrap/dist/css/bootstrap.css'],
          dest: '.tmp/public/styles'
        },
        {
          expand: true,
          cwd: './node_modules',
          src: ['tether/dist/css/tether.css'],
          dest: '.tmp/public/styles'
        },
        {
          expand: true,
          cwd: './node_modules',
          src: ['bootstrap/dist/js/bootstrap.js'],
          dest: '.tmp/public/js'
        },
        {
          expand: true,
          cwd: './node_modules',
          src: ['tether/dist/js/tether.js'],
          dest: '.tmp/public/js'
        },
        {
          expand: true,
          cwd: './node_modules',
          src: ['jquery/dist/jquery.js'],
          dest: '.tmp/public/js'
        }
      ]
    },
    build: {
      files: [{
        expand: true,
        cwd: '.tmp/public',
        src: ['**/*'],
        dest: 'www'
      }]
    }
  });

  grunt.loadNpmTasks('grunt-contrib-copy');
};

And changing the load order of the pipeline

// tasks/pipeline.js
var jsFilesToInject = [

  // Load sails.io before everything else
  'js/dependencies/sails.io.js',

  // Dependencies like jQuery, or Angular are brought in here
  'js/dependencies/**/*.js',

  // All of the rest of your client-side js files
  // will be injected here in no particular order.
  'js/jquery/dist/jquery.js',
  'js/tether/dist/js/tether.js',
  'js/bootstrap/dist/js/bootstrap.js'
];

Let me know if there's a less manual way of doing this.

Thanks.

proposal waiting to close

Most helpful comment

@rafaelfragosom Thanks for bringing this up! What you've got there looks like a good a plan as any. 馃憤

btw more generally: There have been a lot of layers added to the bundling required by popular frontend frameworks recently. This is something the core team has been experimenting a lot with, because we want to make it as easy as possible to do this stuff, but at the same time, we don't want to force the complexity on folks who don't need it/want it/care about it. Here are some examples we set up in the past few weeks:

Sails + Angular 2

https://github.com/sailshq/sails-angular2-seed (cc @particlebanana)

Sails + Webpack

https://github.com/sailshq/sails-webpack-seed (cc @sgress454)

Sails + Gulp

https://github.com/sailshq/sails-gulp-seed (cc @sgress454)

Sails + React + Webpack

https://github.com/irlnathan/sails-webpack-react (cc @irlnathan)

Sails + Vue.js

https://github.com/mikermcneil/chatkin (cc @rachaelshaw)

All 9 comments

Hi @rafaelfragosom! It looks like you missed a step or two when you created your issue. Please edit your comment (use the pencil icon at the top-right corner of the comment box) and fix the following:

  • Verify "I am experiencing a concrete technical issue (aka a bug) with Sails (ideas and feature proposals should follow the guide for proposing features and enhancements (http://bit.ly/sails-feature-guide), which involves making a pull request). If you're not 100% certain whether it's a bug or not, that's okay--you may continue. The worst that can happen is that the issue will be closed and we'll point you in the right direction."
  • Verify "I am not asking a question about how to use Sails or about whether or not Sails has a certain feature (please refer to the documentation(http://sailsjs.com), or post on http://stackoverflow.com, our Google Group (http://bit.ly/sails-google-group) or our live chat (https://gitter.im/balderdashy/sails)."
  • Verify "I have already searched for related issues, and found none open (if you found a related _closed_ issue, please link to it in your post)."
  • Verify "My issue title is concise, on-topic and polite ("jst.js being removed from layout.ejs on lift" is good; "templates dont work" or "why is sails dumb" are not so good)."
  • Verify "I have tried all the following (if relevant) and my issue remains:"
  • Verify "I can provide steps to reproduce this issue that others can follow."

As soon as those items are rectified, post a new comment (e.g. “Ok, fixed!”) below and we'll take a look. Thanks!

*If you feel this message is in error, or you want to debate the merits of my existence (sniffle), please contact [email protected]

Ok, fixed!

@rafaelfragosom Thanks for posting, we'll take a look as soon as possible.


For help with questions about Sails, click here. If you’re interested in hiring @sailsbot and her minions in Austin, click here.

@rafaelfragosom Thanks for bringing this up! What you've got there looks like a good a plan as any. 馃憤

btw more generally: There have been a lot of layers added to the bundling required by popular frontend frameworks recently. This is something the core team has been experimenting a lot with, because we want to make it as easy as possible to do this stuff, but at the same time, we don't want to force the complexity on folks who don't need it/want it/care about it. Here are some examples we set up in the past few weeks:

Sails + Angular 2

https://github.com/sailshq/sails-angular2-seed (cc @particlebanana)

Sails + Webpack

https://github.com/sailshq/sails-webpack-seed (cc @sgress454)

Sails + Gulp

https://github.com/sailshq/sails-gulp-seed (cc @sgress454)

Sails + React + Webpack

https://github.com/irlnathan/sails-webpack-react (cc @irlnathan)

Sails + Vue.js

https://github.com/mikermcneil/chatkin (cc @rachaelshaw)

(P.S. @everyone if you have thoughts on how you'd like to see this end up, please chime in!)

That is awesome, I'll take a look. Thanks for clearing this up.

But to be clear, I was looking for an out of the box solution and I know lots of people use Sails for APIs but I often choose Sails for quick scaffolding and server-side rendering. Maybe we should have a doc for such case?

I would love to have some thoughts from the core members on how to approach this.

@mikermcneil it would be great to mention the seeds in the README.md, may be a "Seeds" section? What do you think?

+1

@rafaelfragosom,@sailsbot,@mikermcneil,@luislobo: Hello, I'm a repo bot-- nice to meet you!

It has been 30 days since there have been any updates or new comments on this page. If this issue has been resolved, feel free to disregard the rest of this message and simply close the issue if possible. On the other hand, if you are still waiting on a patch, please post a comment to keep the thread alive (with any new information you can provide).

If no further activity occurs on this thread within the next 3 days, the issue will automatically be closed.

Thanks so much for your help!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

svmn picture svmn  路  4Comments

radoslavpetranov picture radoslavpetranov  路  4Comments

Sytten picture Sytten  路  4Comments

Alirezamohammadi picture Alirezamohammadi  路  4Comments

Salakar picture Salakar  路  4Comments