Skip to content

Commit 6014d19

Browse files
committed
Update TypeScript updating instructions
1 parent f1749d1 commit 6014d19

File tree

2 files changed

+14
-7
lines changed

2 files changed

+14
-7
lines changed

README.md

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
# Create React WP Theme <!-- omit in toc -->
22

3-
Dec. 25, 2019
3+
Jan. 1, 2020
44
<br />
5-
Updated to use [Create React App](https://create-react-app.dev/) version [3.3.0](https://github.com/facebook/create-react-app/releases/tag/v3.3.0).
5+
Updated to match [Create React App](https://create-react-app.dev/) version [3.3.0](https://github.com/facebook/create-react-app/releases/tag/v3.3.0).
66

77
---
88

@@ -26,6 +26,7 @@ For more details check out the rest of this document.
2626

2727
- [Creating a New Theme](#creating-a-new-theme)
2828
- [Updating Existing Themes](#updating-existing-themes)
29+
- [TypeScript Update](#typescript-update)
2930
- [Developing Your Theme](#developing-your-theme)
3031
- [React Tutorials](#react-tutorials)
3132
- [The Public Folder](#the-public-folder)
@@ -73,11 +74,17 @@ From within your theme's `react-src` folder, run this command at a command promp
7374

7475
`npm install @devloco/react-scripts-wptheme@latest`
7576

76-
If your theme uses TypeScript, you'll need to run a second command (`create-react-wptheme` uses the Types from Facebook's React-Scripts):
77+
**Important note for Yarn users: be sure to use `yarn add` instead of `npm install` in the above commands.**
7778

78-
`npm install react-scripts@latest`
79+
### TypeScript Update
7980

80-
**Important note for Yarn users: be sure to use `yarn add` instead of `npm install` in the above commands.**
81+
If your theme uses TypeScript, you'll need to modify the theme's `react-app-env.d.ts` file:
82+
83+
- Navigate to the `<Your Theme Root Folder>/react-src/src` folder.
84+
- Open the `react-app-env.d.ts` in your editor of choice.
85+
- Change the line in there to read (be sure to include the leading three slashes):
86+
- `/// <reference types="@devloco/react-scripts-wptheme" />`
87+
- Save the change and you should be all set.
8188

8289
## Developing Your Theme
8390

@@ -134,7 +141,7 @@ To configure the `Browser Refresh Server` to use SSL, follow these steps:
134141
- `"wpThemeServer": { "enable": true, "host": "127.0.0.1", "port": 8090, "sslCert": "ssl/localhost.crt", "sslKey": "ssl/localhost.key", "watchFile": "../index.php" },`
135142
- **NOTE** the `sslCert` and `sslKey` items. **Make sure the values point to your SSL certificate and key files.**
136143
- The paths to those files can be **full paths** or **relative paths** from the `react-src` folder (as shown above).
137-
- I like to set the `host` to `127.0.0.1` instead of "localhost". The numeric address gets special treatment at the OS level as being mostly safe.
144+
- 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.
138145
- Back in your command prompt, change dir back to the `react-src` folder.
139146
- All OSes: `cd ..`
140147
- Start Node/Webpack JS watcher as you normally would:

packages/create-react-wptheme/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
"index.js",
3838
"createReactWpTheme.js"
3939
],
40-
"homepage": "https://github.com/devloco/create-react-wptheme#readme",
40+
"homepage": "https://github.com/devloco/create-react-wptheme",
4141
"bin": {
4242
"create-react-wptheme": "./index.js"
4343
},

0 commit comments

Comments
 (0)