Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Sails.js with React.js, how to do it correctly?

I want to integrate React.js + browserify in my Sails.js-application.

For this I use a grunt-plugin grunt-react.

I created a file /tasks/config/browserify.js

module.exports = function(grunt) {

  grunt.config.set('browserify', {
    //dev: {
      options:      {
        transform:  [ require('grunt-react').browserify ],
        extension: 'jsx'
      },
      app:          {
        src:        'assets/jsx/app.jsx',
        dest:       '.tmp/public/js/app.js'
      }
    //}
  });

  grunt.loadNpmTasks('grunt-browserify');
};

Then I added a line in compileAssets.js and syncAssets.js:

// compileAssets.js

module.exports = function (grunt) {
    grunt.registerTask('compileAssets', [
        'clean:dev',
        'stylus:dev',
        'browserify',   // <<< this added
        'copy:dev'
    ]);
};

and

// syncAssets.js

module.exports = function (grunt) {
    grunt.registerTask('syncAssets', [
        'stylus:dev',
        'browserify',   // <<< this added
        'sync:dev'
    ]);
};

Then i modified a line in copy.js.

// copy.js

module.exports = function(grunt) {

    grunt.config.set('copy', {
        dev: {
            files: [{
                expand: true,
                cwd: './assets',
                src: ['**/*.!(styl|jsx)'],   /// <<< this modified
                dest: '.tmp/public'
            }]
        },
        build: {
            files: [{
                expand: true,
                cwd: '.tmp/public',
                src: ['**/*'],
                dest: 'www'
            }]
        }
    });

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

And it worked!

But I think I did not do it quite right.

If i uncommented line dev: { and } in /tasks/config/browserify.js like this:

module.exports = function(grunt) {

  grunt.config.set('browserify', {
    dev: {                           /// <<< this uncommented
      options:      {
        transform:  [ require('grunt-react').browserify ],
        extension: 'jsx'
      },
      app:          {
        src:        'assets/jsx/app.jsx',
        dest:       '.tmp/public/js/app.js'
      }
    }                           /// <<< this uncommented
  });

  grunt.loadNpmTasks('grunt-browserify');
};

And if I make changes in compileAssets.js and syncAssets.js:

// compileAssets.js

module.exports = function (grunt) {
    grunt.registerTask('compileAssets', [
        'clean:dev',
        'stylus:dev',
        'browserify:dev',   // <<< this added :dev
        'copy:dev'
    ]);
};

and

// syncAssets.js

module.exports = function (grunt) {
    grunt.registerTask('syncAssets', [
        'stylus:dev',
        'browserify:dev',   // <<< this added :dev
        'sync:dev'
    ]);
};

it does not work!

Is it worth worrying about it?

And why is it not working when I add browserify: dev in compileAssets.js and syncAssets.js files?

like image 648
Anton Kulakov Avatar asked Feb 04 '15 20:02

Anton Kulakov


People also ask

How do I run node JS and react JS?

export default App; Now run the Nodejs process npm run dev in one terminal and in another terminal start Reactjs using npm start simultaneously. Output: We see react output we see a button “Connect” we have to click it. Now when we see the console server-side we see that the ReactJS is connected with NodeJS.

How does sails js work?

Sails is built on Node. js, a popular, lightweight server-side technology that allows developers to write blazing fast, scalable network appliations in JavaScript. Sails uses Express for handling HTTP requests, and wraps socket.io for managing WebSockets.

How does JavaScript work with React?

React is a JavaScript library (not a framework) that creates user interfaces (UIs) in a predictable and efficient way using declarative code. You can use it to help build single page applications and mobile apps, or to build complex apps if you utilise it with other libraries.


1 Answers

I found the right solution.

UPD: Now, we can use https://github.com/erikschlegel/sails-generate-reactjs

like image 170
Anton Kulakov Avatar answered Sep 28 '22 01:09

Anton Kulakov