score:3
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
Source: stackoverflow.com
Related Query
- How to setup Ember like computed properties in Immutablejs and Redux and Flux and React
- Setup react-styleguidist, Create React App, Typescript, Material UI and styled-components
- google app engine with React and Node: Production setup
- Codeigniter and React.JS setup
- How to setup sublime 3 with react native so that when you click on the error and it jump to your code?
- Minimum nodejs server setup needed for React using react-router and browserHistory
- react create app, typescript unit test with mocha and chai what is the correct setup to support es6 modules?
- Trouble getting CORS to work between CodeIgniter and React app
- React Isomorphic setup and Node ES6 syntax issue
- React PWA : How to properly setup the manifest file and register service worker
- Setup Context API in react app (TypeScript) and pass the auth state to all components
- How to setup react routing for detail and create page?
- Issue with setup and run Electron + React + Typescript + Webpack application
- Setup react route to use URL parameters and props' function
- Having lots of trouble with React and Redux setup and props
- How to setup jest and puppeteer to work with a react app?
- Setup vite --template react and eslint (airbnb)
- How to setup a private route with react hooks and redux?
- How to pass Props and setup a CART of selected item in REACT
- Setup nginx with react and express
- laravel and react pusher setup
- What is the difference between React Native and React?
- What's the difference between "super()" and "super(props)" in React when using es6 classes?
- TypeScript and React - children type?
- How to compare oldValues and newValues on React Hooks useEffect?
- React : difference between <Route exact path="/" /> and <Route path="/" />
- Concatenating variables and strings in React
- What are React controlled components and uncontrolled components?
- React functional stateless component, PureComponent, Component; what are the differences and when should we use what?
- React hooks - right way to clear timeouts and intervals
More Query from same tag
- Yup doesn't work properly with i18n
- Babel Preset does not provide support on IE11 for Object.assign - "Object doesn't support property or method 'assign'"
- How to list items from object array by category and only render components based on which category was last iterated
- Close dropdown menu on scroll
- react-datetime-range-picker how to change the inner style set from the library
- Property 'element' does not exist on type 'JSX.IntrinsicElements'
- How to add floating button in react native?
- Change fetch to async syntax
- React - Make search and filter work on a given data at same time irrespective of the order of change
- How to reuse AEM SPA components from one project in another?
- How to make several buttons simultaneously active but with some conditions?
- Display/hide a textfield based on dropdown value using React
- What could cause html select element not to render on the browser?
- Global variable for react
- How to implement geolocation in a react app with Google Maps JS API instead of hard-coded location?
- How to render jsx/html that is inside variable (or prop)?
- How to display list of items in a table in JavaScript?
- What's the Difference between Remark & Rehype, and why would I want to use one over the other?
- Event handling on reactjs
- How to add a key to the table
- Cannot mount dispatch to props with connect()
- How to add authentication using JWT on a React app?
- Implementing promise in react
- How to trigger componentdidmount on click react
- When rendering an array of components, when a button is clicked always the latest element of the array is picked up
- state field undefined upon using local storage to persist state
- Renaming properties from custom react-query hook
- TextArea Auto resize
- React-Redux: Forms in component or container?
- How Can I truncate overflowed text using ellipsis in description rows from Product List?