devloco / create-react-wptheme Goto Github PK

Create modern, React-enabled WordPress themes with a single command.

License: MIT License

JavaScript 79.39% HTML 3.55% PHP 7.23% CSS 2.69% TypeScript 7.14%

wordpress-theme react-theme wordpress-server react-tutorial react-wordpress-themes php reactjs react create-react-app wordpress

create-react-wptheme's Introduction

Create React WP Theme

Still Up To Date!

May 6, 2020
Just wanted to note that version v3.4.1 of Create-React-App is still the latest.

If you have a theme made with an earlier version of create-react-wptheme and want to update it to the latest code, just follow these instructions.

Getting Started

Michael Soriano is writing a tutorial for creating a theme using React. He uses create-react-wptheme for the initial setup. He provides a lot more detail than this readme and the screen shots are really helpful.

Check it out:
Let's build a WordPress theme with React: Part 1 (Setup)

Readme Contents

For more details check out the rest of this document.

Creating a New Theme
Updating Existing Themes
- Updating TypeScript Types
Developing Your Theme
Deploying Your Theme
- Dealing With Differing Paths Between DEV and PROD
Goals
Acknowledgements
License

Creating a New Theme

To create a WordPress theme using create-react-wptheme, follow these steps.

Make sure your WordPress server is up and running.
Change dir into your WordPress themes folder (this is just an example, use your real themes folder).
- Windows: cd C:\xampp\htdocs\wordpress\wp-content\themes
- Mac or *nix: cd /xampp/htdocs/wordpress/wp-content/themes
Use npx create-react-wptheme to make a new theme
- For example: (replace "my_react_theme" with whatever you want your theme to be named):
- npx create-react-wptheme my_react_theme
  - If you want to use TypeScript, then the command would be:
  - npx create-react-wptheme my_react_theme --typescript
When it finishes it'll tell you to change into your new theme's folder and run the Nodejs watcher (replace "my_react_theme" with the same name you used in the previous step):
- cd my_react_theme/react-src
- npm run start
That sets up the theme so that it can be seen in the WordPress admin area.
- Go there now and set your WordPress site to use this theme.
View the site in your browser with the new theme.
- You must do this as it does some extra setup via PHP.
- If you get PHP errors, most likely your web server doesn't have write access to your theme.
  - Write access for your web server is only needed during this setup step.
  - You can revoke write access after the setup has completed.
  - Interested (paranoid?) about what it's doing? Check out the file: <Your Theme's Root Folder>/index.php
- When that's done you'll see: Now, back in your command prompt, rerun the "start" script again...
- To do that, go back to your command prompt where you first ran npm run start and rerun that same command again.
In a few seconds you should see your browser load with the standard create-react-app page, but it's running as a WordPress theme!

Updating Existing Themes

When new versions of Create-React-WPTheme are released, you can easily upgrade an existing theme using a single command.

At a command prompt, navigate to your theme's react-src folder.
- e.g. <Your Theme's Root Folder>/react-src
If you use npm then run this command:
- npm install @devloco/react-scripts-wptheme@latest
If you use yarn then run this command:
- yarn add @devloco/react-scripts-wptheme@latest

Updating TypeScript Types

If your theme uses TypeScript, you'll need to modify the theme's react-app-env.d.ts file:

Navigate to the <Your Theme's Root Folder>/react-src/src folder.
Open the react-app-env.d.ts file in your editor of choice.
Change the line in there to read (be sure to include the leading three slashes):
- /// <reference types="@devloco/react-scripts-wptheme" />
Save the change and you should be all set.

Developing Your Theme

React Tutorials

If you're looking at a React tutorial on the web, you can use create-react-wptheme in place of create-react-app.
But you do have to remember that the React app code is one extra folder down inside your theme folder.
Notice that the final folder in this path is react-src:

/xampp/htdocs/wordpress/wp-content/themes/<Your Theme's Root Folder>/react-src

So for example, if the tutorial instructs you to edit the src/App.js file, then for you, that file would actually be located at:

