Total.js + React + Webpack

How consolidate React, Total.js and Webpack modules in watching mode and hot reloading?

Assumptions and Benefits our project:

  • Design and build modular applications based on components
  • Use Total.js, React, Babel and Webpack

Below presented skeleton/project You can find on my GitHub repository:

Structure of directories is following:

  1. Expanded structure directories of total.js:
  2. Expanded structure directories of React.js:

The most important:

In case of catalogs structure:

  1. /client – React.js directory
  2. Remaining directories – Total.js

In case of configuration Total.js:

  1. You have to define React.js directory in config file.
  2. You have to block  total.js process  of compiling script – for this process will be responsible Webpack and React.js
  3. If You want use /public to storage css, img or another files then You have change “directory-public” to correct directory e.g. /public/

Last very important file is webpack config called as webpack.config.js responsible for create bundle from all files located in server / directory

The last operation it is installation process all necessary modules:

  1. Install the total.js, webpack, babel modules  in project directory
    npm install 
  2. Install the dependencies for React.js  in /client
    npm install
  3. Start the server from the root directory of project
    npm start
  4. You should see information that webpack and total.js was started

  1. Visit http://localhost:8000
  2. That’s all – Now You can create Amazing and Professional SPA applications

February 8th, 2017

  • A lot of thanks for every one of your hard work on this web page. Kim enjoys carrying out research and it’s really easy to understand why. A number of us notice all of the compelling manner you make practical tips by means of your blog and as well recommend response from other ones on the topic and our own daughter is without question understanding a lot. Enjoy the remaining portion of the new year. Your doing a dazzling job..

  • An interesting discussion is value comment. I feel that you must write extra on this topic, it may not be a taboo subject but usually individuals are not enough to talk on such topics. To the next. Cheers.

  • After study a few of the blog posts in your website now, and I truly like your way of blogging. I bookmarked it to my bookmark website list and will be checking back soon. Pls take a look at my website as properly and let me know what you think..