How to use React with grunt and webpack?
This article explains details about how to use React with grunt and webpack.
Step 1 : Create react project by using below command
npx create-react-app my-react-app
Step 2: Install the Syncfusion react packages for to render the Syncfusion components
All Syncfusion React (Essential JS 2) packages are published in npmjs.com public registry. You can choose the component that you want to install. For this application, we are going to use button component.
To install button component, use the following command
npm install @syncfusion/ej2-react-button --save
Step 3: Install the dependent packages
Install Webpack and Babel
Now we’re going to enable ES6 and Babel support.
Install webpack using below command
npm install webpack --save-dev
Next we install Babel
npm install --save-dev babel-loader babel-core
We need Webpack and Grunt to compile the React, so we install a couple more modules.
npm install --save-dev babel-cli babel-preset-react npm install webpack-cli –save-dev npm install webpack-dev-server –save-dev npm install html-webpack-plugin --save-dev npm install clean-webpack-plugin –save-dev npm install webpack-merge –save-dev
Integrate React, Webpack, and all its dependencies into your Grunt task. So now we install the Grunt module that’ll take our React JSX and ES6 code and turn it into something browsers understand.
npm install grunt --save npm install grunt-webpack --save-dev
Now the package.json file looks like below.
{
"name": "react-grunt",
"version": "1.0.0",
"description": "",
"main": "index.js",
"directories": {
"test": "test"
},
"scripts": {
"build": "webpack --config webpack.prod.js",
"start": "webpack-dev-server --config webpack.dev.js",
"test": "jest ./test"
},
"jest": {
"setupTestFrameworkScriptFile": "./test/enzyme.setup.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/cli": "^7.1.0",
"@babel/core": "^7.1.0",
"@babel/preset-env": "^7.1.0",
"@babel/preset-react": "^7.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^23.6.0",
"babel-loader": "^8.0.2",
"clean-webpack-plugin": "^2.0.1",
"webpack": "^4.28.4",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.8",
"webpack-merge": "^4.1.4",
"css-loader": "^2.0.0",
"enzyme": "^3.6.0",
"enzyme-adapter-react-16": "^1.5.0",
"html-webpack-plugin": "^3.2.0",
"jest": "^23.6.0",
"node-sass": "^4.9.3",
"react-test-renderer": "^16.6.3",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.0",
},
"dependencies": {
"@syncfusion/ej2-react-buttons": "^17.1.40",
"grunt": "^1.0.4",
"grunt-contrib-connect": "^2.0.0",
"grunt-contrib-watch": "^1.1.0",
"grunt-webpack": "^3.1.3",
"react": "^16.6.3",
"react-dom": "^16.6.3"
}
}
Step 4: Include the Gruntfile.js in root of the application and add the required task here like below.
const webpackDev = require('./webpack.dev.js');
const webpackProd = require('./webpack.prod.js');
const path = require('path');
var webpack = require("webpack");
console.log('Running', process.env.NODE_ENV, 'build');
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
connect: {
server: {
options: {
port: 3030,
base: 'dist/',
}
}
},
webpack: {
myConfig: process.env.NODE_ENV === 'production' ? webpackProd : webpackDev,
},
watch: {
options: {
livereload: true,
},
js: {
files: ['src/**/*.js'],
tasks: ['webpack'],
options: {
interrupt: true,
},
},
}
})
grunt.loadNpmTasks('grunt-webpack');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.registerTask('default', ['webpack', 'connect', 'watch']);
};
Step 5: Include webpack.common.js file to add the webpack bundled script file and store bundled file in dist folder.
const CleanWebpackPlugin = require('clean-webpack-plugin')
const HtmlWebPackPlugin = require('html-webpack-plugin')
const path = require('path')
module.exports = {
entry: {
main: './src/index.js'
},
output: {
filename: '[name].[hash].js',
path: path.resolve('./dist'),
},
module: {
rules: [
{
test: /\.js$/,
exclude: ['/node_modules'],
use: [{ loader: 'babel-loader' }],
},
{
test: /\.s(a|c)ss$/,
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader'
}, {
loader: 'sass-loader'
}],
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: 'index.html'
}),
new CleanWebpackPlugin(),
]
}
Also include the webpack.dev.js and webpack.prod.js files for bundling files in development and production mode from webpack.common.js file.
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'development',
devServer: {
host: 'localhost',
port: 3000,
open: true
}
})
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'production',
})
Step 6: Use the following code snippet to give the EJ2 component in the App.js file.
class App extends Component {
render() {
return (
<ButtonComponent type="primary">Button</ButtonComponent>
)
}
}
Step 7: Add the bundle commands in the scripts section of package.json file.
"scripts": {
"build": "webpack --config webpack.prod.js",
"start": "webpack-dev-server --config webpack.dev.js",
},
Step 7: Refer the following command for bundling.
npm run build
Then the application is bundled in the dist folder like below.
You can find the demo sample in the following link.
Conclusion
I hope you enjoyed learning how to use React with Grunt and Webpack.
You can refer to our React feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React Accordion Example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