<Your Theme's Root Folder>/react-src/src/App.js

The Public Folder

The authors of the original create-react-app say that using the "Public" folder (found at react-src/public in your new theme's folder) is a last ditch "escape hatch" for adding otherwise-hard-to-deal-with files.

But for this project, I've decided to use it for all things that you'd put into a normal WordPress theme (e.g. functions.php, etc.). So any PHP, hard-coded CSS, and/or hard-coded JS (like other JS libraries that you'd like to reference globally (I don't judge)), can go into the public folder.

In addition, any changes made to CSS, JS, and PHP files in the Public folder will cause a rebuild to happen. Which is unlike create-react-app which ignores most of the files in the Public folder.

Dev Configuration

After you've created a new theme, and all the setup is done, you'll find a file named react-src/user.dev.json that has some configuration options that you can mess with if you need to.

HTTPS/SSL Support

If you develop using SSL (i.e. HTTPS), then you might want to run the Browser Refresh Server under SSL as well. Especially if you use Firefox, see here: Firefox Websocket security issue.

To configure the Browser Refresh Server to use SSL, follow these steps:

Assuming you've already created a theme using create-react-wptheme, change directory into the react-src folder in your theme's folder
- Be sure to follow all the instructions under the Usage section at the top of this document. You need to complete the PHP portion of the setup before you can configure SSL.
- Windows example: cd C:\xampp\htdocs\wordpress\wp-content\themes\<Your Theme's Root Folder>\react-src
- Mac or *nix example: cd /xampp/htdocs/wordpress/wp-content/themes/<Your Theme's Root Folder>/react-src
Create a new folder to hold you're development SSL certificate and key.
- All OSes: mkdir ssl
Change directory into the ssl folder
- All OSes cd ssl
Then create the SSL certificate and key.
- Windows: Install the Linux Subsystem for Windows 10, then use the *nix instructions below.
- Mac, see here: https://ksearch.wordpress.com/2017/08/22/generate-and-import-a-self-signed-ssl-certificate-on-mac-osx-sierra/
- *nix, see here (also works with Linux Subsystem for Windows 10): https://stackoverflow.com/questions/10175812/how-to-create-a-self-signed-certificate-with-openssl
Depending on which process you use to create the certificate and key, the files you created might have different extensions than those mentioned below.
- That's OK.
- Sometimes both files have a .pem extension, or each file has a different extension like .crt and .key.
- Just be sure you know which file is the certificate and which is the key.
There is a file named user.dev.json in the folder named react-src in your theme.
- Open that file in your favorite text editor.
- Change the "wpThemeServer" section to look like this (make sure it is proper JSON):
- "wpThemeServer": { "enable": true, "host": "127.0.0.1", "port": 8090, "sslCert": "ssl/localhost.crt", "sslKey": "ssl/localhost.key", "watchFile": "../index.php" },
- NOTE the sslCert and sslKey items. Make sure the values point to your SSL certificate and key files.
- The paths to those files can be full paths or relative paths from the react-src folder (as shown above).
- I like to set the host to 127.0.0.1 instead of "localhost". Supposedly the numeric address gets special treatment at the OS level as being mostly safe.
Back in your command prompt, change dir back to the react-src folder.
- All OSes: cd ..
Start Node/Webpack JS watcher as you normally would:
- All OSes: npm run start
- Your theme should open in a new browser tab
If you need to add an SSL exception to your browser for your new certificate, there is a page running over HTTPS at the "host" and "port" you set in user.dev.json above.
- For example, if you're using host 127.0.0.1 and port 8090 as shown above, then open your browser to:
  - https://127.0.0.1:8090/
- From there you'll get the standard browser warning about self-signed certificates and get the option to add an exception.
- Once you've finished adding an exception to your browser, you'll need to refresh the tab with your development theme to force a reconnect to the Browser Refresh Server.

Deploying Your Theme

While you're actively developing your theme, the files are not optimized for production. Before you put your theme into production, you need to run the build command.

