Giter VIP home page Giter VIP logo

devowlio / wp-react-starter Goto Github PK

View Code? Open in Web Editor NEW
380.0 13.0 52.0 1.72 MB

πŸš€WordPress Plugin Boilerplate using modern web techs like TypeScript, SASS, and so on... on top of a local development environment with Docker and predefined GitLab CI for continous integration and deployment!

Home Page: https://devowl.io/wp-react-starter/

License: Other

JavaScript 0.69% PHP 51.34% Dockerfile 0.20% Shell 1.60% TypeScript 45.98% Gherkin 0.15% SCSS 0.04%
wordpress-plugin-boilerplate wordpress-boilerplate wordpress-plugin-skeleton wordpress-skeleton wordpress-plugin-development wordpress-plugin wordpress-react wordpress-typescript wordpress-object-oriented-php wordpress-oop-php wordpress-docker wordpress-plugin-monorepo wordpress-gitlab-ci wordpress-continuous-integration wordpress-mobx wordpress-saas wordpress-i18n wordpress-cypress wordpress-jest wordpress-phpunit

wp-react-starter's Introduction

WP React Starter: WordPress React Boilerplate

DEPRECATED: WP React Starter was a "research project" of devowl.io for the development of our WordPress plugins. Unfortunately, we don't have enough resources to regularly contribute the developments of our private monorepo to WP React Starter. You are welcome to continue using or forking this project, but it will no longer be updated or extended with new features, structures, etc.

WP React Starter Logo

Create (multiple) WordPress plugins that use React, TypeScript, and object-oriented PHP in a fully customizable Docker development environment, commited in a monorepo.

Wow, I didn't know the WordPress plugin development could look like this!

πŸš€ Instant no-config plugin creation with create-wp-react-app πŸ”₯

GitHub stars Join on Slack codecov GitLab CI/CD

πŸ€— Why WordPress plugin development is fun with WP React Starter

Everyone tells us: WordPress plugins are a mess. Our answer is always: Let’s take this opportunity to make the system that powers every third website on the Internet better.

With WP React Starter we have created a modern WordPress development boilerplate which contains everything you are used to from modern web development projects:

  • React Frontend for reactive user interfaces (with PHP fallback for server-side rendering) - React is a part of WordPress since the Gutenberg release
  • TypeScript for typesafe frontend development
  • PHP in an object-oriented style with namespaces for better backend code
  • Docker development environment to develop all you plugins without manual setup steps
  • CI/CD integration for automated code quality checks and release management (publish on wordpress.org or wherever you want)

Does that sound like crappy WordPress plugin development or what you really have been looking for for your plugins for a long time? Let's start today with your first WordPress plugin! Create it within 5 minutes, thanks to our CLI create-wp-react-app

Client-Side Features

Familiar React API & patterns (ES6) with TypeScript

  • React with Babel env preset + Hooks
  • MobX for state management
  • webpack build for assets
  • core-js puts automatically needed polyfills to your distribution files
  • Sourcemap generation for debugging purposes (CSS and TypeScript files)
  • SASS stylesheets compiler (.scss files) for next-gen CSS
  • PostCSS for transforming SCSS (including autoprefixing) to CSS
  • Minified sources automatically generated for production (JS, CSS)
  • Grunt for automation tasks (build the installable plugin)
  • ESLint predefined configuration for proper linting
  • TypeDoc for JavaScript Documentation
  • WP HookDoc for Filters & Actions Documentation
  • Translation (i18n) with automatic generation of .pot files
  • Add-On Development (multiple WordPress plugins), based on a predefined utils package that allows you to share TypeScript types across plugins.
  • Admin backend components, in this case an own page with a button (admin.ts)
  • Frontend components, in this case a simple widget (widget.ts)

Server-Side Features

OOP-style for building a high-quality PHP development

  • PHP >= 5.6 required: An admin notice is showed when not available
  • WordPress >= 5.2 required: An admin notice is showed when not available with a link to the updater
  • PHP CodeSniffer predefined configuration for proper linting
  • Namespace support
  • Autloading classes in connection with namespaces
  • WP REST API v2 for API programming, no longer use admin-ajax.php for CRUD operations
  • SCRIPT_DEBUG enables not-minified sources for debug sources (use in connection with yarn build:js:development)
  • Cachebuster for public resources
  • Automatic generation of .pot files for translating (i18n) the backend plugin
  • phpDocumentor for PHP Documentation
  • apiDoc for API Documentation

Automation Features

