Independent Software Developer

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: https://github.com/maxprog/totaljs-react-webpack

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