Open a command prompt and change into the react-src folder of you theme and run this command: npm run build

When that command finishes, your optimized files are located in a folder that can be deployed to your production server.

Here's an example showing which folder to deploy to your server:

...wp-content
- themes
  - my-theme
    - my-theme <- deploy this folder to your production server's themes folder
    - react-src
    - !READY_TO_DEPLOY!.txt

If you need to continue developing your theme, simply:

cd react-src
npm run start

And all your theme files will reappear.

Dealing With Differing Paths Between DEV and PROD

The react-src/user.prod.json configuration file is read when you run npm run build. The only option in there is setting the "homepage" which controls the relative linking to files in your theme. The "homepage" setting in your main package.json file is used during development (and build by default).

During development, this is probably what you want. But if you know your production server has a different root, then you can set the homepage to be different during a production build.

For example:

Your WordPress dev server is running at http://localhost/wordpress
- the homepage setting in your main package.json file will probably work just fine.
- The homepage line in your main package.json will be something like: "homepage": "/wordpress/wp-content/themes/<Your Theme's Root Folder>"
But you know that your production server runs WordPress from the root: http://mycoolblog.com/
- In this case you want to remove the /wordpress part, so set the "homepage" line in your user.prod.json file to: "homepage": "/wp-content/themes/<Your Theme's Root Folder>"
- Then run npm run build
- Note at this point, your theme will appear broken on your dev server. But it should look as expected on your production server.

Goals

Remove WebPackDevServer and use your WordPress dev server instead.
- Also, do not proxy the WordPress server.
- Thus removing CORS as a concern.
Maintain feature parity(ish) with create-react-app
Touch the original react-scripts as little as possible.
- Add new files where possible.
- This will make merges easier.

Acknowledgements

I'm grateful to the authors of existing related projects for their ideas and collaboration:

create-react-app

The original.
filewatcher-webpack-plugin

I used this as an example for writing my own plugin for watching changes to the create-react-app "public" folder.

License

Create React WP Theme is open source software licensed as MIT.

create-react-wptheme's People

Contributors

Stargazers

Watchers

Forkers

hackur 3commadevs mykt0ngc0 benjaminluoma jbaldrich zharfanw thomasghenry gmmrx radovanx cyberwani mondyfy alancpazetto michaelsoriano jpatelaxon graykemy weszty whizkidefos itowhid06 yovelovadia jandony dancywritter hitesh97 asiacobra oligoform arkoleon szilarddenes shulikov-v samuasouza chispas-lab wpthe dyegocruz emptyops solita78 lexx2140 tchord22 nerko69 pomkanik w7br emanuelfromflorence danman54 webrulon kylearob techstackmedia robertoh24 dexit pt-3y marvingitau natalia-costanzi matosdm jordan-trahanov evanthacker elvisbm groupecomplus actuallythreecats immaneb

create-react-wptheme's Issues

User Guide internal links not working

The user guide seems to be missing some parts, as no link from the Table of Contents is working

Example: https://github.com/devloco/create-react-wptheme/blob/master/create-react-app-USERGUIDE.md#code-splitting

Non-Local Wordpress getting 404 on bundle.js for generated theme

This is more of a question than an issue, not sure how else to contact you.

This is working perfectly on my local Wordpress. When I transfer the theme to my actual wordpress account and activate the theme, the index file gets a 404 on "theme"/static/js/bundle.js. When I SSH into my box, I can see that the bundle.js file is there even though it's getting a 404.

Do the WPBuild and WPstart commands have to be run on the particular box it's running on? Or could you export the entire theme and expect it to work out of the box?

Thanks.

Can't build

Hi, i created a theme with npx create-react-wptheme testetheme but i can't even build. I'm using the latest version

The response when i run yarn build is TypeError: Cannot read property 'homepage' of null at module.exports (C:\Users\lucas\Documents\testetheme\node_modules\@devloco\react-scripts-wptheme\config\webpack.config.wptheme.js:77:25)