Avoid repetitive work and develop more feature

  • Workspace creation with end-to-end setup: create-wp-react-app create-workspace
  • Plugin creation with monorepo integration: create-wp-react-app create-plugin
  • Package creation with monorepo integration: create-wp-react-app create-package
  • Predefined GitLab CI example for Continous Integration (read more)
  • Scoping your PHP coding and dependencies so they are isolated (avoid dependency version conflicts)
  • Packaging and publishing of you plugin wordpress.org (read more)
  • license-checker for automated 3th-party-code license scanning and compliance check

Developer Experience Features

Providing the right development environment for high quality plugins

  • Built on top of Visual Studio Code (extensions are automatically installed)
  • All your plugins within yarn workspaces
  • Prettier for automatic JavaScript / TypeScript code formatting on save (VSCode required)
  • PHP CodeSniffer's cbf for automatic PHP code formatting on save (VSCode required)
  • Husky integration for code formatting before Git commit - never have ugly code in your repository
  • Husky is also used for commitlint to become a common commit message style in your repository
  • lerna for semantic versioning and changelog generation
  • webpackbar so you can get a real progress bar while development
  • Docker for a local development environment
  • Predefined WordPress Stubs so you get autocompletion for WordPress classes and functions, e. g. add_action
  • Within the Docker environment you have WP-CLI available
  • Predefined Review Apps example for branch deployment, read more here
  • Predefined VSCode PHP debugging environment

Testing Features

Cover your source code with test code to to guarantee the last piece quality

  • PHPUnit for PHP unit testing
  • Jest for TypeScript unit- and snapshot testing
  • Collect code coverage reports with a single command in each package
  • Automatically push coverage reports to codecov.io
  • Cypress for End-To-End (E2E) tests
  • Gherkin syntax to write E2E features (combined with Cypress)
  • Automatically failure a GitLab CI pipeline if a coverage percent is not reached (threshold)
  • πŸš€ The complete test suite is integrated in GitLab CI

Documentation

You want to dive deep into the documentation of WP React Starter? Check, we convinced another developer to write high quality WordPress plugins. πŸš€

Usage

PHP development

TypeScript development

Advanced

GitLab integration

Licensing

Thank you for your interest in WP React Starter. This boilerplate was developed organically over years and we at devowl.io bring all our experience from best-selling WordPress plugins like WordPress Real Media Library as well as customer web development orders to this project. With WP React Starter you get dozens of hundred working hours compressed into one easy-to-use solution.

We would like to share our knowledge and solution with you to make the development of WordPress plugins more professional. But we are even happier if you also share your knowledge to make this project even better.

WP React Starter is licensed partly under GNU General Public License v3.0 (GPL v3.0 or later) and partly under our ISC License (ISC). Feel free to develop high-quality WordPress plugins at light speed with WP React Starter in real projects. Don't worry, it's free to use for all non-commercial and commercial WordPress plugins!

wp-react-starter's People

Contributors

matzeeable avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

wp-react-starter's Issues

yarn build error!

Hi again.
This errors show in the build action:

Starting type checking service...

βœ– Wp-reactjs-starter
Compiled with some errors in 10.23s

[WEBPACK] Build failed after 17.819 seconds
[WEBPACK] Errors building [name].js
ERROR in ../wp-react-starter--wp-reactjs-multi-starter-wp-reactjs-starter-1.2.0/plugins/wp-reactjs-starter/src/public/ts/store/stores.tsx(29,16):
TS2742: The inferred type of 'context' cannot be named without a reference to '@wp-reactjs-multi-starter/utils/node_modules/@types/react'. This is likely not portable. A type annotation is necessary.
ERROR in ../wp-react-starter--wp-reactjs-multi-starter-wp-reactjs-starter-1.2.0/plugins/wp-reactjs-starter/src/public/ts/store/stores.tsx(40,23):
TS2742: The inferred type of 'StoreProvider' cannot be named without a reference to '@wp-reactjs-multi-starter/utils/node_modules/@types/react'. This is likely not portable. A type annotation is necessary.
ERROR in ..wp-react-starter--wp-reactjs-multi-starter-wp-reactjs-starter-1.2.0/plugins/wp-reactjs-starter/src/public/ts/utils/index.tsx(21,16):
TS2742: The inferred type of 'localization' cannot be named without a reference to '@wp-reactjs-multi-starter/utils/node_modules/@types/react'. This is likely n
βœ” Utils
Compiled successfully in 11.18s

