Codeigniter and React.JS setup Codeigniter and React.JS setup codeigniter codeigniter

Codeigniter and React.JS setup


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.jsongulpfile.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-devnpm install gulp-plumber --save-devnpm install gulp-connect --save-devnpm install gulp-uglify --save-devnpm install gulp-concat --save-devnpm install gulp-react --save-devnpm install gulp-sass --save-devnpm 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