testetheme.zip

"npm run build" Is Not Working

This will start working again once I get my Webpack Config Files combined into one, like Facebook has done. See that issue:

Update Webpack Config to Match Create-React-App

How do I get the post data?

TypeScript is broken... again...

The update to create-react-app v2.1.8 seems to have broken TypeScript support.

Seems like it can't find the types it needs to render. The file react-app-env.d.ts is supposed to be the link necessary to make that work... but it's not working.

You haven't yet completed the PHP portion of your new theme's setup. Bugg ??

Theme failed to compile...

You haven't yet completed the PHP portion of your new theme's setup.
You must: npm run start
And follow those instructions to complete the PHP portion of the setup.
Try building again after that is done.

at npm run start , page starts as normal, nothing is showing up.

Build succces... ERROR: the server responded with a status of 404 (Not Found)

I have an issue with building my theme.
Everything works, it builds the theme successfully and I'm able to select the theme within the WP back-end. But when I'm going to view my theme, I see a blank page with multiple errors in the console that say "failed to load resource". At this point I don't know what I'm doing wrong, I followed your tutorial "Let's build a WordPress theme with React: Part 1 (Setup)" but I couldn't find the anwser there.

The steps I take:

(within react-src) npm run wpbuild -- I get the succes message: The build folder is ready to be deployed.
(wp back-end) change and activate the the build version of the theme. (The dev version says "ERROR: Stylesheet is missing." and is removed when activating the build version)
View site, I press on Visit site "New theme activated. Visit site"

The errors I get in the console:

Failed to load resource: the server responded with a status of 404 (Not Found): main.2cce8147.chunk.css:1
Failed to load resource: the server responded with a status of 404 (Not Found): 22.b41502e9.chunk.js:1
Failed to load resource: the server responded with a status of 404 (Not Found): main.f058206c.chunk.js:1
Failed to load resource: the server responded with a status of 404 (Not Found): main.2cce8147.chunk.css:1

Error when running npx create-react-wptheme themename

I'm running into a new error on a fresh installation. When I run

npx create-react-wptheme themename

It doesn't seem to complete the install. I get:

+ @devloco/[email protected]
added 1423 packages from 732 contributors and audited 892165 packages in 141.248s
found 0 vulnerabilities

internal/modules/cjs/loader.js:613
    throw err;
    ^

Error: Cannot find module 'C:\wamp\www\wordpress\wp-content\themes\newtheme\react-src\node_modules\package.json'

I try to run wpstart anyway - by going into react-src and doing a npm run wpstart, and I get

$ npm run wpstart
npm ERR! missing script: wpstart

The package.json contains very little stuff:

{
  "name": "react-src",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "@devloco/react-scripts-wptheme": "3.0.1-wptheme-3.0.0"
  }
}

Any ideas?

Auto Close "Restart NodeJs Watcher" Tab After Restart

When running create-react-wptheme for the first time, the browser tab that auto opens and performs the PHP part of the setup can be auto closed. When you restart the NodeJs watcher, another tab is auto opened, and thus you end up with 2 tabs showing the same thing.

Fixed

Component are not reflecting

My App is working is fine.styles are reflecting and components are not reflecting content and new components with routing not working

The precache-manifest Files doesn't get cleaned up

Hi @devloco - I'm back with more questions if you don't mind.

I noticed that everytime I do a run wpbuild - the precache-manifest.XXXX.js files gets added - but it doesn't get rid of the old ones. Is this expected?

Also, where's the best place to put static images?

One last thing - what would be the best way to have constants such as $TEMPLATE_PATH (You have it in index.php) - but I want to access it in React components?

Thank you in advance.

[DONE] Update to Create React App 3.4.0

Facebook has released cra340, time to do the update dance...

user.prod.json homepage property not used on wpbuild

When I run node run wpbuild the homepage property set in user.prod.json isn't used - it uses the homepage property in my package.json. I also tried removing the homepage prop in package.json and moving it to user.dev.json but then it used the root as the homepage.