[WEBPACK] Finished building index.js within 11.18 seconds
Error [ERR_IPC_CHANNEL_CLOSED]: Channel closed
at process.target.send (internal/child_process.js:679:16)
at callback (../wp-react-starter--wp-reactjs-multi-starter-wp-reactjs-starter-1.2.0/node_modules/worker-farm/lib/child/index.js:32:17)
at finishedCallback (../wp-react-starter--wp-reactjs-multi-starter-wp-reactjs-starter-1.2.0/node_modules/parallel-webpack/src/webpackWorker.js:141:21)
at finalCallback (../wp-react-starter--wp-reactjs-multi-starter-wp-reactjs-starter-1.2.0/node_modules/webpack/lib/Compiler.js:257:39)
at ../wp-react-starter--wp-reactjs-multi-starter-wp-reactjs-starter-1.2.0/node_modules/webpack/lib/Compiler.js:306:14
at AsyncSeriesHook.eval [as callAsync] (eval at create (../wp-react-starter--wp-reactjs-multi-starter-wp-reactjs-starter-1.2.0/node_modules/tapable/lib/HookCodeFactory.js:33:10), :40:1)
at AsyncSeriesHook.lazyCompileHook (../wp-react-starter--wp-reactjs-multi-starter-wp-reactjs-starter-1.2.0/node_modules/tapable/lib/Hook.js:154:20)
at ../wp-react-starter--wp-reactjs-multi-starter-wp-reactjs-starter-1.2.0/node_modules/webpack/lib/Compiler.js:304:22
at Compiler.emitRecords (../wp-react-starter--wp-reactjs-multi-starter-wp-reactjs-starter-1.2.0/node_modules/webpack/lib/Compiler.js:499:39)
at ../wp-react-starter--wp-reactjs-multi-starter-wp-reactjs-starter-1.2.0/node_modules/webpack/lib/Compiler.js:298:10
at ../wp-react-starter--wp-reactjs-multi-starter-wp-reactjs-starter-1.2.0/node_modules/webpack/lib/Compiler.js:485:14
at AsyncSeriesHook.eval [as callAsync] (eval at create (../wp-react-starter--wp-reactjs-multi-starter-wp-reactjs-starter-1.2.0/node_modules/tapable/lib/HookCodeFactory.js:33:10), :18:1)
at AsyncSeriesHook.lazyCompileHook (../wp-react-starter--wp-reactjs-multi-starter-wp-reactjs-starter-1.2.0/node_modules/tapable/lib/Hook.js:154:20)
at ../wp-react-starter--wp-reactjs-multi-starter-wp-reactjs-starter-1.2.0/node_modules/webpack/lib/Compiler.js:482:27
at ../wp-react-starter--wp-reactjs-multi-starter-wp-reactjs-starter-1.2.0/node_modules/neo-async/async.js:2818:7
at done (../wp-react-starter--wp-reactjs-multi-starter-wp-reactjs-starter-1.2.0/node_modules/neo-async/async.js:3522:9)

Error in create-wp-react-app create-plugin

Hi i just try to create new plugin in my workspace and was created from template perfectly in plugins directory. But in the terminal show an error and in the wordpress plugin menu not added.

ERROR:

Start initial build process...
yarn run v1.22.4
$ BUILD_PLUGIN=$npm_package_slug yarn --silent parallel-webpack --no-stats --config ../../common/webpack.multi.ts && yarn grunt cachebuster:public && yarn grunt build
You are currently building a plugin, please consider to put your webpack:done actions after the yarn build command for performance reasons!
β¨― Unable to compile TypeScript:
../../common/webpack.factory.ts:339:9 - error TS2322: Type '(WebpackBar | MiniCssExtractPlugin | ForkTsCheckerWebpackPlugin | DefinePlugin)[]' is not assignable to type 'Plugin[]'.
Type 'WebpackBar | MiniCssExtractPlugin | ForkTsCheckerWebpackPlugin | DefinePlugin' is not assignable to type 'Plugin'.
Type 'WebpackBar' is not assignable to type 'Plugin'.
Types of property 'apply' are incompatible.
Type '(compiler: import("/Users/amirhoseinfallahi/Documents/___FCODE/____Projects/WPPlugins/faracode/node_modules/@types/mini-css-extract-plugin/node_modules/@types/webpack/index").Compiler) => void' is not assignable to type '(compiler: import("/Users/amirhoseinfallahi/Documents/___FCODE/____Projects/WPPlugins/faracode/node_modules/@types/webpack/index").Compiler) => void'.
Types of parameters 'compiler' and 'compiler' are incompatible.
Type 'import("/Users/amirhoseinfallahi/Documents/___FCODE/____Projects/WPPlugins/faracode/node_modules/@types/webpack/index").Compiler' is not assignable to type 'import("/Users/amirhoseinfallahi/Documents/___FCODE/____Projects/WPPlugins/faracode/node_modules/@types/mini-css-extract-plugin/node_modules/@types/webpack/index").Compiler'.
The types of 'hooks.shouldEmit.call' are incompatible between these types.
Type '(arg1?: import("/Users/amirhoseinfallahi/Documents/___FCODE/____Projects/WPPlugins/faracode/node_modules/@types/webpack/index").compilation.Compilation, arg2?: any, arg3?: any, ...args: any[]) => any' is not assignable to type '(arg1?: import("/Users/amirhoseinfallahi/Documents/___FCODE/____Projects/WPPlugins/faracode/node_modules/@types/mini-css-extract-plugin/node_modules/@types/webpack/index").compilation.Compilation, arg2?: any, arg3?: any, ...args: any[]) => any'.
Types of parameters 'arg1' and 'arg1' are incompatible.
Type 'import("/Users/amirhoseinfallahi/Documents/___FCODE/____Projects/WPPlugins/faracode/node_modules/@types/mini-css-extract-plugin/node_modules/@types/webpack/index").compilation.Compilation' is not assignable to type 'import("/Users/amirhoseinfallahi/Documents/___FCODE/____Projects/WPPlugins/faracode/node_modules/@types/webpack/index").compilation.Compilation'.

