Anton Kulakov Anton Kulakov - 22 days ago 7
React JSX Question

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?

Answer

I found the right solution.

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