TypeScript is not working...

Running normal "create-react-app foo --typescript" successfully creates a React App with TypeScript enabled and compiling.

But running "create-react-wptheme foo --typescript" gets all the way to launching the browser, but then gets a TypeScript specific error message about not being able to find "logo.svg".

Maybe it has something to do with setting the "homepage" in package.json... or maybe nothing to do with that.

Error Overlay Not Behaving The Same as Create React App's Overlay

Sometimes the error overlay looks wonky if you manually refresh the browser.
For example in App.tsx (note TypeScript) if you change line 3 to this (note the foo):

import foo "./App.css";

The initial overlay looks as expected. But then hit F5 to manually refresh and it looks very different.
Doing the same steps in a normal create-react-app project does not show the same behavior.

Everything is still running properly, i.e. saving a file will still cause the browser to refresh. Even if the newly saved page has another error, it causes the error overlay to re-render properly. So this is really just a cosmetic bug.

Builds put the theme files in a sub directory of the theme

Hi there. When I run the build command the theme files are created in a subdirectory of my theme (ex: my-theme/my-theme/style.css). I created a new theme to be sure the issue wasn't something related to my theme and saw the same behavior. Any ideas?

Cannot find module './yarn.lock.cached'

Trying to install via npx create-react-wptheme my_theme but... get getting this:

Cannot find module './yarn.lock.cached'

Deploying theme to server has blank page

In development server (localhost) everything works fine.
But after npm run build get folder that I deploy to wordrpess server.
It appears in theme section I can choose it, but it appears only blank page with some errors:

Update to Latest Create-React-App

Looks like Facebook has released a new version of create-react-app:
v3.1.1

I'll give it a few more days to make sure they don't have any bad bugs in the new version. Then I'll get the changes into create-react-wptheme

More detailed deployment instructions/troubleshooting?

Is there any additional info about deployment located somewhere?

I've run the wpbuild and dropped the build folder into my server. I'm getting a white screen and 404 errors - any thoughts or pointers on how to troubleshoot?

Build ignoring user.prod.json homepage directory

Running npm run build builds the theme but ignores the user.prod.json homepage directory.

After the script finishes, the output confirms it:

The project was built assuming it is hosted at /wordpress/wp-content/themes/theme/.
You can control this with the homepage field in your package.json.

This is running 3.4.0. I'm pretty sure it worked in a previous version.

Warn Users After Running `wpbuild` That Theme Will Look Broken on Dev Server

If a user's dev server and prod server use differing paths for the root URL (a common setup) this can get confusing. Here's what happens:

The user ran npm run start and made some changes to their theme.
When they're done dev'ing, they run npm run build to make a production ready version of the theme.
If they refresh their browser (currently pointed at their dev instance) the browser will show a "missing stylesheet" error.

It'd be nice to warn them that this is expected behavior.

Themes built using npm run start will be broken on a production server.
Themes built using npm run build will be broken on a dev server.

Research Using React-Hot-Loader

This looks like the latest work:
facebook/create-react-app#5958

And here's the doc site:
http://gaearon.github.io/react-hot-loader/

How to support multiple routes in index.php file?

Hi,

This is a question not an issue.

I am using react router and have a route called /example1
If I refresh the page while on /example1 locally it works, because the wp-dev server is running, and it serves up the react app.

But when the build is deployed, there's nothing to catch the request when you refresh the page on routes other than "/", so you get a blank page. How can I add additional route support to the php file beyond the root "/"? Or would it be in the index.html file?

Thank you.

Done: Update to Create-React-App v3.3.0

This ticket is used to track my work on the 3.3.0 branch.

How to update?

Hi, thanks for this project. It's been really handy.

I started a project when the build bug was still a thing. I'm wondering if you could tell me how to update. npm update doesn't work.

Thanks.

Can I change the location of the Build Folder?

Hi @devloco - a few more questions if you don't mind.

