Wednesday, 8 February, 2017 UTC
Summary
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 in watching mode to hot reload React.js
Below presented skeleton/project You can find on my GitHub repository: https://github.com/maxprog/totaljs-react-webpack-hot-reload
Structure of directories is following:
- Expanded structure directories of total.js:
- Expanded structure directories of React.js:
The most important:
In case of catalogs structure:
- /client – React.js directory
- Remaining directories – Total.js
In case of configuration Total.js:
- You have to define React.js directory in config file.
- You have to block total.js process of compiling script – for this process will be responsible Webpack and React.js
- If You want use /public to storage css, img or another files then You have change “directory-public” to correct directory e.g. /public/
To consolidate Webpack with Total.js You have to in /definitions create webpack.js file responsible for integration Total.js with Webpack
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:
- Install the total.js, webpack, babel modules in project directory
npm install - Install the dependencies for React.js in /client
npm install - Start the server from the root directory of project
npm start - You should see information that webpack and total.js was started
- Visit http://localhost:8000
- That’s all – Now You can create Amazing and Professional SPA applications