wp decoupled

wp分離⚡

これは、次のJS、Webpack、Babel、Node、Expressで構築されたWordPress用のReactテーマのボイラープレートです。

ライブデモサイト。

ライブデモ

デモ？

はじめる ？

これらの指示により、プロジェクトのコピーを開発して、開発目的でローカルマシンで実行します。

インストール？

1. [email protected]:rtCamp/wp-decoupled.git
2. cd wp-decoupled
3. nvm use
4. npm install

BackEnd（WordPressサイト）を構成しますか？

1.WordPressにGraphQLサポートを追加します

1. WordPressプラグインディレクトリで、次のプラグインをクローンしてアクティブにします。

   • WP-GraphQlは、WordPressのGraphQLを公開します
   • wp-graphql-jwt-authenticationこのプラグインは、wp-graphqlプラグインを拡張して、JWTを使用した認証を提供します。
   • wp-graphiqlは、wp-adminにgraphiql ide（遊び場）を提供します
   • wp-graphql-woocommerceは、WOCOMMERCE機能をWPGRAPHQLスキーマに追加します（WP-GrapHQL-WOOCommerceのV0.7.0までテスト）

2. また、開発用のWooCommerceプラグインを搭載したデフォルトのWooCommerce製品（WordPressインストールに製品がない場合）をインポートすることもできますwp-content/plugins/woocommerce/sample-data/sample_products.csv

2。認証用

a。選択した秘密のトークンを使用できますが、WordPress Saltジェネレーター（https://api.wordpress.org/secret-key/1.1/salt/）を使用して生成して秘密を生成する場合に最適です。トークンのいずれかを拾い上げて、以下の「秘密のトークン」の代わりに追加します。

WordPressディレクトリのwp-config.phpで秘密を定義します。

 define( 'GRAPHQL_JWT_AUTH_SECRET_KEY', 'your-secret-token' );

b。特定の環境によっては、これらのヘッダーを有効にする方法を調査する必要がある場合がありますが、Apacheでは、 .htaccessで以下を実行できます。

 SetEnvIf Authorization "(.*)" HTTP_AUTHORIZATION=$1

フロントエンドを構成しますか？

• .env.exampleを.envに変更し、詳細を更新します

 SITE_URL=http://localhost:3000
NEXT_PUBLIC_WOO_SITE_URL=http://yourwocommercesite.com
WOO_CONSUMER_KEY=xxxxx
WOO_SECRET=xxxxx

コマンド

• npm run dev開発モードでノードサーバーを実行します
• npm run dev:inspect InspectorでDEVサーバーを実行します
• npm run server次のProducitonサーバーを実行します
• npm run lintリナーを実行します
• npm run formatフォーマットを実行します
• npm run build次のビルドを作成します

モバイルでPWAを使用します

• 携帯電話でChromeのサイトを開き、[追加]をクリックしてホーム画面をクリックします。
• モバイルでプログレッシブWebアプリとしてダウンロードされ、保存されます。
• 一度追加されたら、携帯電話にWP Decoupledアプリをデカップしました。
• このPWAは、オフラインであっても機能します。

ブランチ情報？

1. マスターメインReact WooCommerceテーマ
2. テスト用に開発します
3. PWA実装を使用して新しいReactテーマプロジェクトを開始するためのWP-ドコープルドボイラープレートボイラープレート（作業中）

著者

• rtcamp

貢献者？

• イムランは言った
• ムハンマド・ムシン
• Divyaraj Masani
• Sayed Taqui
• Vipin Kumar Dinkar
• Belal Dif

ライセンス？

このプロジェクトはMITライセンスに基づいてライセンスされています - 詳細については、license.mdファイルを参照してください

これはあなたに興味がありますか？