When I do npm run wpbuild, can I have the "build" folder outside of the theme directory (as another theme - with a different name)?

So it will have a my-theme-prod instead of my-theme in styles.css?

The reason is, I would like to check 2 versions in my Git repo - so our deployment scripts can simply grab the my-theme-prod and install it.

Thanks in advance.

static/js directory not updating

I am having trouble with the static/js directory. Seems to be working locally, but when I make changes and run build the new js files are not going into the theme directory that gets uploaded to my server. I am coming back to this project after a couple months so its possible I am forgetting something. Anyhow, should I just copy the static directory from my build folder into my theme folder?

Attaching Stylesheet per component

Hey guys,

First of all thank you for this tool, it's pretty useful.

I have a issue though. I wan't to improve the website's performance by avoid all the unused CSS in each page, by attaching a single stylesheet for each of my component.

I think this was possible by simply import the CSS file in the component in Create React App. But with CR-WPTheme, it just bundles all the imported CSS on a big Chunk.css file. Is there any way to avoid that (by ejecting the project, and modifiy something in the webpack config file) ?

Thank you for your answer !

How can we use localization and react-hot-loader here?

help me ! !

i can't run
npx create-react-wptheme
when i run then error....
create-react-wptheme version: 3.3.1-wp.3
@devloco/react-scripts-wptheme version: ^3.3.1-wp.2

Creating a new React WP theme in C:\xampp\htdocs\ReactJS\wp-content\themes\reactjs.
Using Create React App 3.3.1 to scaffold the theme's source code...

Error: EEXIST: file already exists, mkdir 'C:\Users\Vo'
TypeError: Cannot read property 'loaded' of undefined
at exit (C:\Users\Vo Dong Ho\AppData\Roaming\npm\node_modules\npm\lib\utils\error-handler.js:97:27)
at errorHandler (C:\Users\Vo Dong Ho\AppData\Roaming\npm\node_modules\npm\lib\utils\error-handler.js:216:3)
at C:\Users\Vo Dong Ho\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js:78:20
at cb (C:\Users\Vo Dong Ho\AppData\Roaming\npm\node_modules\npm\lib\npm.js:225:22)
at C:\Users\Vo Dong Ho\AppData\Roaming\npm\node_modules\npm\lib\npm.js:263:24
at C:\Users\Vo Dong Ho\AppData\Roaming\npm\node_modules\npm\lib\config\core.js:81:7
at Array.forEach ()
at C:\Users\Vo Dong Ho\AppData\Roaming\npm\node_modules\npm\lib\config\core.js:80:13
at f (C:\Users\Vo Dong Ho\AppData\Roaming\npm\node_modules\npm\node_modules\once\once.js:25:25)
at afterExtras (C:\Users\Vo Dong Ho\AppData\Roaming\npm\node_modules\npm\lib\config\core.js:171:20)
C:\Users\Vo Dong Ho\AppData\Roaming\npm\node_modules\npm\lib\utils\error-handler.js:97
var doExit = npm.config.loaded ? npm.config.get('_exit') : true
^

TypeError: Cannot read property 'loaded' of undefined
at exit (C:\Users\Vo Dong Ho\AppData\Roaming\npm\node_modules\npm\lib\utils\error-handler.js:97:27)
at process.errorHandler (C:\Users\Vo Dong Ho\AppData\Roaming\npm\node_modules\npm\lib\utils\error-handler.js:216:3)
at process.emit (events.js:321:20)
at process._fatalException (internal/process/execution.js:165:25)
Install for [ '[email protected]' ] failed with code 7
(node:6200) UnhandledPromiseRejectionWarning: ReferenceError: reject is not defined
at C:\Users\Vo Dong Ho\AppData\Roaming\npm\node_modules\create-react-wptheme\createReactWpTheme.js:278:9
at processTicksAndRejections (internal/process/task_queues.js:97:5)
(node:6200) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode).
(rejection id: 1)
(node:6200) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

help me !!!!!

Fix Unit Testing Support

