Codeigniter and React.JS setup

Question

Im planning to have Codeigniter and ReactJS for my new project,

I need to know how to setup the project folders and the build process for the .jsx files to be .js

and then all the .js files to be concatenated and minified to be min.js

I'm thinking of using GruntJS

Answer 1

Try Gulp instead

I might suggest you use gulp instead, it's much more beginner friendly IMO.

If I was setting up such a project I might start with a folder structure like this, and install my node_modules. I quite like to use (sass,jade-php,livereload) but these are optional.

Folder structure

package.json
gulpfile.js

/application
  | views/
  | ...
/public
  | index.php
  | css/
  | js/
/vendor/codeigniter
/node_modules
/src
  | react
      app.jsx
  | sass
      app.scss
      _variables.scss
  | jade
    views/ // this mimic's codeigniter's view folder structure
      layouts/
        index.jade
      welcome
        welcome_message.jade

Requirements

node.js

You will need to install gulp globally first.

npm install gulp -g 

CD into your project folder

cd c:/xampp/htdocs/project

Generate package.json

npm init

Generate gulpfile

touch gulpfile.js

Install Tools

npm install gulp --save-dev
npm install gulp-plumber --save-dev
npm install gulp-connect --save-dev
npm install gulp-uglify --save-dev
npm install gulp-concat --save-dev
npm install gulp-react --save-dev
npm install gulp-sass --save-dev
npm install gulp-jade-php --save-dev

gulpfile.js

var gulp, plumber, connect, views, assets, root; 

gulp = require('gulp');

plumber = require('gulp-plumber');

connect = require('gulp-connect');

views = './application/views';

assets = './public';

root = assets + '/index.php';
/*
 * ---------------------------------------
 * Jade PHP
 * ---------------------------------------
**/
var jade = require('gulp-jade-php');

gulp.task('jade', function(){
    return gulp.src('./src/jade/**/*.jade')
               .pipe(plumber())
               .pipe(jade({pretty: true}))
               .pipe(plumber.stop())
               .pipe(connect.reload())
               .pipe(gulp.dest(views));
});

/*
 * ---------------------------------------
 * React
 * ---------------------------------------
**/
var react = require('gulp-react');
var uglify = require('gulp-uglify');

gulp.task('react', function(){
    return gulp.src('./src/react/**/*.jsx')
               .pipe(plumber())
               .pipe(react())
               .pipe(uglify())
               .pipe(plumber.stop())
               .pipe(connect.reload())
               .pipe(gulp.dest(assets + '/js'));
});

/*
 * ---------------------------------------
 * Sass
 * ---------------------------------------
**/
var sass = require('gulp-sass');

gulp.task('sass', function(){
    return gulp.src('./src/sass/app.scss')
               .pipe(plumber())
               .pipe(sass({outputStyle:'compressed'}))
               .pipe(plumber.stop())
               .pipe(connect.reload())
               .pipe(gulp.dest(assets + '/css'));
});

/*
 * ---------------------------------------
 * Watch
 * ---------------------------------------
**/
gulp.task('watch', function(){
    gulp.watch('./src/jade/**/*.jade', ['jade']);
    gulp.watch('./src/react/**/*.jsx', ['react']);
    gulp.watch('./src/sass/**/*.scss', ['sass']);
});

/*
 * ---------------------------------------
 * Connect(livereload)
 * ---------------------------------------
**/
gulp.task('connect', function(){
    connect.server({
        root: [root],
        port: 9000,
        livereload: true
    });
});

/*
 * ---------------------------------------
 * Default Task
 * runs the array of tasks we provide it
 * ---------------------------------------
**/
gulp.task('default', ['jade', 'react', 'sass', 'watch', 'connect']);

To initialize just run gulp and it will call it's default task

gulp