339 plugins: [
~~~~~~~

../../node_modules/@types/webpack/index.d.ts:131:9
131 plugins?: Plugin[];
~~~~~~~
The expected type comes from property 'plugins' which is declared here on type 'Configuration'

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Error: Command failed with exit code 1: yarn build

Feature suggestions

First of all, thank you for all your hard work putting this project together. It is a wonderful collection of tools and technologies.

I am experienced with React, but new to WordPress, and there are some features I expected to find in this starter that are either absent or that I have not been able to find (perhaps due to my inexperience with WordPress).

  • Custom API endpoints -- The starter project demonstrates how to call and consume the response from the /plugin endpoint of the WordPress REST API, but there is no example (that I can see) of creating or consuming a custom endpoint.
    EDIT: I was wrong. The inc/rest/Service.class.php file does create a REST endpoint at /plugin (under the REST SERVICE_NAMESPACE). I was confused because WordPress exposes a built-in REST service at /plugin. Perhaps wp-reactjs-starter should use a different name for its example endpoint.
  • Data storage -- The starter project contains an in-memory Todo list. It would have been better (in my opinion) to have the Todo data persisted in a WordPress table and/or MariaDB.
  • Shortcode -- Being new to WordPress, it would have been very helpful to me if the starter project demonstrated shortcode creation so the Widget could be inserted in the main content of a page.
  • Cannot use Widget -- In the Appearance/Widgets admin page, I can see the "React Demo Widget" listed, but I cannot seem to add it to a page. It seems that the only side-bar is the "Footer" and even when I add the widget to that sidebar, nothing shows up on the page. It is highly likely that I am just misunderstanding something about WordPress or your project, but I'm surprised that in the initial state of the project, I cannot seem to find any way to use the React Demo Widget. Shouldn't it be present on the "Hello World" post? If it is there or can be added, please let me know how.
    EDIT: I just realized that the widget would have shown up except for a bug -- "ReferenceError: jQuery is not defined". I'll post that as a separate issue.

Thank you so much again for your great project. I would very much appreciate if you could clear up my confusion on a few of the issues above. Thanks!

How to add static assets (images)?

Hi,

how would you add static assets to your React frontend?

This is what I've tried:

add file-loader to webpack config:

{
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      }

then in my react code do

import HatImage from '../../assets/hat_random.png'
...

   <img src={`/wp-content/plugins/wsb-players/public/dist/${HatImage}`}  />

The above works, but I don't like hardcoding the path to the image. Especially, as it does not work well with npm run dev / npm run build. Do you have a better approach for loading images?

Redirect Loop when custom domain name is used.

Hello Guys

First of all thanks for a great starter kit.
The issue appears when a custom URL is used in "create-wp-react-app create-workspace" wizard
It can be fixed by changing "siteurl" and "home" option in wp_options table to the custom url entered during workspace creation.

Yarn Directions

Hey there! Per your installation instructions, your step for Yarn states:
$ yarn add -g create-wp-react-app

This syntax would be correct for NPM, but one caveat of using yarn is that the syntax to globally download packages is actually:
$ yarn global add create-wp-react-app

Just wanted to let you know that I was unable to install the package globally until using the latter code, thanks!

commonUrlBuilder double url encoding of route params

As the template is missing an example of a API call with parameters, I may be using it in an incorrect way.

I created an endpoint in php expecting a query parameter. The Typescript declaration is the foillowing:

import {
    RouteLocationInterface,
    RouteHttpVerb,
    RouteResponseInterface,
    RouteRequestInterface,
    RouteParamsInterface
} from "@dbnary-dashboard/utils";

export const sparqlGetLocation: RouteLocationInterface = {
    path: "/sparql",
    method: RouteHttpVerb.GET
};
export type SparqlRequest = RouteRequestInterface;
export type SparqlParams = RouteParamsInterface & { query: string };

And I use it with :

async function doSparqlQuery(event: React.MouseEvent) {
    event.persist();
    const result = await request<SparqlRequest, SparqlParams, SparqlResponse>({
        location: sparqlGetLocation,
        params: { query: "SELECT * FROM { ?s ?p ?o } LIMIT 10" }
    });
    const usedUrl = urlBuilder({ location: sparqlGetLocation });
    alert(`${usedUrl}\n\n${JSON.stringify(result, undefined, 4)}`);
    event.preventDefault();
}

The code does not work as expected as it leads to the queried URL :

http://localhost:8080/wp-json/dbnary-dashboard/v1/sparql?_v=1.0.0&query=SELECT%2520*%2520FROM%2520%257B%2520%253Fs%2520%253Fp%2520%253Fo%2520%257D%2520LIMIT%252010

(see how the query parameter is double encoded (%2520 instead of %20).

I tracked down the problem to packages/utils/lib/factory/ajax/commonUrlBuilder.tsx where the parameters are explicitely encoded at:

    // Find undeclared body params (which are not bind above) and add it to GET query
    for (const checkParam of Object.keys(params)) {
        if (foundParams.indexOf(checkParam) === -1) {
            getParams[checkParam] = encodeURIComponent((params as any)[checkParam]);
        }
    }

And afterward, the call to Url.toString() at return apiUrl.set("query", deepMerge.all([options.restQuery, getParams, query])).toString();will re-encode the parameter (using stringify).

Why are parameters URIencoded explicitely in commonUrlBuilder ?

Am I using the boilerplate code incorrectly there ?

Use Clean-CSS instead of cssnano

Use https://github.com/leodido/postcss-clean
npm install --save-dev postcss-clean

postcss.config.js

module.exports = ({ file, options, env }) => ({
    plugins: [
        require('autoprefixer')
    ].concat(env === 'production' || env === 'umd' ? [require('postcss-clean')(options.clean)] : [])
});

webpack.config.js

loader: 'postcss-loader',
options: {
	config: {
		ctx: {
			clean: {}
		}
	}
}

Use backslashed WP functions

When using PHP namespaces it is the right way to backslash global scope defined functions. Example: \add_action().

Cloning git repository hangs

After running the first two commands npm install -g create-wp-react-app and create-wp-react-app create my-plugin the initialization on the prjects begins but gets stuck at Clone git repository. The loader just hangs there forever and never passes. Any idea on why this is happening. I made sure that my git email was correct and that I have an ssh key setup. Any help would be appreciated, thanks.

Empty plugin vendor dir

Step for reproduce for plugin development

  1. Run yarn build
  2. Go to build/PLUGIN_NAME/vendor/WORKSPACE_NAME/utils

You see that this folder is empty - and the production plugin version doesn't work...

i18n-frontend script slow

When using the yarn i18n-frontend script the .pot file is generated very slowly in compare with yarn i18n-backend. The frontend file is generated from the minified files of the TypeScript code .js and .map files - it takes about 5 seconds. The backend i18n code from the .php files is generated in 0.3 seconds. Perhaps there is a better way to parse the source files .tsx (TypeScript) directly instead of dist files.

npm version

Allow via npm version to modify the index.php as well.

Incompatable with xdebug 3

Environment:

  • Windows 10
  • WSL 2
  • Ubuntu

When start debugging with xdebug, I can see the start script install xdebug 3 by default and current default config from the container is not working with version 3. After refering to the official guide, I added the following to the php.ini config file in wordpress container

xdebug.client_port = 9000 //xdebug 3 default port is 9003
xdebug.start_with_request = yes
xdebug.discover_client_host=1
xdebug.mode=debug

Now it works, I was wondering where I can put this in this repo for new users.

webpack.factory.ts - Type 'WebpackBar' is not assignable to type 'Plugin'

Ich have a clean setup. With one plugin the setup works. I added a second plugin, and the build process seems broken for all plugins:

php --version
PHP 7.4.16

node --version
v15.12.0

yarn --version
1.22.10

composer -V
2.0.11 2021-02-24 14:57:23

Bildschirmfoto 2021-03-27 um 16 22 13
yarn build

yarn run v1.22.10 $ BUILD_PLUGIN=$npm_package_slug yarn --silent parallel-webpack --no-stats --config ../../common/webpack.multi.ts && yarn grunt cachebuster:public && yarn grunt build You are currently building a plugin, please consider to put your webpack:done actions after the yarn build` command for performance reasons!
β¨― Unable to compile TypeScript:
../../common/webpack.factory.ts:339:9 - error TS2322: Type '(WebpackBar | MiniCssExtractPlugin | ForkTsCheckerWebpackPlugin | DefinePlugin)[]' is not assignable to type 'Plugin[]'.
Type 'WebpackBar | MiniCssExtractPlugin | ForkTsCheckerWebpackPlugin | DefinePlugin' is not assignable to type 'Plugin'.
Type 'WebpackBar' is not assignable to type 'Plugin'.
Types of property 'apply' are incompatible.
Type '(compiler: import("/Users/cnichte/Documents/develop-wordpress-plugins/node_modules/@types/mini-css-extract-plugin/node_modules/@types/webpack/index").Compiler) => void' is not assignable to type '(compiler: import("/Users/cnichte/Documents/develop-wordpress-plugins/node_modules/@types/webpack/index").Compiler) => void'.
Types of parameters 'compiler' and 'compiler' are incompatible.
Type 'import("/Users/cnichte/Documents/develop-wordpress-plugins/node_modules/@types/webpack/index").Compiler' is not assignable to type 'import("/Users/cnichte/Documents/develop-wordpress-plugins/node_modules/@types/mini-css-extract-plugin/node_modules/@types/webpack/index").Compiler'.
The types of 'hooks.shouldEmit.call' are incompatible between these types.
Type '(arg1?: import("/Users/cnichte/Documents/develop-wordpress-plugins/node_modules/@types/webpack/index").compilation.Compilation, arg2?: any, arg3?: any, ...args: any[]) => any' is not assignable to type '(arg1?: import("/Users/cnichte/Documents/develop-wordpress-plugins/node_modules/@types/mini-css-extract-plugin/node_modules/@types/webpack/index").compilation.Compilation, arg2?: any, arg3?: any, ...args: any[]) => any'.
Types of parameters 'arg1' and 'arg1' are incompatible.
Property 'addChunkInGroup' is missing in type 'import("/Users/cnichte/Documents/develop-wordpress-plugins/node_modules/@types/mini-css-extract-plugin/node_modules/@types/webpack/index").compilation.Compilation' but required in type 'import("/Users/cnichte/Documents/develop-wordpress-plugins/node_modules/@types/webpack/index").compilation.Compilation'.

339 plugins: [
~~~~~~~

../../node_modules/@types/webpack/index.d.ts:1254:13
1254 addChunkInGroup(groupOptions: GroupOptions): ChunkGroup;
~~~~~~~~~~~~~~~
'addChunkInGroup' is declared here.
../../node_modules/@types/webpack/index.d.ts:132:9
132 plugins?: Plugin[];
~~~~~~~
The expected type comes from property 'plugins' which is declared here on type 'Configuration'`

"result.flat" is not a function error when starting the boilerplate containers.

Hello there,

I face the following error trying to start the boilerplate.

`
yarn docker:start
yarn run v1.22.5
$ yarn docker-compose up --build -d && concurrently --raw "yarn docker-compose logs -f -t --tail=10" "yarn --silent wp-wait && yarn --silent docker:start:dev"
$ PLUGIN_SLUGS=$(yarn --silent workspace:slugs) COMPOSE_PATH_SEPARATOR=: COMPOSE_FILE=./devops/docker-compose/docker-compose.yml:./devops/docker-compose/docker-compose.local.yml:$(COMPOSE_CONTEXT=local yarn --silent workspace:compose-files) COMPOSE_PROJECT_NAME=${npm_package_name} yarn --silent exposedotenv docker-compose up --build -d
my-wp-react-boilerplate_mysql_1 is up-to-date
my-wp-react-boilerplate_dockerhost_1 is up-to-date
my-wp-react-boilerplate_phpmyadmin_1 is up-to-date
my-wp-react-boilerplate_wordpress_1 is up-to-date
Starting my-wp-react-boilerplate_wordpress-cli_1 ... done
$ PLUGIN_SLUGS=$(yarn --silent workspace:slugs) COMPOSE_PATH_SEPARATOR=: COMPOSE_FILE=./devops/docker-compose/docker-compose.yml:./devops/docker-compose/docker-compose.local.yml:$(COMPOSE_CONTEXT=local yarn --silent workspace:compose-files) COMPOSE_PROJECT_NAME=${npm_package_name} yarn --silent exposedotenv docker-compose logs -f -t --tail=10
Attaching to my-wp-react-boilerplate_wordpress-cli_1, my-wp-react-boilerplate_phpmyadmin_1, my-wp-react-boilerplate_wordpress_1, my-wp-react-boilerplate_mysql_1, my-wp-react-boilerplate_dockerhost_1
dockerhost_1 | 2021-03-08T11:37:06.351133837Z Docker Host: 172.20.0.1 (default gateway)
dockerhost_1 | 2021-03-08T11:37:06.351503057Z Forwarding ports: 0:65535
mysql_1 | 2021-03-08T11:37:12.736832699Z 2021-03-08 11:37:12 0 [Note] InnoDB: 10.3.28 started; log sequence number 1625452; transaction id 20
mysql_1 | 2021-03-08T11:37:12.736975586Z 2021-03-08 11:37:12 0 [Note] InnoDB: Loading buffer pool(s) from /var/lib/mysql/ib_buffer_pool
mysql_1 | 2021-03-08T11:37:12.737137890Z 2021-03-08 11:37:12 0 [Note] Plugin 'FEEDBACK' is disabled.
mysql_1 | 2021-03-08T11:37:12.742398914Z 2021-03-08 11:37:12 0 [Note] Server socket created on IP: '::'.
mysql_1 | 2021-03-08T11:37:12.743170186Z 2021-03-08 11:37:12 0 [Warning] 'proxies_priv' entry '@% root@79d808ba5a88' ignored in --skip-name-resolve mode.
mysql_1 | 2021-03-08T11:37:12.743421667Z 2021-03-08 11:37:12 0 [Note] InnoDB: Buffer pool(s) load completed at 210308 11:37:12
mysql_1 | 2021-03-08T11:37:12.744041206Z 2021-03-08 11:37:12 0 [Note] Reading of all Master_info entries succeeded
mysql_1 | 2021-03-08T11:37:12.744055162Z 2021-03-08 11:37:12 0 [Note] Added new Master_info '' to hash table
mysql_1 | 2021-03-08T11:37:12.744058689Z 2021-03-08 11:37:12 0 [Note] mysqld: ready for connections.
mysql_1 | 2021-03-08T11:37:12.744061444Z Version: '10.3.28-MariaDB-1:10.3.28+maria~focal' socket: '/var/run/mysqld/mysqld.sock' port: 3306 mariadb.org binary distribution
phpmyadmin_1 | 2021-03-08T11:37:06.818718154Z AH00558: apache2: Could not reliably determine the server's fully qualified domain name, using 172.20.0.4. Set the 'ServerName' directive globally to suppress this message
phpmyadmin_1 | 2021-03-08T11:37:06.830750265Z AH00558: apache2: Could not reliably determine the server's fully qualified domain name, using 172.20.0.4. Set the 'ServerName' directive globally to suppress this message
phpmyadmin_1 | 2021-03-08T11:37:06.843405815Z [Mon Mar 08 11:37:06.843211 2021] [mpm_prefork:notice] [pid 1] AH00163: Apache/2.4.38 (Debian) PHP/7.4.15 configured -- resuming normal operations
phpmyadmin_1 | 2021-03-08T11:37:06.843431743Z [Mon Mar 08 11:37:06.843257 2021] [core:notice] [pid 1] AH00094: Command line: 'apache2 -D FOREGROUND'
wordpress_1 | 2021-03-08T11:37:27.382903258Z Success: WordPress updated successfully.
wordpress_1 | 2021-03-08T11:37:27.388648347Z Chown www-data...
wordpress_1 | 2021-03-08T11:37:27.390425301Z Chown www-data done!
wordpress_1 | 2021-03-08T11:37:27.426634549Z AH00558: apache2: Could not reliably determine the server's fully qualified domain name, using 172.20.0.5. Set the 'ServerName' directive globally to suppress this message
wordpress_1 | 2021-03-08T11:37:27.437784651Z AH00558: apache2: Could not reliably determine the server's fully qualified domain name, using 172.20.0.5. Set the 'ServerName' directive globally to suppress this message
wordpress_1 | 2021-03-08T11:37:27.449839716Z [Mon Mar 08 11:37:27.449711 2021] [mpm_prefork:notice] [pid 746] AH00163: Apache/2.4.38 (Debian) PHP/7.3.17 configured -- resuming normal operations
wordpress_1 | 2021-03-08T11:37:27.449864833Z [Mon Mar 08 11:37:27.449772 2021] [core:notice] [pid 746] AH00094: Command line: 'apache2 -D FOREGROUND'
wordpress_1 | 2021-03-08T11:37:28.313204814Z 127.0.0.1 - - [08/Mar/2021:11:37:28 +0000] "GET /wp-json/my-reactive-plugin/v1/plugin HTTP/1.1" 200 741 "-" "curl/7.64.0"
wordpress_1 | 2021-03-08T11:38:32.945742966Z 127.0.0.1 - - [08/Mar/2021:11:38:32 +0000] "GET /wp-json/my-reactive-plugin/v1/plugin HTTP/1.1" 200 741 "-" "curl/7.64.0"
wordpress_1 | 2021-03-08T11:40:05.100071447Z 127.0.0.1 - - [08/Mar/2021:11:40:05 +0000] "GET /wp-json/my-reactive-plugin/v1/plugin HTTP/1.1" 200 741 "-" "curl/7.64.0"
my-wp-react-boilerplate_wordpress-cli_1 exited with code 0
wordpress_1 | 2021-03-08T11:40:26.481860944Z 127.0.0.1 - - [08/Mar/2021:11:40:26 +0000] "GET /wp-json/my-reactive-plugin/v1/plugin HTTP/1.1" 200 741 "-" "curl/7.64.0"
$ /opt/apps/wordpress/my-wp-react-boilerplate/node_modules/.bin/parallel-webpack --no-stats --config common/webpack.multi.ts --watch
$ concurrently --raw "test $IS_DOCKER_START_COMMAND && exit 0 || yarn webpack --watch" "yarn --silent chokidar 'src//*.php' -c 'yarn i18n:generate:backend' --silent"
$ yarn grunt libs:copy && concurrently --raw "test $IS_DOCKER_START_COMMAND && exit 0 || yarn webpack --watch" "yarn --silent chokidar 'src/inc/
/.php' -i 'src/inc/base/others/cachebuster' -c 'yarn i18n:generate:backend' --silent"
$ grunt --gruntfile scripts/Gruntfile.ts --base . libs:copy
Running "clean:npmLibs" (clean) task

3 paths cleaned.

Running "copy:npmLibs" (copy) task

Running "copy:npmLibsHoist" (copy) task
Copied 9 files

Running "node_modules_cachebuster:publiclib" (node_modules_cachebuster) task
Generating node modules cachebuster file "src/inc/base/others/cachebuster-lib.php"...OK

Done.
result.flat is not a function
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

^CERROR: Aborting.

`

Thanks in advance for your support.

Bootstrap error with Composer 2

I just installed composer on my Mac, using brew (the composer installation from wp-react-starter failed).

Then launch create-wp-react-app create-workspace

The process goes on for a moment, then I get the following errors:

[...]

lerna ERR! yarn run bootstrap exited 2 in '@dbnary-dashboard/utils'
lerna ERR! yarn run bootstrap stdout:
$ composer install
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

lerna ERR! yarn run bootstrap stderr:
Installing dependencies from lock file (including require-dev)
Verifying lock file contents can be installed on current platform.
Warning: The lock file is not up to date with the latest changes in composer.json. You may be getting outdated dependencies. It is recommended that you run `composer update` or `composer update <package name>`.
Your lock file does not contain a compatible set of packages. Please run composer update.

  Problem 1
    - dealerdirect/phpcodesniffer-composer-installer is locked to version v0.5.0 and an update of this package was not requested.
    - dealerdirect/phpcodesniffer-composer-installer v0.5.0 requires composer-plugin-api ^1.0 -> found composer-plugin-api[2.0.0] but it does not match the constraint.
  Problem 2
    - metasyntactical/composer-plugin-license-check is locked to version v0.5.0 and an update of this package was not requested.
    - metasyntactical/composer-plugin-license-check v0.5.0 requires composer-plugin-api ^1.0 -> found composer-plugin-api[2.0.0] but it does not match the constraint.

You are using Composer 2, which some of your plugins seem to be incompatible with. Make sure you update your plugins or report a plugin-issue to ask them to support Composer 2.
error Command failed with exit code 2.

lerna ERR! yarn run bootstrap exited 2 in '@dbnary-dashboard/utils'
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Error: Command failed with exit code 2: yarn bootstrap

Current setup : Mac OS X with :

Checking prerequesits...
β”œβ”€β”€ Yarn v1.22.10
β”œβ”€β”€ Composer version 2.0.6 2020-11-07 11:21:17
β”œβ”€β”€ Docker version 19.03.13, build 4484c46d9d
β”œβ”€β”€ docker-compose version 1.27.4, build 40524192
β”œβ”€β”€ WP-CLI 2.4.0
β”œβ”€β”€ Missing optional Prestissimo (Composer package), install it now: https://packagist.org/packages/hirak/prestissimo

create-wp-react-app

npm install -g create-wp-react-app allows you to run create-wp-react-app name to create a new plugin.

Installation request for symfony/config v3.4.20

After create-wp-react-app create my-plugin it gets stuck at:

Γ— Install package dependencies with composer
β†’ - Installation request for symfony/config v3.4.20 -> satisfiable by symfony/config[v3.4.20].

Any ideas?

Fixed: make sure Composer points to php 7 and not 5

Incompatible with php7.4

Hi,

i wanted to try wp-react-starter as a new way to speed up my plugin development but unfortunately its incompatible wit php 7.4 and upwards. It seems its only because of the metasyntactical/composer-plugin-license-check locked at version 0.5.0. Thats why i prefer to lock my dependencies only downwards and run my testsuit to ensure upgraded packages dont break anything ;)

grafik

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.