Personally, I've never seen any benefit to unit testing... but I realize I'm in the minority there. So basically I've been nuking all the unit testing support code built into create-react-app from create-react-wptheme as part of my process.

I should probably take a closer look at this and see how hard it is to port and maintain that capability into create-react-wptheme.

Freezing everything on windows 10

File-watcher is consuming too much disk also freezing everything, I tried by configuring, interval and binary Interval to 2000, but still, it starts hanging after some time.

user.dev.json

{
	 "fileWatcherPlugin": {
		  "touchFile": "./public/index.php",
		  "ignored": "./public/index.php",
		  "watchFileGlobs": [
			   "./public/**/*.js",
			   "./public/**/*.css",
			   "./public/**/*.php"
		  ],
		  "interval": 2000,
		  "binaryInterval": 2000
	 },
	 "wpThemeServer": {
		  "enable": true,
		  "host": "127.0.0.1",
		  "port": 8090,
		  "sslCert": null,
		  "sslKey": null
	 },
	 "injectWpThemeClient": {
		  "override": null,
		  "file": "./build/index.php"
	 }
}

Not a Bug - But a few questions to get started...

@devloco - first - Thank you for this amazing tool. I'm up and running. I'm excited to dive in.

Although, I have a few questions.

When I create a git repository for my theme - do I do it from the root theme folder (I notice there's a .git folder in react-src)? Do I gitignore node_modules etc?
How do I install it in other environments? Do I go through the normal WP installation of the theme?
How does it know which one user.{env}.json file to read, when I move to another server?
Just verifying that all server interactions is through WPREST API correct?

Thanks again.

Node version in react-scripts-wptheme-utils incompatable with other libraries.

Might be overkill to do it, but I was trying to set this up with React & Redux and got an error:

yarn add redux
yarn add v1.12.3
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
error @devloco/[email protected]: The engine "node" is incompatible with this module. Expected version ">=8". Got "6.11.2"
error Found incompatible module
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

Should it be pulling in a more recent version of Node?

CSS Modules className not applied on development

CSS Modules not working for module.scss and module.css files.

The className being generated, but not attached to the HTML.

This is the CSS file being generated

The className should be applied to <p> tag, but there's not className applied.

It's not working in development, the production build working just fine.

[DONE] Update to Match Create-React-App v3.3.1

This ticket is used to track my work on the new 3.3.1 branch.

Fix PWA Support

Since I started this project, I've had problems getting the Progressive Web Apps (PWA) stuff that is built into create-react-app to work. I've just been remarking out that code. But I should dig into the problem and see if there isn't a way to get it working properly in create-react-wptheme since the popularity of PWAs is on the rise.

Error Overlay Is Not Invoked When There Is a Client-Side Error

It looks like Facebook made changes to their error overlay, and now it's not working for create-react-wptheme.

[DONE] Update to Create-React-App v3.4.1

Create-React-App was recently updated to v3.4.1.
I need to get those changes into Create-React-WPTheme.

nested routes issue

When using create-react-wptheme, nested routes for example "/blog/test-post-slug", upon page reload removes the route prefix of "/blog" and simply goes to "/test-post-slug", responding with my 404 error page. I duplicated my code over to a normal create-react-app, with the same exact routing and this issue is not present. I believe it may be due to a misconfigured webpack setting?

Blank screen + page keeps refreshing?

Hi @devloco - a couple of observations. There would be times when I'm in wpstart mode, I save a file, browser refreshes and its just a blank screen. I've also seen the page keeps refreshing multiple times - non stop. I'm guessing it might be chrome.

It's not a big deal, all I need to do is npm run wpstart again - and it seems to fix itself.

Also an update: I'm almost done with my project and I must tell you that I'm really liking this setup. It seems that this is better than having separate servers for the front and back - because this way, we can keep some of the WP functionality and the React app - in the same url.

For example, I have my a couple of WP pages that are using theme (template files) and I have the main React app. Its pretty sweet! Thanks for all your work on this.

Nevermind.