├── .gitignore ├── LICENSE ├── README.md ├── mgr_wppwr_plugin ├── admin │ ├── admin.php │ └── index.php ├── common │ ├── admin_enqueue_assets.php │ ├── enqueue_assets.php │ └── index.php ├── index.php ├── mgr_wppwr_plugin.php └── shortcode │ ├── active-react.php │ └── index.php ├── mgr_wppwr_plugin_local ├── admin │ ├── admin.php │ └── index.php ├── common │ ├── admin_enqueue_assets.php │ ├── enqueue_assets.php │ └── index.php ├── index.php ├── mgr_wppwr_plugin.php └── shortcode │ ├── active-react.php │ └── index.php └── react ├── .babelrc.json ├── .eslintrc.json ├── .gitignore ├── .prettierrc.json ├── LICENSE ├── README.md ├── config ├── paths.js ├── webpack.common.js ├── webpack.dev.js ├── webpack.prod.js └── webpack.wp.prod.js ├── package-lock.json ├── package.json ├── postcss.config.js ├── public └── example.jpg └── src ├── admin-template.html ├── admin.js ├── fonts └── Inter.ttf ├── images ├── favicon.png └── webpack-logo.svg ├── index.js ├── styles ├── _scaffolding.scss ├── _variables.scss └── index.scss └── template.html /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Simone Paolucci 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # wp-plugin-webpack-react-basic 2 | A simple starter kit to develop wp plugin with webpack and react. 3 | 4 | This repository has the goal to make simple develop WP Plugin with React. 5 | You have to develop react in isolate way, then test it in WP running live version of React app and then build react and zip for create and distribute your plugin. 6 | 7 | WP Plugin can activate React in frontend by *shortcode* or insert in *the_content* of posts. 8 | 9 | Also the WP Plugin configuration active React to show data, for example you can import News throw wep api call by React. 10 | 11 | ## How to use 12 | 13 | 1. ### Create a react app 14 | 1. Go to *react* folder 15 | 2. Edit file *index.js* for create frontend app (shortcode or post page) 16 | 3. Edit file *admin.js* for create admin app 17 | 4. use command *npm start* to develop react app outside WP 18 | 5. use command *npm run build* to build react app to show outside WP 19 | 6. use command *npm run startBuilded to exec builded react app outside WP (use *http-server* package) 20 | 7. use command *npm run wpBuild* to build react app in WP folder 21 | 22 | [Read more about *webpack-boilerplate*](react/README.md) 23 | 24 | 2. ### Edit WP Plugin (local version) 25 | (after create react app) 26 | 1. Go to *mgr_wppwr_plugin_local* 27 | 2. edit constant $localServer with the url of react started version (for example: ```http://localhost:8080```) 28 | 3. zip folder *mgr_wppwr_plugin_local* and import (and active) it in your Wordpress (or copy folder in *wp-content/plugin/* Wordpress folder) 29 | 4. start react with *npm start* command 30 | 5. edit file and see the result inside WP. You can see and correct the design before build the react app 31 | 32 | 3. ### Edit WP Plugin 33 | (after create react app) 34 | 1. Go to *mgr_wppwr_plugin* 35 | 2. edit plugin files 36 | 3. zip folder *mgr_wppwr_plugin* and import (and active) it in your Wordpress (or copy folder in *wp-content/plugin/* Wordpress folder) 37 | 38 | ## References, Credits and Inspirations 39 | 40 | - For webpack 5 configuration 41 | [taniarascia/webpack-boilerplate](https://github.com/taniarascia/webpack-boilerplate) 42 | 43 | 44 | -------------------------------------------------------------------------------- /mgr_wppwr_plugin/admin/admin.php: -------------------------------------------------------------------------------- 1 | '; 29 | echo '
'; 30 | echo ''; 31 | } 32 | ); 33 | } 34 | } // End if(). 35 | -------------------------------------------------------------------------------- /mgr_wppwr_plugin/admin/index.php: -------------------------------------------------------------------------------- 1 | ' . $content; 71 | // return $content; 72 | // } ); 73 | 74 | -------------------------------------------------------------------------------- /mgr_wppwr_plugin/shortcode/active-react.php: -------------------------------------------------------------------------------- 1 | '; 26 | } 27 | } // End if(). 28 | -------------------------------------------------------------------------------- /mgr_wppwr_plugin/shortcode/index.php: -------------------------------------------------------------------------------- 1 | '; 29 | echo '
'; 30 | echo ''; 31 | } 32 | ); 33 | } 34 | } // End if(). 35 | -------------------------------------------------------------------------------- /mgr_wppwr_plugin_local/admin/index.php: -------------------------------------------------------------------------------- 1 | ' . $content; 76 | // return $content; 77 | // } ); 78 | 79 | -------------------------------------------------------------------------------- /mgr_wppwr_plugin_local/shortcode/active-react.php: -------------------------------------------------------------------------------- 1 | '; 26 | } 27 | } // End if(). 28 | -------------------------------------------------------------------------------- /mgr_wppwr_plugin_local/shortcode/index.php: -------------------------------------------------------------------------------- 1 | Note: Install [http-server](https://www.npmjs.com/package/http-server) globally to deploy a simple server. 32 | 33 | ```bash 34 | npm i -g http-server 35 | ``` 36 | 37 | You can view the deploy by creating a server in `dist`. 38 | 39 | ```bash 40 | cd dist && http-server 41 | ``` 42 | 43 | ## Features 44 | 45 | - [webpack](https://webpack.js.org/) 46 | - [Babel](https://babeljs.io/) 47 | - [Sass](https://sass-lang.com/) 48 | - [PostCSS](https://postcss.org/) 49 | 50 | ## Dependencies 51 | 52 | ### webpack 53 | 54 | - [`webpack`](https://github.com/webpack/webpack) - Module and asset bundler. 55 | - [`webpack-cli`](https://github.com/webpack/webpack-cli) - Command line interface for webpack 56 | - [`webpack-dev-server`](https://github.com/webpack/webpack-dev-server) - Development server for webpack 57 | - [`webpack-merge`](https://github.com/survivejs/webpack-merge) - Simplify development/production configuration 58 | - [`cross-env`](https://github.com/kentcdodds/cross-env) - Cross platform configuration 59 | 60 | ### Babel 61 | 62 | - [`@babel/core`](https://www.npmjs.com/package/@babel/core) - Transpile ES6+ to backwards compatible JavaScript 63 | - [`@babel/plugin-proposal-class-properties`](https://babeljs.io/docs/en/babel-plugin-proposal-class-properties) - Use properties directly on a class (an example Babel config) 64 | - [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env) - Smart defaults for Babel 65 | 66 | ### Loaders 67 | 68 | - [`babel-loader`](https://webpack.js.org/loaders/babel-loader/) - Transpile files with Babel and webpack 69 | - [`sass-loader`](https://webpack.js.org/loaders/sass-loader/) - Load SCSS and compile to CSS 70 | - [`node-sass`](https://github.com/sass/node-sass) - Node Sass 71 | - [`postcss-loader`](https://webpack.js.org/loaders/postcss-loader/) - Process CSS with PostCSS 72 | - [`postcss-preset-env`](https://www.npmjs.com/package/postcss-preset-env) - Sensible defaults for PostCSS 73 | - [`css-loader`](https://webpack.js.org/loaders/css-loader/) - Resolve CSS imports 74 | - [`style-loader`](https://webpack.js.org/loaders/style-loader/) - Inject CSS into the DOM 75 | 76 | ### Plugins 77 | 78 | - [`clean-webpack-plugin`](https://github.com/johnagan/clean-webpack-plugin) - Remove/clean build folders 79 | - [`copy-webpack-plugin`](https://github.com/webpack-contrib/copy-webpack-plugin) - Copy files to build directory 80 | - [`html-webpack-plugin`](https://github.com/jantimon/html-webpack-plugin) - Generate HTML files from template 81 | - [`mini-css-extract-plugin`](https://github.com/webpack-contrib/mini-css-extract-plugin) - Extract CSS into separate files 82 | - [`css-minimizer-webpack-plugin`](https://webpack.js.org/plugins/css-minimizer-webpack-plugin/) - Optimize and minimize CSS assets 83 | 84 | ### Linters 85 | 86 | - [`eslint`](https://github.com/eslint/eslint) - Enforce styleguide across application 87 | - [`eslint-config-airbnb-base`](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb-base) - Base styleguide to enforce rules 88 | - [`eslint-config-prettier`](https://github.com/prettier/eslint-config-prettier) - Implment prettier rules 89 | - [`eslint-plugin-import`](https://github.com/benmosher/eslint-plugin-import) - Implment import rules 90 | - [`eslint-plugin-prettier`](https://github.com/prettier/eslint-plugin-prettier) - Dependency for prettier usage with ESLint 91 | - [`eslint-import-resolver-webpack`](https://github.com/benmosher/eslint-plugin-import/tree/master/resolvers/webpack) - Throw exceptions for import/export in webpack 92 | - [`eslint-webpack-plugin`](https://github.com/webpack-contrib/eslint-webpack-plugin) - ESLint configuration for webpack 93 | - [`prettier`](https://github.com/prettier/prettier) - Dependency for `prettier-webpack-plugin` plugin 94 | - [`prettier-webpack-plugin`](https://github.com/hawkins/prettier-webpack-plugin) - Prettier configuration for webpack 95 | 96 | ## Author 97 | 98 | - [Tania Rascia](https://www.taniarascia.com) 99 | 100 | ## License 101 | 102 | This project is open source and available under the [MIT License](LICENSE). 103 | -------------------------------------------------------------------------------- /react/config/paths.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | module.exports = { 4 | // Source files 5 | src: path.resolve(__dirname, '../src'), 6 | 7 | // Production build files 8 | build: path.resolve(__dirname, '../../dist'), 9 | 10 | // Static files that get copied to build folder 11 | public: path.resolve(__dirname, '../public'), 12 | 13 | // Static files that get copied to build folder 14 | wp_public: path.resolve(__dirname, './../../mgr_wppwr_plugin/dist'), 15 | } 16 | -------------------------------------------------------------------------------- /react/config/webpack.common.js: -------------------------------------------------------------------------------- 1 | const { CleanWebpackPlugin } = require('clean-webpack-plugin') 2 | const CopyWebpackPlugin = require('copy-webpack-plugin') 3 | const PrettierPlugin = require('prettier-webpack-plugin') 4 | const ESLintPlugin = require('eslint-webpack-plugin') 5 | const paths = require('./paths') 6 | 7 | module.exports = { 8 | // Where webpack looks to start building the bundle 9 | entry: { 10 | index: paths.src + '/index.js', 11 | admin: paths.src + '/admin.js', 12 | }, 13 | 14 | // Where webpack outputs the assets and bundles 15 | output: { 16 | path: paths.build, 17 | filename: '[name].bundle.js', 18 | publicPath: '/', 19 | }, 20 | 21 | // Customize the webpack build process 22 | plugins: [ 23 | // Removes/cleans build folders and unused assets when rebuilding 24 | new CleanWebpackPlugin(), 25 | 26 | // Copies files from target to destination folder 27 | new CopyWebpackPlugin({ 28 | patterns: [ 29 | { 30 | from: paths.public, 31 | to: 'assets', 32 | globOptions: { 33 | ignore: ['*.DS_Store'], 34 | }, 35 | noErrorOnMissing: true, 36 | }, 37 | ], 38 | }), 39 | 40 | // ESLint configuration 41 | new ESLintPlugin({ 42 | files: ['.', 'src', 'config'], 43 | formatter: 'table', 44 | }), 45 | 46 | // Prettier configuration 47 | new PrettierPlugin(), 48 | ], 49 | 50 | // Determine how modules within the project are treated 51 | module: { 52 | rules: [ 53 | // JavaScript: Use Babel to transpile JavaScript files 54 | { 55 | test: /\.(js|jsx)$/, 56 | use: ['babel-loader'] 57 | }, 58 | 59 | // Images: Copy image files to build folder 60 | { test: /\.(?:ico|gif|png|jpg|jpeg)$/i, type: 'asset/resource' }, 61 | 62 | // Fonts and SVGs: Inline files 63 | { test: /\.(woff(2)?|eot|ttf|otf|svg|)$/, type: 'asset/inline' }, 64 | ], 65 | }, 66 | resolve: { 67 | extensions: ['*', '.js', '.jsx'], 68 | }, 69 | } 70 | -------------------------------------------------------------------------------- /react/config/webpack.dev.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack') 2 | const { merge } = require('webpack-merge') 3 | const HtmlWebpackPlugin = require('html-webpack-plugin') 4 | const common = require('./webpack.common.js') 5 | const paths = require('./paths') 6 | 7 | module.exports = merge(common, { 8 | // Set the mode to development or production 9 | mode: 'development', 10 | 11 | // Control how source maps are generated 12 | devtool: 'inline-source-map', 13 | 14 | // Spin up a server for quick development 15 | devServer: { 16 | historyApiFallback: true, 17 | contentBase: paths.build, 18 | open: true, 19 | compress: true, 20 | hot: true, 21 | port: 8080, 22 | }, 23 | 24 | module: { 25 | rules: [ 26 | // Styles: Inject CSS into the head with source maps 27 | { 28 | test: /\.(scss|css)$/, 29 | use: [ 30 | 'style-loader', 31 | { 32 | loader: 'css-loader', options: { 33 | sourceMap: true, importLoaders: 1, modules: true 34 | } 35 | }, 36 | { loader: 'postcss-loader', options: { sourceMap: true } }, 37 | { loader: 'sass-loader', options: { sourceMap: true } }, 38 | ], 39 | }, 40 | ] 41 | }, 42 | 43 | plugins: [ 44 | // Generates an HTML file from a template 45 | // Generates deprecation warning: https://github.com/jantimon/html-webpack-plugin/issues/1501 46 | new HtmlWebpackPlugin({ 47 | title: 'webpack Boilerplate', 48 | favicon: paths.src + '/images/favicon.png', 49 | template: paths.src + '/template.html', // template file 50 | filename: 'index.html', // output file 51 | }), 52 | new HtmlWebpackPlugin({ 53 | title: 'webpack Boilerplate Admin', 54 | favicon: paths.src + '/images/favicon.png', 55 | template: paths.src + '/admin-template.html', // template file 56 | filename: 'index-admin.html', // output file 57 | }), 58 | 59 | // Only update what has changed on hot reload 60 | new webpack.HotModuleReplacementPlugin(), 61 | ], 62 | }) 63 | -------------------------------------------------------------------------------- /react/config/webpack.prod.js: -------------------------------------------------------------------------------- 1 | const MiniCssExtractPlugin = require('mini-css-extract-plugin') 2 | const HtmlWebpackPlugin = require('html-webpack-plugin') 3 | const CssMinimizerPlugin = require('css-minimizer-webpack-plugin') 4 | const { merge } = require('webpack-merge') 5 | 6 | const paths = require('./paths') 7 | const common = require('./webpack.common.js') 8 | 9 | module.exports = merge(common, { 10 | mode: 'production', 11 | devtool: false, 12 | output: { 13 | path: paths.build, 14 | publicPath: '/', 15 | filename: 'js/[name].[contenthash].bundle.js', 16 | }, 17 | module: { 18 | rules: [ 19 | { 20 | test: /\.(scss|css)$/, 21 | use: [ 22 | MiniCssExtractPlugin.loader, 23 | { 24 | loader: 'css-loader', 25 | options: { 26 | importLoaders: 2, 27 | sourceMap: false, 28 | modules: true, 29 | }, 30 | }, 31 | 'postcss-loader', 32 | 'sass-loader', 33 | ], 34 | }, 35 | ], 36 | }, 37 | plugins: [ 38 | // Generates an HTML file from a template 39 | // Generates deprecation warning: https://github.com/jantimon/html-webpack-plugin/issues/1501 40 | new HtmlWebpackPlugin({ 41 | title: 'webpack Boilerplate', 42 | favicon: paths.src + '/images/favicon.png', 43 | template: paths.src + '/template.html', // template file 44 | filename: 'index.html', // output file 45 | }), 46 | new HtmlWebpackPlugin({ 47 | title: 'webpack Boilerplate Admin', 48 | favicon: paths.src + '/images/favicon.png', 49 | template: paths.src + '/admin-template.html', // template file 50 | filename: 'index-admin.html', // output file 51 | }), 52 | 53 | // Extracts CSS into separate files 54 | // Note: style-loader is for development, 55 | // MiniCssExtractPlugin is for production 56 | new MiniCssExtractPlugin({ 57 | filename: 'styles/[name].[contenthash].css', 58 | chunkFilename: '[id].css', 59 | }), 60 | ], 61 | optimization: { 62 | minimize: true, 63 | minimizer: [new CssMinimizerPlugin(), '...'], 64 | // Once your build outputs multiple chunks, 65 | // this option will ensure they share the webpack runtime 66 | // instead of having their own. 67 | // This also helps with long-term caching, since the chunks will only 68 | // change when actual code changes, not the webpack runtime. 69 | runtimeChunk: { 70 | name: 'runtime', 71 | }, 72 | }, 73 | performance: { 74 | hints: false, 75 | maxEntrypointSize: 512000, 76 | maxAssetSize: 512000, 77 | }, 78 | }) 79 | -------------------------------------------------------------------------------- /react/config/webpack.wp.prod.js: -------------------------------------------------------------------------------- 1 | const MiniCssExtractPlugin = require('mini-css-extract-plugin') 2 | const CssMinimizerPlugin = require('css-minimizer-webpack-plugin') 3 | const { merge } = require('webpack-merge') 4 | 5 | const paths = require('./paths') 6 | const common = require('./webpack.common.js') 7 | 8 | module.exports = merge(common, { 9 | mode: 'production', 10 | devtool: false, 11 | output: { 12 | path: paths.wp_public, 13 | publicPath: '/', 14 | filename: 'js/[name].bundle.js', 15 | }, 16 | module: { 17 | rules: [ 18 | { 19 | test: /\.(scss|css)$/, 20 | use: [ 21 | MiniCssExtractPlugin.loader, 22 | { 23 | loader: 'css-loader', 24 | options: { 25 | importLoaders: 2, 26 | sourceMap: false, 27 | modules: true, 28 | }, 29 | }, 30 | 'postcss-loader', 31 | 'sass-loader', 32 | ], 33 | }, 34 | ], 35 | }, 36 | plugins: [ 37 | // Extracts CSS into separate files 38 | // Note: style-loader is for development, 39 | // MiniCssExtractPlugin is for production 40 | new MiniCssExtractPlugin({ 41 | filename: 'styles/[name].css', 42 | chunkFilename: '[id].css', 43 | }), 44 | ], 45 | optimization: { 46 | minimize: true, 47 | minimizer: [new CssMinimizerPlugin(), '...'], 48 | // Once your build outputs multiple chunks, 49 | // this option will ensure they share the webpack runtime 50 | // instead of having their own. 51 | // This also helps with long-term caching, since the chunks will only 52 | // change when actual code changes, not the webpack runtime. 53 | runtimeChunk: { 54 | name: 'runtime', 55 | }, 56 | }, 57 | performance: { 58 | hints: false, 59 | maxEntrypointSize: 512000, 60 | maxAssetSize: 512000, 61 | }, 62 | }) 63 | -------------------------------------------------------------------------------- /react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack-boilerplate-edited-for-wp", 3 | "version": "1.0.0", 4 | "description": "Edited webpack-boilerplate for WP Plugin use", 5 | "main": "index.js", 6 | "author": "Simone 'Magicianred' Paolucci", 7 | "license": "MIT", 8 | "scripts": { 9 | "start": "cross-env NODE_ENV=development webpack serve --config config/webpack.dev.js", 10 | "build": "cross-env NODE_ENV=production webpack --config config/webpack.prod.js", 11 | "wpBuild": "cross-env NODE_ENV=production webpack --config config/webpack.wp.prod.js", 12 | "lint": "eslint . src config || true", 13 | "startBuilded": "http-server ./../dist/" 14 | }, 15 | "keywords": [ 16 | "webpack", 17 | "webpack 5", 18 | "webpack boilerplate", 19 | "Tania Rascia", 20 | "taniarascia/webpack-boilerplate" 21 | ], 22 | "devDependencies": { 23 | "@babel/core": "^7.12.1", 24 | "@babel/plugin-proposal-class-properties": "^7.12.1", 25 | "@babel/preset-env": "^7.12.1", 26 | "@babel/preset-react": "^7.12.13", 27 | "babel-loader": "^8.1.0", 28 | "clean-webpack-plugin": "^3.0.0", 29 | "copy-webpack-plugin": "^6.2.1", 30 | "cross-env": "^7.0.2", 31 | "css-loader": "^5.0.0", 32 | "css-minimizer-webpack-plugin": "^1.1.5", 33 | "eslint": "^7.12.1", 34 | "eslint-config-airbnb-base": "^14.2.0", 35 | "eslint-config-prettier": "^6.15.0", 36 | "eslint-import-resolver-webpack": "^0.13.0", 37 | "eslint-plugin-import": "^2.22.1", 38 | "eslint-plugin-prettier": "^3.1.4", 39 | "eslint-plugin-react": "^7.22.0", 40 | "eslint-webpack-plugin": "^2.1.0", 41 | "html-webpack-plugin": "^5.0.0-alpha.7", 42 | "http-server": "^0.12.3", 43 | "mini-css-extract-plugin": "^1.0.0", 44 | "node-sass": "^4.14.1", 45 | "postcss-loader": "^4.0.4", 46 | "postcss-preset-env": "^6.7.0", 47 | "prettier": "^2.1.2", 48 | "prettier-webpack-plugin": "^1.2.0", 49 | "sass-loader": "^10.0.3", 50 | "style-loader": "^2.0.0", 51 | "webpack": "^5.1.3", 52 | "webpack-cli": "^4.0.0", 53 | "webpack-dev-server": "^3.11.0", 54 | "webpack-merge": "^5.2.0" 55 | }, 56 | "original-repository": { 57 | "type": "git", 58 | "url": "git@github.com:taniarascia/webpack-boilerplate" 59 | }, 60 | "repository": { 61 | "type": "git", 62 | "url": "git@github.com:Magicianred/wp-plugin-webpack-react-basic.git" 63 | }, 64 | "dependencies": { 65 | "react": "^17.0.1", 66 | "react-dom": "^17.0.1" 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /react/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | 'postcss-preset-env': { 4 | browsers: 'last 2 versions', 5 | }, 6 | }, 7 | } 8 | -------------------------------------------------------------------------------- /react/public/example.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Magicianred/wp-plugin-webpack-react-basic/ca6a1ee4b47f9c17815028e315491c0910c23708/react/public/example.jpg -------------------------------------------------------------------------------- /react/src/admin-template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 12 |
13 |
14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /react/src/admin.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom' 3 | import './styles/index.scss' 4 | 5 | const title = 'React with Webpack and Babel for WP Admin' 6 | 7 | const rootElement = document.getElementById('mgr-wppwr-plugin-admin') 8 | 9 | if (rootElement) { 10 | ReactDOM.render(
{title}
, rootElement) 11 | } 12 | -------------------------------------------------------------------------------- /react/src/fonts/Inter.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Magicianred/wp-plugin-webpack-react-basic/ca6a1ee4b47f9c17815028e315491c0910c23708/react/src/fonts/Inter.ttf -------------------------------------------------------------------------------- /react/src/images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Magicianred/wp-plugin-webpack-react-basic/ca6a1ee4b47f9c17815028e315491c0910c23708/react/src/images/favicon.png -------------------------------------------------------------------------------- /react/src/images/webpack-logo.svg: -------------------------------------------------------------------------------- 1 | logo-on-dark-bg -------------------------------------------------------------------------------- /react/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom' 3 | import './styles/index.scss' 4 | 5 | const title = 'React with Webpack and Babel for WP Frontend' 6 | 7 | const rootElements = document.getElementsByClassName('mgr-wppwr-plugin') 8 | 9 | if (rootElements) { 10 | // eslint-disable-next-line no-plusplus 11 | for (let i = 0; i < rootElements.length; i++) { 12 | ReactDOM.render(
{title}
, rootElements[i]) 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /react/src/styles/_scaffolding.scss: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: $font-size; 3 | font-family: $font-family; 4 | background: $background-color; 5 | color: $font-color; 6 | max-width: $page-width; 7 | line-height: 1.4; 8 | } 9 | 10 | body { 11 | margin: 0; 12 | width: 100vw; 13 | } 14 | 15 | #root { 16 | display: flex; 17 | align-items: center; 18 | justify-content: center; 19 | flex-direction: column; 20 | align-self: center; 21 | height: 100vh; 22 | } 23 | 24 | h1 { 25 | margin: auto; 26 | text-align: center; 27 | max-width: 90vw; 28 | } 29 | -------------------------------------------------------------------------------- /react/src/styles/_variables.scss: -------------------------------------------------------------------------------- 1 | $font-size: 1rem; 2 | $font-family: 'Inter', sans-serif; 3 | $background-color: #121212; 4 | $font-color: #dae0e0; 5 | $page-width: 650px; 6 | -------------------------------------------------------------------------------- /react/src/styles/index.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Inter'; 3 | src: url('../fonts/Inter.ttf'); 4 | } 5 | 6 | @import 'variables'; 7 | @import 'scaffolding'; 8 | -------------------------------------------------------------------------------- /react/src/template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 |
17 |
18 | 19 | 20 | --------------------------------------------------------------------------------